包教包会，NAS自建实用，简单的导航页！

追加修改(2020-04-24 20:50:20):
顶部增加 demo 页面 https://blqw.github.io/nas-home-page/

感谢

感谢@阿文菌 的文章, 受到很大启发

本文不涉及如何部署网页文件，不会部署的移步

QNAP进阶教程：威联通web服务 2分钟安装漂亮导航页！方便管理和使用家中NAS等网络设备！#大男孩的快乐#征稿活动火热进行中。只要投稿就有50金币等你拿，更有三千元乐高大奖与达人Z计划专属权益等待优秀的你~>活动详情戳这里阿文菌| 赞114 评论88 收藏857查看详情

使用Nginx给nas系统添加导航页小编注：此篇文章来自#原创新人#活动，成功参与活动将获得额外50金币奖励。本人背景是硬件工程师，有一些linux基础，但对网络编程一窍不通。疫情在家闲来无事，整天逛张大妈，看见大家都在玩nas，有点手痒，也攒了一台算是allinone的家用服务器吧。NAS系统没有上黑群晖，试了试omv，感觉还不错（amon-XD| 赞8 评论7 收藏74查看详情

NAS折腾 篇二：三分钟给你的群晖加上美观的个人导航页小编注：此篇文章来自#原创新人#活动，成功参与活动将获得额外50金币奖励。添加理由哪个大男孩不想拥有一个属于自己的网站呢？从远古时期的新浪博客，到qq空间，到新浪微博，再到我现在用的githubPage，博客一直是一个展示自己到平台，在写群晖搭建博客之前，我先写一个搭建个人导航页吧（由于本人非常不喜恺哥我爱你| 赞38 评论31 收藏385查看详情

零、

为了让大家更方面的使用导航页，我特别做了一个单文件的导航页
(精力有限没有测试浏览器的兼容性, 支持主流手机浏览器和微信内置浏览器以及桌面chrome)

1. 网页有自适应会根据宽度调整图标大小，可以在手机中打开
   

2. 页面有打开动画，有点酷

3. 可以自动识别内网环境，使用内网地址访问

4. 相对友好的PC和手机访问体验

5. 部署简单,单文件

一、文件

说是单文件，实际上是由2个文件组成的 html(页面文件)，js(配置文件)

2个文件名(除去后缀部分) 称必须相同，否则找不到配置，建议使用index

二、配置

配置文件中描述页面需要展示的内容，只要修改js文件中的内容即可

第一部分

title 网页标题 (可空) 显示在标题栏 和 页面左上角
user 你的昵称 (可空) 显示在页面右上角
icp 备案号 (可空) 显示在页面最下面中间 (为空时隐藏整个区域)

第二部分

pins 是一个json-array格式
pins = [ ] , 最外层一是对中括号
中括号里面可以跟0~4个成对的花括号,花括号之间逗号隔开 pins = [ {},{},{},{} ]
花括号就是json-object格式
花括号内可以写4个属性:属性值 { txt:"",url:"",purl:"",svg:"" }
属性和属性值之间以冒号隔开, 属性和属性之间以逗号隔开,

pins 固定在网页下面的4个图标(最多4个,最少0个)
　┣ txt 图标名称
　┣ url 连接地址
　┣ purl 内网地址, 会自动判断是否可以访问,可以则用这个地址渲染页面
　┗ svg 图标代码, 下一节说怎么获取
pins 是一个json-array格式
pins = [ ] , 最外层一是对中括号
中括号里面可以跟0~4个成对的

第三部分

格式说明参考pins

apps 页面主体部分的图片, 不设上限, 会根据页面大小自动缩放排列
　┣txt 图标名称
　┣ url 连接地址
　┣ purl 内网地址, 会自动判断是否可以访问,可以则用这个地址渲染页面
　┗ svg 图标代码, 下一节说怎么获取

三、获取图标

上网页

Iconfont-阿里巴巴矢量图标库Iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具www.iconfont.cn去看看

首先这个网站必须要登录，不过没有注册

but！你可以选择新浪，或者github，账号的问题就自己解决了哈~

登录之后可以在这里搜索图标的关键字

复制svg代码

粘贴到配置文件里, 就是第二节里的部分

反引号就是这个键

到底为止就已经配置完成了, 接下来用自己熟悉的方式部署到NAS或者路由器或者其他服务器上即可。

四、还有一些说明

1. 如果是你的导航页使用根路径访问, 如 "http://www.xxx.com/" 那么配置文件必须为index.js

2. 按住ctrl点图标 可以在新窗口打开

3. 按住alt点图标 可以强制使用内网连接打开 (内网环境判断可能因为服务地址或网速不稳定而失败)

4. 为了追求单文件页面, 所以网页没有背景, 没有icon, 没有字体, 如果动手能力强可以自行改造

   无

   
   

五、文件下载