前言
起因是收到网信办的提醒，检测到我的域名没有使用，要求我注销。由于我的博客使用的是blog.xmhweb.cn，www这个二级域名是停用的状态，备案的域名会定期检查是否正常，这让我不得不把www这个二级域名使用起来，和大佬取经之后发现可以做成一个导航页，也很符合www.xmhweb.cn这个二级域名的定位和归属了。所以就借用大佬的教程开始行动。
下载源码文件
首先下载源码压缩包：NAS-Nav-iCloud-master.zip，如果访问不了github，也可以在我的个人网盘下载：Alist网盘
创建网站
进入宝塔面板，添加一个站点，至于nginx和php这些网站运行环境就自己提前下载好，没什么好讲的。
部署源码
将下载的源码压缩包解压：
进入网站的根目录：/www/wwwroot/test.xmhweb.cn，上传web文件夹
然后将/www/wwwroot/test.xmhweb.cn/web目录下的文件全部剪切到根目录/www/wwwroot/test.xmhweb.cn下，删掉空文件夹web
做好域名解析和SSL证书申请这些，应该就可以正常访问了，如图：
个性化设置
这个默认的界面肯定是不符合我们要求的，我需要对他进行一些修改。
图标、链接修改
在根目录下双击打开index.html文件，找到如下位置进行修改即可，需要一点点html知识，不会也没关系，对照显示样式进行替换即可。
修改切换按钮
在导航页右上角有一个切换按钮，用来自动切换内外网，从外网访问对应的是OFFICE界面，所以右上角显示切换到内网访问的HOME按钮，不过我修改了外网访问地址这部分的连接，去访问显示的却是内网访问地址，这有些奇怪。
首先修改一下按钮显示文字，编辑文件index.html文件：
针对内外网界面显示调换的问题，我通过修改按钮功能进行了修复，添加了checked元素：
添加个性化logo
我觉得welcome的logo太普通了，我想改成我个人的logo，并进行一些美化，index.html文件中也做了修改的提示，如图，取消这行标签的注释，并将上面的标签注释掉：
这样看还是觉得太板正了，不够优雅，接下来进行美化一下，打开/www/wwwroot/test.xmhweb.cn/css/style.css文件，根据class="logo"定位到logo元素，进行如下修改：
#logo {
width: 260px;
margin: 0 auto;
text-align: center
}
#logo img {
width: 141px;
height: 141px; /* 添加高度，确保为正方形 */
border-radius: 50%;
object-fit: cover;
display: block;
margin: 0 auto;
transition: transform 0.3s ease, filter 0.3s ease;
}
#logo img:hover {
transform: scale(1.1); /* 放大 10% */
filter: brightness(1.2); /* 亮度提升 */
}
#logo h1 {
color: #fff;
text-align: center;
text-shadow: 0 0 10px #111;
font-weight: 200;
font-size: 36px;
font-family: MyriadSetPro-Thin;
margin-top: 15px
}效果如下：
备案信息
既然是为了应付网信办审查，最好还是要在网站底部放上备案信息，修改index.html文件：
<div class="line">
<a href="https://beian.miit.gov.cn/" target="_blank" one-link-mark="yes">湘ICP备2023038664号</a>
<br>
<a href="https://www.beian.gov.cn/portal/index?token=e547b70c-fbe1-4c80-a4a2-857b17389a71" target="_blank" one-link-mark="yes" rel=\"noreferrer\" >
<img src="https://upyun.xmhweb.cn/blogImage/baianLogo.png" style="width: 15px; height: 15px;"/>湘公网安备43020002000016号</a>
</div>最后将备案信息居中，打开style.css文件，搜索footer，将right改成center：
保存，刷新页面。
