本着避免重复造轮子的原则,该教程记录了博主部分对网站的原创自定义美化魔改,同时也包括 f12 扒取其他优秀博主样式的部分。
食用教程前,建议先看一下《教程&笔记常量申明》,且所有修改对缩进格式等有严格要求。
更新日志
2022-6-30
- 优化了【首页置顶文章轮播组件】,采用模板方式调用_data 文件夹里 yaml 文件的数据
2022-3-16
2022-3-08
2021-8-12
- 侧边 Sticky 组件随页面上下滚动而微移的 Bug
2021-6-14
2021-6-03
2021-4-30
2021-4-28
- 深浅模式下分别使用不同网站背景
- 首页公告栏轮播组件
深浅模式下分别使用不同网站背景
-
修改<BlogRoot>\themes\butterfly\_config.yml
,其中background_dark
参数为深色模式下的图片地址。
-
修改<BlogRoot>\themes\butterfly\source\css\var.styl
,在第 36 行左右
-
修改<BlogRoot>\themes\butterfly\source\css\_mode\darkmode.styl
,在第 41 行左右
拓展:
若你想像我一样使用四方连续风格图片(seamless background)且能正常显示 repeat 效果,则继续按照下方更改
-
修改<BlogRoot>\themes\butterfly\source\css\_global\index.styl
,在第 64 行左右
首页公告栏轮播组件
开发背景
看了洪哥的首页哔哔轮播组件,心里痒痒的想整,奈何自己早已转战 leancloud 版哔哔,于是看着月益增多的公告栏突然灵机一动,寻思着把每一条公告通过轮播组件来实现会不会更好,而且右侧组件又可以腾个位置了,于是开始一天摸鱼的行动,终于扒完了。
来康康我删前的右侧公告栏 👇,太占面积了,加了滚动条还是觉得长,而且信息不容易被访客捕捉到
预览效果
-
修改<BlogRoot>\themes\butterfly\_config.yml
(可以忽略,貌似不加也行)
-
新建<BlogRoot>\themes\butterfly\layout\includes\notice.pug
.swiper-slide <Custom>
这里可以写你的公告内容
-
新建<BlogRoot>\source\notice\index.md
,也可以通过在命令行里敲hexo new page <Custom>
-
修改<BlogRoot>\themes\butterfly\layout\index.pug
注意:如果你使用了 GitCalendar,可能会出现大小失常,建议height:15%
改成height:7.5%
,具体情况自行调整
-
在<Custom>.css
里添加以下代码
使用场景:公告栏可以写与博客网站相关的重要事件,也可以写与博主有关的公告申明。
缺点:每次更新公告要在index.md
和notice.pug
俩文件里进行手动增删改,当然你也可以选择不建index.md
,少费点事,访客只看看就行,不需要点进去看完整公告,然后适当自定义修改notice.pug
即可。我个人觉得公告栏不用像哔哔那样需频繁更新,所以这算不上是麻烦。
2021.5.25:我意外看到realwds前端大佬也写了篇公告栏教程,好巧,他的教程是采用模板形式,只用在 md 文档中写时间和公告消息,首页前端就能获取到文本并显示出来,正好解决了我教程的缺点,友友们按需选择教程。
右下角返回顶部按钮
效果请看网页右下角
-
修改<BlogRoot>\themes\butterfly\_config.yml
src
这里添加图片地址
-
在<Custom>.css
里添加以下代码
-
在<Custom>.js
里添加以下代码
-
最后把 butterfly 自带的返回顶部按钮给去掉,提供俩思路,留作课后作业
display: none;
- 获取类名/id 名,定位到 pug 源码,注释或删除相应代码
注意:img 标签内所有参数值以及 css 代码里的值都可以自定义更改,前后保持一致就行。
JS 代码参考教程:晴明的博客园
更改文章 h1~6 级标题前 icon 图标
开发背景
灵感来源于eurkon。单靠肉眼识别字体大小来判断标题等级不是件容易的事情,若 h1~6 标题使用不同图标的话,那么识别会容易许多。
小插曲:我之前在此问题上花了很多功夫,比如加大各等级标题字体大小之间的差值(肉眼还是难以分别)、更换颜色(确实好分辨,但主色过多不符合我对网站视觉美感的要求)、部分标题加不同样式的左边框(还是不太符合视觉美感要求,不够直观)
- 在
<Custom>.css
里添加以下代码
其中<Custom>
部分可以填写一下内容:
-
H¹、H²、H³、H⁴、H⁵、H⁶
-
H₁、H₂、H₃、H₄、H₅、H₆
-
H1、H2、H3、H4、H5、H6
-
fontawesome的 icon 图标代号(例如'\f06c'
)
-
可以加阿里图标(在此鸣谢Venkiˡᵒᵛᵉ💕 留言)
- Hexo 三连即可看到效果
首页置顶文章轮播组件
开发背景
每次打开自己博客,前 5 排都是置顶文章,同时右侧小组件中的“最新文章”早已被我换成了更新时间排序,所以一定程度上访客难以快速定位到最新发布的文章。把置顶文章用轮播图的形式表现出来,既美观又能腾出部分展示空间给最新发布的文章。
预览效果
-
新建<BlogRoot>\themes\butterfly\layout\includes\sticky.pug
-
在<BlogRoot>\source\_data
里新建sticky.yml
。这是文章模板,放 4-6 篇文章为佳。
-
修改<BlogRoot>\themes\butterfly\layout\index.pug
-
在<Custom>.css
里添加以下代码
-
Hexo 三连即可看到效果
注意:写该教程时,我只是将我目前轮播组件使用的 CSS 代码进行了简单适配更改,但未经测试,所以样式 CSS 代码可能存在问题,再一次给友友们提供锻炼 CSS 调试能力的机会,同时sticky.pug
中的 JS 参数可以自行调整,更多参数的详细释义可以参考Swiper API 文档。
拓展:
该轮播组件不只是可以放置顶文章,还可以放些其它功能页面,甚至站外链接也行。
若你的有一定前端能力,还可以进一步更改源码做到在文章front-matter
里添加参数,即可将其显示在首页置顶文章轮播组件中。
侧边 Sticky 组件随页面上下滚动而微移的 Bug
前提:贵站的导航栏已经魔改成固定 fixed 样式。细心的友友应该能发现,看文章时,随着滚轮上下移动,侧边目录组件有 50px 的上下移动距离,其实这不算是 Bug,Jerry 这么写只是为了右侧组件配合导航栏移动而移动。所以现在咋们魔改党要固定它!
-
修改<BlogRoot>\themes\butterfly\source\css\_layout\head.styl
,在 178 行左右
-
修改<BlogRoot>\themes\butterfly\source\css\_layout\aside.styl
,在 106 行左右
-
Hexo 三连即可看到效果
光标框选文字颜色
-
在<Custom>.css
里添加以下代码
如果想跟随深浅模式更改颜色,则继续添加如下代码:
-
修改<BlogRoot>\themes\butterfly\source\css\_global\index.styl
,在第 195 行左右,将其注释或删除
侧边小组件——土味情话
Butterfly 主题侧边小组件——土味情话
结束语:
若是有疑问或更好的解决方法欢迎留言。若想 get 本篇未记录的同款,请先查看更新手账,手账记录了本站 2021-01-23 以来几乎所有美化魔改微调的更新历史,且参考过他人的更新都附带有教程链接。若更新手账未记录,那么请自行F12