您的当前位置:首页正文

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

2024-10-17 来源:个人技术集锦

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

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


显示全文