Butterfly博客主题搭建系列:美化魔改教程
简介
看到群里大佬优化的页面后终于还是忍不住了,在借鉴大佬的代码上我加了些许改进以更适合我的博客。
总体来说这篇文章是在Butterfly的基础对页面的一些优化,因为涉及到修改源码,所以记录一下修改过程,以免升级主题时产生冲突。
推荐一个魔改教程:Butterfly主题美化教程,里面有大佬们的魔改教学,帮助你取百家之所长,做出好看的博客。PS:主要是我的文章也收录进去了🥰
添加loading动画
修改样式
themes/butterfly/source/css/_layout/loading.styl
替换为以下代码:
1 | if hexo-config('preloader') |
修改结构
themes/butterfly/layout/includes/loading/loading.pug
替换为以下代码:
1 | #loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")') |
添加自定义 css
在合适的地方加上自定义 css,url换成自己的头像即可:
1 | .loading-img { |
添加顶部加载条
原文:为你的Butterfly添加顶部加载进度条 | Xlenco
添加自定义 css
1 | .pace { |
引入 JS
可在配置文件_config.butterfly.yml
的head
添加:
1 | inject: |
魔改导航栏样式
原文:关于Butterfly的导航栏的一些教程 Ariasakaの小窝
分离搜索栏与菜单栏
修改[blogRoot]\themes\Butterfly\layout\includes\header\nav.pug
:
1 | nav#nav |
导航栏居中
自定义css:
1 | #nav-right{ |
去掉导航栏项目底下的蓝色长条
1 | #nav *::after{ |
子菜单横向布局
1 | .menus_item_child li:not(#sidebar-menus li){ |
网站标题部分的增强版
1 | #site-name::before{ |
顶栏常驻
1 | .nav-fixed #nav{ |
显示标题
修改[blogRoot]\themes\Butterfly\layout\includes\header\nav.pug
:
1 | nav#nav |
然后添加nav.js
,并且按照注释修改配置:
1 | //js有一个小问题:就是只要鼠标滚动不论哪里都会响应,即便你滚动的是子元素 |
最后添加如下css,按照注释修改参数:
1 | #page-name::before{ |
展示首页文章分类
冰老师的方案一:
原文:教程:hexo-magnet 插件 1.0 | 小冰博客
冰老师的方案二:
原文:Categories Magnet | Akilarの糖果屋
npm安装
1 | npm install hexo-butterfly-categories-card --save |
在站点配置文件_config.yml
配置:
1 | # 文章分类磁贴 |
注意图片更换为自己的图片链接
魔改文章分类
参考原文:
Butterfly魔改:动态分类条,可以根据页面变化而改变的分类列表展示方式 | 张洪Heo
Hexo博客 | 动态分类标签条,自动获取全站分类与标签进行展示 | Justlovesmile’s BLOG
新建PUG文件
首先是分类条,在themes/butterfly/layout/includes/
处新建文件categoryBar.pug
:
1 | #category-bar |
其次是标签条,在themes/butterfly/layout/includes/
处新建文件tagBar.pug
,因为样式一样,所以没有更改id和class名称:
1 | #category-bar |
新建Hexo辅助函数
在theme/butterfly/scripts/helpers/
中创建get_arrays.js
:
1 | hexo.extend.helper.register('getarray_bar', function (types) { |
引用模块
在分类页面引用:找到theme/butterfly/layout/category.pug
:
1 | extends includes/layout.pug |
在标签页引用:找到theme/butterfly/layout/tag.pug
:
1 | extends includes/layout.pug |
引入js和css文件
引入js:
1 | //分类条 |
引入css:
1 |
|
记录一次因为pjax导致js无法生效以及解决方案 | aqcoder
添加文章置顶
原主题置顶方案:
设置方法参考Butterfly博客主题搭建系列:基础教程 | aqcoder
这种方法会有一个缺陷:当置顶文章过多导致一页都置顶文章,观感不好,可参考:教程:hexo-swiper 文章置顶插件 | 小冰博客
完成效果预览:
npm安装插件
1 | npm install hexo-butterfly-swiper --save |
在网站根目录_config.yml
新增配置项:
1 | # hexo-butterfly-swiper |
参数 | 备选值/类型 | 释义 |
---|---|---|
priority | number | 【可选】过滤器优先级,数值越小,执行越早,默认为10,选填 |
enable | true/false | 【必选】控制开关 |
enable_page | path/all | 【可选】填写想要应用的页面的相对路径(即路由地址),如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面,就填’all’,默认为all |
timemode | date/updated | 【可选】时间显示,date为显示创建日期,updated为显示更新日期,默认为date |
layout.type | id/class | 【可选】挂载容器类型,填写id或class,不填则默认为id |
layout.name | text | 【必选】挂载容器名称 |
layout.index | 0和正整数 | 【可选】前提是layout.type为class,因为同一页面可能有多个class,此项用来确认究竟排在第几个顺位 |
default_descr | text | 默认文章描述 |
swiper_css | url | 【可选】自定义的swiper依赖项css链接 |
swiper_js | url | 【可选】自定义的swiper依赖项加js链接 |
custom_css | url | 【可选】适配主题样式补丁 |
custom_js | url | 【可选】swiper初始化方法 |
使用方法
在文章的front_matter
中添加swiper_index
配置项即可。
1 | --- |
文章双栏
原文:教程:butterfly 主题文章双栏布局插件 | 小冰博客
npm安装
1 | npm i hexo-butterfly-article-double-row --save |
新增网站根目录_config.yml
配置项:
1 | butterfly_article_double_row: |
魔改分类页面
原文:hexo博客butterfly主题美化css大礼包 | space of Lee !
自定义css:
1 |
|
魔改标签页面
修改butterfly\scripts\helpers\page.js
文件:
如果你只是想添加一个数量的话,在第52行的${tag.name}
后增加 (${tag.length})
,如下:
1 | result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name} (${tag.length})</a>` |
如果你不想要字体有大有小的话,可以采用css + !important
的方法,也可以选择删除如下代码:
1 | // 需要删除的 |
如果你还想再给标签从大到小排个序的话,那么就是我正在使用的这个了:
1 | hexo.extend.helper.register('cloudTags', function(options = {}) { |
修改样式
1 |
|
魔改友链页面
友链创建教程:Butterfly 安裝文檔(二) 主題頁面 | Butterfly
修改源码
在HexoRoot/source
新建_data
文件夹,新建link.yml
,格式类似以下代码:
1 | - class_name: 友情链接 |
修改butterfly\layout\includes\page\flink.pug
:
1 | if site.data.link |
修改butterfly\layout\includes\page\flink.pug
的第54行,使用flink_url
的修改第24行:
1 | # 使用flink_url,修改的代码第24行 |
添加自定义css
在HexoRoot/source
新建css
文件夹,新建links.css
:
1 | /* 头像微调 */ |
在_config.butterfly.yml
引入css
:
1 | inject: |
添加侧边栏访问统计
重点
在md
文件中添加以下代码:
1 | ## 博客统计 |
这里我修改了部分代码以适配我的博客
添加侧边栏统计
除此之外,根据大佬记录的代码,我增加了侧边栏统计的样式
自定义侧边栏可参考官方文档:https://butterfly.js.org/posts/ea33ab97/
步骤如下:
1、新建博客根目录/source/_data/widget.yml
,添加代码:
1 | bottom: |
2、新建博客根目录/source/js/visitor.js
,添加代码:
1 | // 侧边栏访问统计 |
KRFNvLFZwSFuA2NM
改为自己的,获取方式可参照:Butterfly 博客搭建(进阶教程)
3、新建博客根目录/source/css/visitor.css
,添加代码:
1 | /* 关于页面访问统计、访客信息样式 */ |
添加文章统计图
重点
在 [Blogroot]\themes\butterfly\scripts\helpers\
目录下新建 charts.js
文件,然后添加以下内容:
1 | const cheerio = require('cheerio') |
在.md文件
使用:
1 | <script src="https://npm.elemecdn.com/echarts@4.9.0/dist/echarts.min.js"></script> |
为了适配我的长标签,我在在标签统计图
中添加了以下代码:
1 | formatter: function(value){ |
效果如图:
魔改Twikoo样式
魔改信息栏
点击评论系统的输入框会出现提示:
css代码:
1 | /* Twikoo评论系统样式 */ |
魔改评论区
css代码:
1 | /* 声名部分变量 */ |
魔改页脚
原文:Butterfly 主题页脚美化 | Jayhrn - 分享科技与热爱生活
修改 themes/butterfly/layout/includes/footer.pug
文件,直接替换内容:
1 | #footer_deal |
图标需要自己修改,引入第三方图标库还请查阅官方文档:Butterfly 安裝文檔(六) 進階教程 | Butterfly