通过typecho轻量博客通过WebStack来搭建导航页

【写作说明】：该专栏主要是为了满足我小小的折腾之心，因为很多软件都是从GitHub上开源的，所以大部分都需要通过docker搭建。网上信息过于零散或者找不到。通过我的实践可行后记录下来，以供之后大家也能搭建自己喜欢的应用。我这边只是抛砖引玉，很多地方还在摸索过程中，会有不完善，欢迎大家在评论区中补全。

正文开始

大家好，我是Mooo墨迹，如有写的不好，请多多海涵。按照惯例，如有参考，我会把参考文档贴在文末，大家也可以同步借鉴参考。如果有涉及到侵权的地方，请及时联系，我这边删除。

继折腾完阿文菌大佬通过web station搭建静态页面导航页、然后发现Heimdall这款开源导航页之后，我已经一段时间不折腾导航页了。一直以来，我不知道私人博客对于我而言的用处是什么，即便如此，我秉持着，我可以不用，但不能没有的原则，搭建了wordpress（体验很不好，不是因为使用，而是因为不知什么原因，做了端口转发我仍然无法外网访问），因为我是全程连接外网进行搭建，所以在我搭好后无法访问就抛弃了它（等有空了再研究一下）。。。

这里推荐一波Heimdall，也是一款很精美的导航页：

【群晖】 Heimdall 牵着你的小手安装完完美导航页你是AMDYes党？还是intel和NVIDIA的忠实簇拥呢？最新一届#装机大师赛#开始啦！本次装机阵营赛分为3A红组、intelNVIDIA蓝绿组、混搭组还有ITX组，实体or虚拟装机都能参与，可使用值得买定制化DIY装机工具在文中展现配置单！每个小组均有精美礼品，优秀文章还可角逐装机大师终极大奖Mooo墨迹| 赞65 评论23 收藏496查看详情

在搜索别的私人博客搭建的时候，我又发现了阿文菌大佬写的搭建Typecho轻量级博客，一开始我没看好它（毕竟相对wordpress，没那么出名），但是我暂时也没啥好的选择，就试一试吧。

搭建完我发现，emmmm，我还是不知道该用它来干什么，一开始是想着一些比较敏感的技术发在我的私人博客（后来被我发在了B站，大家有兴趣也可以去看看），后来实在碍于我太懒了。但是，慕然回首，我发现有大佬把一款开源项目做成了typecho主题，然后可以通过它来实现导航页功能。

他动作很快啊，我大意了啊，没有闪。这我就不困了，于是马上安排上。

废话说了那么多，接下去开始来正文把

前戏准备

1.安装完Typecho轻量级博客，具体可参考阿文菌大佬的教程：

折腾群晖笔记：使用群晖自带的web功能 五分钟搭建typecho个人博客你是AMDYes党？还是intel和NVIDIA的忠实簇拥呢？最新一届#装机大师赛#开始啦！本次装机阵营赛分为3A红组、intelNVIDIA蓝绿组、混搭组还有ITX组，实体or虚拟装机都能参与，可使用值得买定制化DIY装机工具在文中展现配置单！每个小组均有精美礼品，优秀文章还可角逐装机大师终极大奖阿文菌| 赞121 评论118 收藏749查看详情

2.下载完WebStack主题，我就不直接上下载资源了，毕竟用了人家的，给人家一点流量吧。具体可参考： www.zmki.cn/5366.html

3.可以通过阿里矢量库来查找自己喜欢的图标，用于之后的页面定制

具体步骤

1.根据主题中的’使用说明‘，将‘admin’和‘var’文件夹分别替换到对应位置---将主题压缩包上传至‘/web/typecho/usr/themes’路径下进行解压

解压路径

2.打开Typecho---进入后台（如果不知道，就在url后面加‘/admin/index.php’）---选择‘更改外观’

后台编辑页面

3.启用‘WebStack’主题---此时可以点击右上角‘网站’看效果（后台页面别关掉，还要编辑）

启用主题

4.点击上方‘编辑当前外观’，可进行页面编辑（也可以走群晖内FileStation，文本编辑器进行编辑）。这边需要一定的前端基础，具体教学很复杂，我这边就不细讲了，大家自行发挥。如果大家后续评论多的话，我考虑再开一贴具体讲讲可以改哪些来修改成适合自己的页面

代码页编辑

5.点击上方‘修改外观’---作者已经预设了很多地方以供修改，基本这些设置为就满足了大部分基础条件，大家按照设置介绍自己修改成需要的，这我就没法手把手教了。。。emmmmm

设置完后效果

6.选择‘管理’---点击‘分类’---下方新增即可，这个是主页面左侧以及大的分类显示

7.接下去开始导航页制作---选择‘撰写’---点击‘撰写文章’

选择‘撰写’，撰写文章

8.撰写文章具体内容：标题（不用说了吧）---点击右侧‘分类’，即归纳到哪一个分类---点击附件，选择上传---会有一个链接，进行复制，然后点击确认

撰写文章

9.下方‘自定义字段’---跳转链接填写你要跳转的链接（可以内网，可以外网，这样就实现了内外网都添加上了，还可以添加一些你常用的门户网）注意，别的链接一定要加http://开头，不然跳转不过去---‘链接logo’内填写你刚刚复制的链接，即可实现缩略图展示

自定义字段

10.然后提交文章即可实现前台的展示，然后去前台点击就可以实现跳转功能

总结

这是一个和Heimdall不同风格的导航页，如果你存在和我当初一样的疑惑，导航页能做啥？

当你一步步折腾nas之后，你会发现，你开启的端口越来越多，不同端口跳转不同的功能，时间一久就忘了具体是啥了，那么通过导航页，你可以记录下来，后续无需再背端口，一键直达。

后续我打算把各类我常用的门户网设置上去，然后浏览器设置主页即打开这个，这样就是一个对我私人定制的导航页，从而使我的收藏夹解放出来一部分（门户网解放出来）

另外我要推荐一波我的另外一篇文章：

通过docker搭建签到框架

参考资料

www.zmki.cn/5366.html

GitHub-WebStackPage/WebStackPage.github.io:❤️静态响应式网址导航网站-webstack.cc❤️静态响应式网址导航网站 - webstack.cc. Contribute to WebStackPage/WebStackPage.github.io development by creating an account on GitHub.github.com去看看