贼好用！五分钟搭建一个美观且易用的导航页面！

大家好，我是 Java陈序员。
今天，给大家介绍一个贼好用的导航网站搭建工具，只需通过几步操作，就能搭建出个性化导航网站！

关注微信公众号：【Java陈序员】，获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。

项目简介

Pintree 是一个开源项目，旨在将浏览器书签导出成导航网站。通过简单的几步操作，就可以将书签转换成一个美观且易用的导航页面。

Pintree 支持使用 GitHub Pages 进行部署，无需购买服务器、域名等资源！
因此，只要有一个 Github 账号，就能快速搭建一个导航网站。接下来我们就来部署实现下！
项目部署

步骤一：Fork 项目

1、访问 pintree 项目地址

1. https://github.com/Pintree-io/pintree

复制代码

2、Fork 项目到自己的仓库中

步骤二：启用 Github Pages

1、打开 GitHub 账号中 Fork 的 pintree 项目
2、切换到仓库的 Settings 标签页，点击 Pages,在 Source 下拉菜单中，选择 gh-pages 分支，然后点击 Save

3、几分钟后，静态导航网站将会在 https://yourusername.github.io/pintree 上可用

yourusername 是你的 Github 账号，如 https://chenyl8848.github.io/pintree.

这样，一个美观且易用的导航网站就搭建好了！
这时，好奇的小明就会问，要怎么个性化修改配置网站内容呢？别急，继续看步骤三。
步骤三：替换 JSON 文件自定义导航内容

1、pintree 渲染的导航网站内容是基于 json/pintree.json 文件里面的配置信息，我们可以通过修改 pintree.json 文件来自定义导航网站内容

2、打开 pintree.json 文件，并点击修改按钮进入编辑模式

3、在修改前，我们需要先了解下具体的语法规则，一个最小化的规则配置如下：

1. [
2.     {
3.         "//": "folder 表示是一个文件夹，可以配置子模块信息",
4.         "type": "folder",
5.         "//": "添加的时间信息",
6.         "addDate": 1718526477999,
7.         "//": "标题",
8.         "title": "Java 陈序员",
9.         "//": "子模块",
10.         "children": [
11.             {
12.                 "//": "link 表示是一个网站链接，最小化的配置单元",
13.                 "type": "link",
14.                 "//": "添加的时间信息",
15.                 "addDate": 1718526687700,
16.                 "//": "网站标题",
17.                 "title": "个人博客网站",
18.                 "//": "网站图标",
19.                 "icon": "https://chencoding.top:8090/_media/logo.png",
20.                 "//": "网站地址",
21.                 "url": "https://chencoding.top/"
22.             },
23.             "//": "依此类推",
24.             {
25.                 "type": "folder",
26.                 "addDate": 1718526865665,
27.                 "title": "编程网站",
28.                 "children": [
29.                     {
30.                         "type": "link",
31.                         "addDate": 1718526707006,
32.                         "title": "CSDN",
33.                         "icon": "https://img-home.csdnimg.cn/images/20201124032511.png",
34.                         "url": "https://www.csdn.net/"
35.                     },
36.                     {
37.                         "type": "link",
38.                         "addDate": 1718526707006,
39.                         "title": "掘金",
40.                         "icon": "https://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg",
41.                         "url": "https://juejin.cn/"
42.                     },
43.                     {
44.                         "type": "link",
45.                         "addDate": 1718526707006,
46.                         "title": "博客园",
47.                         "icon": "https://www.cnblogs.com/images/logo.svg?v=2SMrXdIvlZwVoB1akyXm38WIKuTHVqvGD0CweV-B6cY",
48.                         "url": "https://www.cnblogs.com/"
49.                     }
50.                 ]
51.             }
52.         ]
53.     }
54. ]

复制代码

4、文件修改完后，点击 Commit changes 保存

5、过几分钟后，再访问 https://yourusername.github.io/pintree

可以看到，网站的内容变成了个性化的配置信息了。

由于浏览器有缓存的原因，如一开始没有变化，可以使用无痕模式访问或者用其他浏览器访问。

浏览器书签导航

通过前面的内容，我们知道 pintree 只需要一个 JSON 文件，就能搭建出一个导航网站。因此我们可以将浏览器中收藏的书签导出成 JSON 文件，再生成一个静态导航网站！
步骤一：导出浏览器书签

1、安装 Pintree Bookmarks Exporter 插件

1. 安装地址：https://chromewebstore.google.com/detail/pintree-bookmarks-exporte/mjcglnkikjidokobpfdcdmcnfdicojce

复制代码

2、使用插件导出浏览器书签，并保存 JSON 文件到本地

步骤二：替换 JSON 文件

将 JSON 文件替换到 Fork 项目的 json/pintree.json 文件中，保存成功后过几分钟再访问。
pintree 通过简单的配置，只需要几分钟就能快速搭建出一个导航网站，而且不用提供服务器、域名等资源，是一个非常优秀的开源项目！如果你想搭建一个静态导航网站可以去试试哈。

1. 项目地址：https://github.com/Pintree-io/pintree

复制代码

最后

推荐的开源项目已经收录到 GitHub 项目，欢迎 Star：

1. https://github.com/chenyl8848/great-open-source-project

复制代码

或者访问网站，进行在线浏览：

1. https://chencoding.top:8090/#/

复制代码

大家的点赞、收藏和评论都是对作者的支持，如文章对你有帮助还请点赞转发支持下，谢谢！

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！