/

制作使用网址导航

nav_cover

小弟在群晖上跑了不少服务,多了之后要记各个服务项的地址,想尝试做一个网址导航方便使用各项服务。一番搜索,发现这个好像不错,静态页面,简单直接。

修改源码

首先修改静态页面的源码,将里面的网址换成自己的地址。下载好作者的源码解压,用文本编辑器打开其中的文件修改即可。有一个问题是,html 文件里的各种标签的括号容易搞混层级,这里可以一款前端编辑器 Espresso,这个小工具可以方便折叠收起各种标签,找到对应位置替换地址即可。

nav_tool

图片资源放在 /assets/images 路径下,作者还放了一个 Sketch 的源文件,方便改图。

改好好可以在浏览器中看下效果。

nav_preview

设置外网访问

比较简单从外网访问这个网页的方式是通过群晖的 Web 服务器。

首先上传网页文件夹至群晖任意位置,在群晖套件中心安装「Web Station」,

nav_web1

打开 Web Station,新建一个网站,可以选择按端口号,之后填写端口号,后端服务器可任意选择,之后即可创建好网站。

nav_web2

若设置好了 DDNS 与端口映射,应该外网就可以访问了。

需要注意的是,各类入口露在外网,记得设好密码,密码建议不要太简单。