Pintree 是一個開源項目，旨在將瀏覽器書簽導出成導航網站。通過簡單的幾步操作，就可以將書簽轉換成一個美觀且易用的導航頁面。 ...
大家好，我是 Java陳序員。
今天，給大家介紹一個賊好用的導航網站搭建工具，只需通過幾步操作，就能搭建出個性化導航網站！
關註微信公眾號：【Java陳序員】，獲取開源項目分享、AI副業分享、超200本經典電腦電子書籍等。
項目簡介
Pintree 是一個開源項目，旨在將瀏覽器書簽導出成導航網站。通過簡單的幾步操作，就可以將書簽轉換成一個美觀且易用的導航頁面。
Pintree 支持使用 GitHub Pages 進行部署，無需購買伺服器、功能變數名稱等資源！
因此，只要有一個 Github 賬號，就能快速搭建一個導航網站。接下來我們就來部署實現下！
項目部署
步驟一：Fork 項目
1、訪問 pintree 項目地址
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、在修改前，我們需要先瞭解下具體的語法規則，一個最小化的規則配置如下：
[
{
"//": "folder 表示是一個文件夾，可以配置子模塊信息",
"type": "folder",
"//": "添加的時間信息",
"addDate": 1718526477999,
"//": "標題",
"title": "Java 陳序員",
"//": "子模塊",
"children": [
{
"//": "link 表示是一個網站鏈接，最小化的配置單元",
"type": "link",
"//": "添加的時間信息",
"addDate": 1718526687700,
"//": "網站標題",
"title": "個人博客網站",
"//": "網站圖標",
"icon": "https://chencoding.top:8090/_media/logo.png",
"//": "網站地址",
"url": "https://chencoding.top/"
},
"//": "依此類推",
{
"type": "folder",
"addDate": 1718526865665,
"title": "編程網站",
"children": [
{
"type": "link",
"addDate": 1718526707006,
"title": "CSDN",
"icon": "https://img-home.csdnimg.cn/images/20201124032511.png",
"url": "https://www.csdn.net/"
},
{
"type": "link",
"addDate": 1718526707006,
"title": "掘金",
"icon": "https://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg",
"url": "https://juejin.cn/"
},
{
"type": "link",
"addDate": 1718526707006,
"title": "博客園",
"icon": "https://www.cnblogs.com/images/logo.svg?v=2SMrXdIvlZwVoB1akyXm38WIKuTHVqvGD0CweV-B6cY",
"url": "https://www.cnblogs.com/"
}
]
}
]
}
]
4、文件修改完後，點擊 Commit changes 保存
5、過幾分鐘後，再訪問 https://yourusername.github.io/pintree
可以看到，網站的內容變成了個性化的配置信息了。
由於瀏覽器有緩存的原因，如一開始沒有變化，可以使用無痕模式訪問或者用其他瀏覽器訪問。
瀏覽器書簽導航
通過前面的內容，我們知道 pintree 只需要一個 JSON 文件，就能搭建出一個導航網站。因此我們可以將瀏覽器中收藏的書簽導出成 JSON 文件，再生成一個靜態導航網站！
步驟一：導出瀏覽器書簽
1、安裝 Pintree Bookmarks Exporter 插件
安裝地址：https://chromewebstore.google.com/detail/pintree-bookmarks-exporte/mjcglnkikjidokobpfdcdmcnfdicojce
2、使用插件導出瀏覽器書簽，並保存 JSON 文件到本地
步驟二：替換 JSON 文件
將 JSON 文件替換到 Fork 項目的 json/pintree.json 文件中，保存成功後過幾分鐘再訪問。
pintree 通過簡單的配置，只需要幾分鐘就能快速搭建出一個導航網站，而且不用提供伺服器、功能變數名稱等資源，是一個非常優秀的開源項目！如果你想搭建一個靜態導航網站可以去試試哈。
項目地址：https://github.com/Pintree-io/pintree
最後
推薦的開源項目已經收錄到 GitHub 項目，歡迎 Star：
https://github.com/chenyl8848/great-open-source-project
或者訪問網站，進行線上瀏覽：
https://chencoding.top:8090/#/
大家的點贊、收藏和評論都是對作者的支持，如文章對你有幫助還請點贊轉發支持下，謝謝！
