追加修改(2020-04-24 20:50:20):
顶部增加 demo 页面 https://blqw.github.io/nas-home-page/
感谢
感谢@阿文菌的文章, 受到很大启发
本文不涉及如何部署网页文件，不会部署的移步
零、
为了让大家更方面的使用导航页，我特别做了一个单文件的导航页
(精力有限没有测试浏览器的兼容性, 支持主流手机浏览器和微信内置浏览器以及桌面chrome)
网页有自适应会根据宽度调整图标大小，可以在手机中打开
页面有打开动画，有点酷
可以自动识别内网环境，使用内网地址访问
相对友好的PC和手机访问体验
部署简单,单文件
一、文件
说是单文件，实际上是由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 图标代码, 下一节说怎么获取
三、获取图标
上网页
首先这个网站必须要登录，不过没有注册
but！你可以选择新浪，或者github，账号的问题就自己解决了哈~
登录之后可以在这里搜索图标的关键字
复制svg代码
粘贴到配置文件里, 就是第二节里的部分
反引号就是这个键
到底为止就已经配置完成了, 接下来用自己熟悉的方式部署到NAS或者路由器或者其他服务器上即可。
四、还有一些说明
如果是你的导航页使用根路径访问, 如 "http://www.xxx.com/"那么配置文件必须为index.js
按住ctrl点图标 可以在新窗口打开
按住alt点图标 可以强制使用内网连接打开 (内网环境判断可能因为服务地址或网速不稳定而失败)
为了追求单文件页面, 所以网页没有背景, 没有icon, 没有字体, 如果动手能力强可以自行改造
无
五、文件下载
 |
新手玩家
