本文最后更新于 362 天前，其中的信息可能已经有所发展或是发生改变,如有失效可到评论区留言。

Contents

Preface

In fact, there are two considerations for making this navigation page:

1. Regular inspection of record keeping

I registered with Tencent Cloud, and Tencent Cloud will regularly check the content of the site corresponding to the www host of my registered domain name. First, it checks whether the site is online, second, it checks whether the site name is consistent with the one filled in when registering, and third, it checks whether the registration number is filled in normally. The second and third points are both very annoying for me. Because when registering, the site name was randomly filled in with a name that could pass the initial review of the registration (it was rejected several times because I was not allowed to use a name with the word "blog" in it), and I was not allowed to change this name, which resulted in my blog name being neither fish nor fowl (I used to directly point www to my blog), and the registration number at the bottom of the blog also reduced the style of my blog a lot. . . So I thought why not just create a static page associated with the www host, hang the registered site name and registration number on this static page, and free up my blog. .

2. Application category navigation

I do have too many types of applications, and I really need a navigation page. When someone visits my www host, they can directly see my main applications through this navigation page, which will be much clearer. And those personal navigation pages on the Internet (see my article:Docker series uses Docker to build its own exclusive navigation page based on Heimdall) are actually only suitable for personal use, not for public access, so after some searching, I found this icloud-style navigation page:

Does it feel good? So this article will briefly introduce the static page construction.

The github project address is as follows:https://github.com/asundust/NAS-Nav-iCloud

First download the source code file. If GitHub is not accessible, you can also visit the following link to download:Unrivaled file sharing，访问密码为：”blog.tangwudi.com”，下载其中的”NAS-Nav-iCloud-master.zip”文件即可。

In addition: Actually, this page was originally used as a navigation page for NAS, so it has the function of switching between internal and external network links. However, I use it as a www page, so some modifications are needed.

Deploy using the pagoda linux panel

Install nginx

在”软件商店”右侧的应用搜索框中输入”nginx”后回车，然后在下方选择Nginx，然后点击右方红框中的”安装”：

保持默认的极速安装选项即可，编译安装也行，但是会占用更多的安装时间，然后点击右下红框中的”提交”进行安装：

Install PHP

在”软件商店”右侧选择”运行环境”，在搜索框中输入”PHP”后回车，然后在下方选择一个php版本安装，例如我选了PHP-7.4，然后点击右方红框中的”安装”：

编辑安装和极速安装都可，默认极速安装，点击下方红框中的”提交”进行安装。

Get access to your domain name

There are no requirements for this domain name. If it is mainly for domestic access, it is best to have a registered domain name, so that you can achieve a better access experience through many domestic CDN providers. If you don't have too high requirements for the access experience, it doesn't matter if you don't have a registered domain name. Building a website through cloudflare is not completely inaccessible. It can still be opened basically, but it's a little slow.

Assume the example domain name is:www.example.com.

Create a new site

登录宝塔linux面板，如红框所示，在”网站”界面点击右方的”添加站点”：

下图红框中的域名部分填写正确的域名，最终的访问请求达到nginx的时候，nginx会根据http请求的host字段包含的域名与自己站点配置的域名进行比对，匹配得上才会进行处理。PHP版本处选择一个自己已经安装的版本，最后点击右下方红框中的”提交”即可完成站点的新建：

(Optional) Configure an SSL certificate

有公网IP的朋友，虽然是可选，但是还是建议作为必选项，毕竟https现在基本已经成为标配了。一般有手动导入证书和使用Let’s Encrypt自动申请两种方式。

To import the certificate manually:
手动导入证书的话，需要首先有证书，像腾讯云和阿里云都可以白嫖（如果刚好域名是在腾讯云或者阿里云购买的），一般直接下载nginx格式的证书，.key扩展名的文件内容对应的就是密钥，.crt扩展名的文件内容对应的就是证书，分别粘贴到对应的红框里，然后点击最下方红框中的”保存并启用证书”按钮即可。

Automatically request a certificate:
一般建议直接使用Let’s Encrypt直接申请证书，前提是域名解析已经正确配置，因为Let’s Encrypt在申请证书的时候会先查询这个域名是否能够正确解析：

The DNS interface is to select your domain name provider. You have the following options:

If the domain name provider happens to be one of these four, you can use it directly (the id and API key need to be set correctly), otherwise you can only choose manual resolution.

In addition: If you don’t have a public IP address and want to use https to access the website, the easiest way is to use cloudflare’s tunnel method to build a website. For detailed steps, see my other article:A series of tricks to quickly build a website using domestic cloud hosts or home devices to use CloudFlare for freeThe biggest advantage of this method is that you only need to provide intranet http access, and cloudflare will automatically convert it to https for external use.

Deploy source code

将前面下载的源代码(NAS-Nav-iCloud-master.zip)通过宝塔面板的”文件”界面上传到”/www/wwwroot/www.example.com”这个目录中：

将刚上传的zip文件上直接点右键，然后选择”解压”：

进入解压出来的”/www/wwwroot/www.example.com/NAS-Nav-iCloud-master/web”目录，将里面的内容都剪切到站点目录”/www/wwwroot/www.example.com”中：

Delete the redundant files, and the final result is as follows:

To be honest, if the network access policy is set up properly and the domain name resolution is normal, thenhttps://www.example.comThe default interface is accessed by address, and the effect is as follows:

Next, we need to modify each icon in this default interface and the link that jumps after clicking the icon to meet our actual needs.

Modify the icon and actual link

还是在文件功能菜单里，在右侧直接双击打开”index.html”文件，当然也可以直接下载到电脑本地用其他文本编辑器编辑，这个看大家习惯：

打开”index.html”其实可以直接看到很详细的注释：

The definition of specific icons and links starts from line 187:

Each red box in the above picture represents an icon and the corresponding link after clicking the icon.
以第一个红框”我的博客”为例示范如何进行修改：

第一个红框中的”#”改为真实的链接，比如我的博客域名为:https://blog.tangwudi.com, fill this in here.
The second red boxclass="disabled-link"Just delete it. If it exists, it means this icon is disabled.
The third red boximg/png/AppStore.pngSpecifies the image corresponding to the icon. The default icon images are as follows:

If you are not satisfied with the default icon images, you can use an image tool to generate 128×128 png images. I basically generate them myself, but this step is the most time-consuming. The generated images are still uploaded to the img/png folder, and then usedimg/png/xxx.pngMethod to call.
第四个红框就是这个图标对应的文字，比如”我的博客”，最终结果如下：

Processing each icon and link in turn is the final effect. You can see my actual effect:Invincible sample page

Modify the toggle button

As we mentioned before, this page was originally a navigation page for NAS, so there will be a switch button between OFFICE and HOME in the upper right corner. The original intention is to access the corresponding office page from the external network. The links on this page are all external links. Click it and switch to the home page, which corresponds to the link of the internal network address.

但是这里我并不需要，因为我本来就是用来放到公网上作为导航页来快速访问的。所以我需要对这2个按钮的文字进行修改，分别改为”下一页”和”前一页”。这个修改的地方仍旧在”index.html”的182行：

After the modification, refresh the page, and the effect is as follows:

Response to record inspection

This hidden content is only available to VIPsUpgrade VIP

Docker build via nginx

In fact, the reason why we use the Baota Linux panel is that it is the easiest to understand and the most convenient way for beginners to deploy source code. For experienced people, using Docker is the most efficient way. However, using Docker will face a problem, that is, the way to cooperate with nginx and php two containers, because it involves fastcgi, so the initial deployment will take time (see my other article:Docker series single container nginx, single container php (one version) multi-site sharing). However, if the setup is already complete, you only need to throw the unzipped web folder into the corresponding directory, copy the existing .conf file, and then modify the server_name parameter. If you are interested, you can try it. I did this for another www page for foreign domain names.