由于本博客一直是使用用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>的朋友

其他标签等均在index.html中修改对应代码即可，较为简单，这里不再赘述

下载地址

此处内容需要评论回复后（审核通过）方可阅读。

版权属于：Derek村长

本文链接：https://blog.dosth.fun/archives/webguide.html

所有文章采用"署名-非商业性使用 4.0 国际 (CC BY-NC 4.0)"许可。 您可以自由的转载和修改，但请务必注明文章来源。

最后修改：2020 年 04 月 26 日
© 允许规范转载
如果觉得我的文章对你有用，打赏一瓶快乐水呗