賊好用！五分鐘搭建一個美觀且易用的導航頁面！

Java陈序员發表於2024-09-18

大家好，我是 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/#/

大家的點贊、收藏和評論都是對作者的支援，如文章對你有幫助還請點贊轉發支援下，謝謝！

相關文章