香~家用NAS（群晖&威联通）构建的个人导航页分享

首先来张动图吧

波浪效果参考chrome的导航插件“几枝”

写在前面

个人的Nas（无论是群晖还是威联通都具备这种功能，都很简单）已经安装并成功部署了web应用，具体方式请看下面几位兄弟导航构建方法，我就不再陈述了，因为几位兄弟已经介绍的很全面了~整体操作比较简单，内容也比较丰富，提供了几种主页导航的样子，嫌麻烦的可以直接取来用。

恺哥我爱你 的 NAS折腾 篇二：三分钟给你的群晖加上美观的个人导航页

晋升奶爸的垃圾佬 的 小白爱折腾 篇三：忘掉无数的端口 给群晖NAS做一个方便的导航页

阿文菌 的 折腾群晖笔记：使用群晖自带的 web 功能 一分钟安装自己的导航页

折腾原因

本职码农，喜欢折腾，原有风格没太有喜欢的，图标不合适，手机上无法正常使用

下载使用

移步百度网盘（2rym）吧，下载后解压并上传到nas下面的web目录下即可（前提是你先部署好了web服务的应用），接下来就是修改页面中你想要的链接、名字和图标了，用任意编辑器打开start目录下的index.html，找到里面的<a target="_blank" href="#">，将href里面的#修改成你想加入的链接即可，不明白的请翻阅顶楼上3个链接里面的内容哈，这里就不详细阐述了。

改善

对于导航页，我主要做了响应式（响应式是什么？请稳步）的改善，使其能更好的适应手机端，因为有些时间，手机上还是会有一些操作的需要，比较方便一些，不多说了，上图

电脑和手机端效果切换

1、手机端的背景图可随意更换，更换images下面的bg.jpeg文件即可，考虑到背景图的复杂性，我给标题和图标的文字加了投影（仅在手机界面显示），以更好的适应不同的背景，大家自己换吧，我拿允儿镇个楼

2、新增了一些图标，比如nas的，Jellyfin的等，加的不多，仅供我个人够用就好，原图标库取自Nokia Evolve+图标包，想了解的请移步酷安，在此鸣谢作者。

结束

此贴没有技术含量，仅为分享贡献，喜欢的朋友就拿去用，标题的字体调用了google字体库，我也不确定能不能正常显示这个字体，但不会影响使用，有问题大家可留言，代码水平垃圾，同行轻喷，哈哈哈，随便写着玩的，最后来两张高保真的截图

电脑上看

手机上看