solution-blog-loading-animation-love-death-robots
Love, Death & Robots加载动画
首先,在这个令人开心的时刻,让我们先感谢这个动画的css作者
加载动画预览也看那个作者链接吧,差不多,只是把颜色改了改
要做什么
butterfly版本:4.10
添加加载动画的两种文件:pug和styl,分别对应html和css文件
在主题中添加加载动画的入口
pug资源目录:themes/butterfly/layout/includes/loading/load_style
styl资源目录:themes/butterfly/source/css/_load_style
pug的配置入口位置:themes/butterfly/layout/includes/loading/fullpage-loading.pug
styl的配置入口位置:themes/butterfly/source/css/_layout/loading.styl
如果觉得上面东西很陌生的话,建议先看看前辈的自定义加载动画博客
开始操作
新建文件:themes/butterfly/layout/includes/loading/load_styl ...
note-hexo
Hexo折腾史
推荐博客
Heo的Butterfly主题美化教程
icat的魔改教程
搭建Hexo
全局安装hexo命令
1npm install -g hexo-cli
初始化Hexo
hexo init
安装主题(两种方式)
在hexo主目录下【推荐】使用npm【不推荐】git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
把主题放置在主目录中,更容易定制主题npm i hexo-theme-butterfly
虽然配置容易,但主题会放在node_modules中,定制主题不方便
本地部署(本地测试)
hexo server
远程仓库配置
新建Github远程仓库
git push -u origin main
部署到Github
两种方式都可以,可以只用一种,也可以都用
本地一键部署Github PagePush部署不需要push,可以单独deploy
这样部署不仅方便,而且就不需要push源文件到main分支就可以查看效果(避免过多提交代码 ...