重新制作本站主引导页

2020 年 04 月 26 日

110444 次浏览

1241字数

由于本博客一直是使用用blog二级域名的，www以及@都是指向的一个纯html的web，其页面非常简陋，于是我一直想有个重制引导页的想法，但由于本人并不是前端专业，所以这个计划一直没有实施。昨晚在B站偶然发现一个不错的引导页教程，视频up主已经基于原作者进行了二次开发：修改了网站HTML结构错误问题、排版、增加了音乐、控制音乐隐藏显示的小按钮。并且提供了源码下载。
于是我针对二次源码，进行了再修改，形成符合自己需求的样式。
引导页效果图

改良清单

1.修改网页固定背景图为每日Bing壁纸Api
2.修改网站描述为一言Api
3.修复网页ico图加载失败的问题
4.修改底部IP效果
5.更改为自己的头像、标签以及BGM等。

具体操作

修改背景图

//api.timecdn.cn/wallpaper
背景图代码在css/main.css文件中约70-80行的位置，我采用的是Willkwok大佬提供的API接口，详细api的教程请参考他的博文
背景图修改位置

修改网站描述为一言Api

描述在index.html中约55-60行位置修改

<script type="text/javascript" src="https://api.uixsj.cn/hitokoto/get?type=hitokoto&code=js"></script><div id="hitokoto"><script>hitokoto()</script></div>

一言修改位置

修改ico显示错误

将index.html中第9行重写为下述代码即可
<link rel="shortcut icon" href="/etc/favicon.ico" type="image/x-icon">

修改底部IP效果

将index.html中第76-79行重写为下述代码即可

欢迎来自<script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
<script type="text/javascript">
document.write(returnCitySN["cip"]+','+returnCitySN["cname"])
</script>的朋友