Hexo美化:个性化主题加载页面教程
Hexo美化:个性化主题加载页面教程
东方月初加载动画结语
Hexo是一款快速、简洁且高效的静态博客框架,它的加载页是展示个人品牌和风格的重要组成部分。通过定制加载页,你可以为你的网站增添个性化的风格,提升用户体验,以及传达特定的信息。
本文以本站使用的主题
anzhiyu
为例,在本教程中,我们将深入探讨如何更换Hexo加载页,从简单的概念到具体的实施步骤,帮助你轻松地定制属于自己的加载页。加载页的作用:加载页是指在网页加载完成之前显示的页面,通常用于展示品牌标识、加载进度和欢迎信息。它不仅可以提升用户体验,还可以传达网站的特色和个性。
加载页设计的考虑因素:在定制加载页时,需要考虑网站的整体风格和目标受众。加载页应该与主题风格一致,同时尽量简洁明了,以保持用户的注意力和耐心。
原教程中使用的是
butterfly
主题,本教程将以anzhiyu
的格式进行更改,在此,感谢煮雪话河山和SNTube Studio整合并提供了详细的配置教程,他们的博客链接如下:
首页加载预览效果
加载预览效果
操作步骤
1. 新建文件
themes/anzhiyu/layout/includes/loading/
里,新建文件wizard.pug
,内容如下
1 | #loading-box |
2. 修改index.pug
- 找到
themes/anzhiyu/layout/includes/loading/
的index.pug
文件,并替换文件内容
1 | if theme.preloader.source === 1 |
3. 修改loading.styl
- 找到
themes/anzhiyu/source/css/_global/
,拷贝一份loading.styl并重命名为default.styl
- 为了便于后续管理,在此目录下新建
load_style
文件夹,将default.styl
放入load_style
文件夹中 - 修改
loading.styl
文件,并替换以下内容
1 | if hexo-config('preloader.enable') |
4. 新建wizard.styl
- 找到
themes/anzhiyu/source/css/_global/load_style/
并新建一个wizard.styl
,内容如下
1 | .loading-bg |
5. 修改主题配置文件
- 在主题配置文件中找到
preloader
,修改如下
1 | # Loading Animation (加载动画) |
6. 这个时候,如果你的文件配置正确,可以执行Hexo的三连命令来查看效果了!
1 | hexo clean; hexo g; hexo s |
教程参考资料
评论
匿名评论隐私政策
✅ 你无需删除空行,直接评论以获取最佳展示效果