博客自定义页脚
前言转载自:唐志远の博客
效果预览
ps:升级版页脚请移步:页脚美化
升级版效果预览
步骤
直接将BlogRoot/themes/butterfly/layout/includes/footer.pug中的所有代码替换为如下代码并自行修改内容:
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647#footer-wrap #ft .ft-item-1 .t-top .t-t-l p.ft-t.t-l-t Welcome .bg-ad div | --- DQY ❤ WY --- .btn-xz-bo ...
添加白天黑夜模式转换动画
前言参考自:添加白天夜间模式转换动画
实现过程参考教程非常详细,只是提一点可能需要注意的地方:+表示新增内容,-表示需要删除的内容,+在添加代码后不要忘记删掉并且删除后代码缩进需要保持不变
添加顶部加载进度条
前言参考自:为你的Butterfly添加顶部加载进度条
效果预览
查看butterfly版本
4.5.0及以上版本主题已内置 pace.js 无需再次引入,打开主题配置文件_config.butterfly.yml搜索preloader并按下列格式修改,修改完直接hexo三连即可
12345678preloader: enable: true # source # 1. fullpage-loading # 2. pace (progress bar) source: 2 # pace theme (see https://codebyzach.github.io/pace/) pace_css_url: https://fastly.jsdelivr.net/gh/xlenco/JS-X@main/pace.js/pace.css
4.5.0版本以下需要引入css
新建Blog\source\css\custom.css,缺少的文件夹或文件直接创建即可 ...
制作待做清单页面
前言转载自:博客添加待办清单页 | 轻笑Chuckle (qcqx.cn)
效果预览
实现过程新建Blog\themes\butterfly\layout\includes\page\todolist.pug并添加下列代码
注意:请将下列代码第二行中的/img/todo.webp替换为你想要展现的图片路径
123456789101112131415161718192021222324252627282930313233#todolist-box .page-top-card(style='background-image: url(/img/todo.png);') .content-item-tips 想做清单 span.content-item-title ToDoList .content-bottom .tips 要做的事还有很多,想做的事源源不断 #todoli ...
实现文章点赞
前言转载自:网站添加点赞、踩功能 | 轻笑Chuckle (qcqx.cn)
效果预览
部署OrLike注册登录LeanCloud并创建应用->回到首页点击应用设置
点击应用凭证并保存AppID和AppKey的值
点击数据存储->结构化数据->创建Class,名称设置为OrLike,不用改其余配置
点击一键部署),将应用部署到Vercel,未注册Vercel请参考添加Twikoo实现博客在线评论由于Vercel域名被墙,需要修改Vercel域名,请参考添加Twikoo实现博客在线评论添加环境变量今天完全搞忘了这一步导致云函数一直报错500,蠢哭了~_~
打开刚刚部署的项目点击settings
点击Environment Variables并填入Key和Value,这里注意:Key填”APPID”和”APPKEY”
前端部署以butterfly主题框架为例:
修改themes\butterfly\layout\includes\post\re ...