Hexo博客搭建（7）——魔改主题文件（提高）
搜索
Algolia
记得运行
hexo clean如果你使用
hexo-algoliasearch，请记得配置fields参数的title, permalink 和 content你需要安装
hexo-algolia或hexo-algoliasearch. 根据它们的説明文档去做相应的配置。
修改 主题配置文件
1 | algolia_search: |
本地搜索
你需要安装 hexo-generator-searchdb 或者 hexo-generator-search，根据它的文档去做相应配置
1 | # Local search |
评论
从3.0.0开始，开启评论需要在comments-use中填写你需要的评论。
支持双评论显示，只需要配置两个评论（第一个为默认显示）
1 | comments: |
我这里刚开始配置的是Valine，后来因为加评论功能备案不好过就给删了。
遵循 Valine的指示去配置你的 LeanCloud 应用。以及查看相应的配置説明。
开启 visitor 后，文章页的访问人数将改为 Valine 提供，而不是 不蒜子
Valine于 v1.4.5 开始支持自定义表情，如果你需要自行配置，请在emojiCDN配置表情 CDN。
同时在Hexo 工作目录下的source/_data/创建一个json文件valine.json,等同于 Valine 需要配置的emojiMaps
再次开启评论
由于valine已经落后了，所以这回又新开了一个评论功能，采用twikoo评论功能。安装详见butterfly配置twikoo评论系统
挂载Akismet 反垃圾评论，按要求注册即可。
美化/特效
自定义主题色
可以修改大部分UI颜色
颜色值必须被双引号包裹，就像”#000”而不是#000。否则将会在构建的时候报错！
1 | theme_color: |
主页top_img显示大小
默认的显示为全屏。site-info的区域会居中显示
1 | # 主页设置 |
网站背景
默认显示白色，可设置图片或者颜色
1 | # 图片格式 url(http://xxxxxx.com/xxx.jpg) |
留意: 如果你的网站根目录不是’/‘,使用本地图片时，需加上你的根目录。
例如：网站是 https://yoursite.com/blog,引用一张img/xx.png图片，则设置background为 `url(/blog/img/xx.png)
打字效果
打字效果activate-power-mode
1 | # Typewriter Effect (打字效果) |
背景特效
静止彩带
1 | canvas_ribbon: |
动态彩带
1 | canvas_fluttering_ribbon: |
光点
1 | canvas_nest: |
鼠标点击效果
烟花
zIndex建议只在-1和9999上选-1 代表烟火效果在底部9999 代表烟火效果在前面
1 | fireworks: |
字数统计
要为Butterfly配上字数统计特性, 你需要如下几个步骤:
打开 hexo 工作目录
1 | npm install hexo-wordcount --save or yarn add hexo-wordcount |
修改 主题配置文件:
1 | wordcount: |
Live2D教程-看板娘
目前只推荐这个(因为消耗资源较少)，这是博客自带的看板娘，这孩子不会说话也不能换装，只会跟着你的鼠标晃动脑袋，不过有几款超可爱。
安装
在Hexo根目录
[BlogRoot]下打开终端，输入以下指令安装必要插件：1
npm install --save hexo-helper-live2d
打开站点配置文件
[BlogRoot]\config.yml
搜索live2d,按照如下注释内容指示进行操作。
如果没有搜到live2d的配置项，就直接把以下内容复制到最底部。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
enable: true #开关插件版看板娘
scriptFrom: local # 默认
pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
pluginModelPath: assets/ # 模型文件相对与插件根目录路径
# scriptFrom: jsdelivr # jsdelivr CDN
# scriptFrom: unpkg # unpkg CDN
# scriptFrom: https://npm.elemecdn.com/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
debug: false # 调试, 是否在控制台输出日志
model:
use: live2d-widget-model-wanko # npm-module package name
# use: wanko # 博客根目录/live2d_models/ 下的目录名
# use: ./wives/wanko # 相对于博客根目录的路径
# use: https://npm.elemecdn.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
display:
position: right #控制看板娘位置
width: 150 #控制看板娘大小
height: 300 #控制看板娘大小
mobile:
show: true # 手机中是否展示完成后保存修改，在Hexo根目录下运行指令。
1
2
3hexo clean
hexo g
hexo s之所以必须要使用
hexo clean是因为我们需要清空缓存重新生成静态页面，不然看板娘没被加入生成的静态页面里，是不会出现的。
更换
同样是在Hexo根目录
[BlogRoot]下，打开终端，选择想要的看板娘进行安装，例如我这里用到的是live2d-widget-model-koharu，一个Q版小正太。其他的模型也可以在模型预览里查看以供选择。输入指令
1
npm install --save live2d-widget-model-koharu
然后在站点配置文件
[BlogRoot]\_config.yml里找到model项修改为期望的模型1
2
3model:
use: live2d-widget-model-koharu
# 默认为live2d-widget-model-wanko之后按部就班的运行
1
2
3hexo clean
hexo g
hexo s就能在
localhost:4000上查看效果了。
卸载看板娘
卸载插件和卸载模型的指令都是通过npm进行操作的。在博客根目录[BlogRoot]打开终端，输入：
1 | npm uninstall hexo-helper-live2d #卸载看板娘插件 |
卸载后为了保证配置项不出错，记得把[BlogRoot]\_config.yml里的配置项给注释或者删除掉。
一图流教程
在
[BlogRoot]\source文件夹下新建一个文件夹css，该文件夹用于存放自定义的css样式，再新建一个名为custom.css，在里面写入以下代码：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23/* 页脚与头图透明 */
#footer {
background: transparent ;
}
#page-header {
background: transparent ;
}
/* 白天模式遮罩透明 */
#footer::before {
background: transparent ;
}
#page-header::before {
background: transparent ;
}
/* 夜间模式遮罩透明 */
[data-theme="dark"] #footer::before {
background: transparent ;
}
[data-theme="dark"] #page-header::before {
background: transparent ;
}在主题配置文件
[BlogRoot]\_config.butterfly.yml文件中的inject配置项的head子项加入以下代码，代表引入刚刚创建的custom.css文件（这是相对路径的写法）1
2
3inject:
head:
- <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">在主题配置文件
[BlogRoot]\_config.butterfly.yml文件中的index_img和footer_bg配置项取消头图与页脚图的加载项避免冗余加载1
2
3
4
5# The banner image of home page
index_img:
# Footer Background
footer_bg: false部分人反映一图流改完了背景图也没了，那大概率是你之前没设置背景图。在主题配置文件
[BlogRoot]\_config.butterfly.yml文件中的background配置项设置背景图1
background: url(https://source.fomal.cc/img/home_bg.webp)
黑夜霓虹灯1.0（js计时器实现）
此教程会有两处地方有霓虹灯效果：一个是大标题和个人信息的动态霓虹灯，默认周期为1200ms；另外的是菜单栏的小字有夜光效果，为你的博客增添几分赛博朋克风~
首先在自定义的样式文件
[BlogRoot]\source\css\custom.css中引入以下代码，变量部分var(--theme-color)可以换为自己喜欢的颜色，例如紫色rgb(179, 71, 241)，后面的颜色连续渐变效果根据个人喜好选择，有的人喜欢连续的，有的人喜欢断续的1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20/* 夜间模式菜单栏发光字 */
[data-theme="dark"] #nav .site-page,
[data-theme="dark"] #nav .menus_items .menus_item .menus_item_child li a {
text-shadow: 0 0 2px var(--theme-color) ;
}
/* 手机端适配 */
[data-theme="dark"] #sidebar #sidebar-menus .menus_items .site-page {
text-shadow: 0 0 2px var(--theme-color) ;
}
/* 闪烁变动颜色连续渐变 */
#site-name,
#site-title,
#site-subtitle,
#post-info,
.author-info__name,
.author-info__description {
transition: text-shadow 1s linear ;
}新建文件
[BlogRoot]\source\js\light.js并写入以下代码，本质就是计时器，大家可以根据自己的喜好调节闪烁周期，默认为1200ms：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49// 霓虹灯效果
// 颜色数组
var arr = ["#39c5bb", "#f14747", "#f1a247", "#f1ee47", "#b347f1", "#1edbff", "#ed709b", "#5636ed"];
// 颜色索引
var idx = 0;
// 切换颜色
function changeColor() {
// 仅夜间模式才启用
if (document.getElementsByTagName('html')[0].getAttribute('data-theme') == 'dark') {
if (document.getElementById("site-name"))
document.getElementById("site-name").style.textShadow = arr[idx] + " 0 0 15px";
if (document.getElementById("site-title"))
document.getElementById("site-title").style.textShadow = arr[idx] + " 0 0 15px";
if (document.getElementById("site-subtitle"))
document.getElementById("site-subtitle").style.textShadow = arr[idx] + " 0 0 10px";
if (document.getElementById("post-info"))
document.getElementById("post-info").style.textShadow = arr[idx] + " 0 0 5px";
try {
document.getElementsByClassName("author-info__name")[0].style.textShadow = arr[idx] + " 0 0 12px";
document.getElementsByClassName("author-info__description")[0].style.textShadow = arr[idx] + " 0 0 12px";
} catch {
}
idx++;
if (idx == 8) {
idx = 0;
}
} else {
// 白天模式恢复默认
if (document.getElementById("site-name"))
document.getElementById("site-name").style.textShadow = "#1e1e1ee0 1px 1px 1px";
if (document.getElementById("site-title"))
document.getElementById("site-title").style.textShadow = "#1e1e1ee0 1px 1px 1px";
if (document.getElementById("site-subtitle"))
document.getElementById("site-subtitle").style.textShadow = "#1e1e1ee0 1px 1px 1px";
if (document.getElementById("post-info"))
document.getElementById("post-info").style.textShadow = "#1e1e1ee0 1px 1px 1px";
try {
document.getElementsByClassName("author-info__name")[0].style.textShadow = "";
document.getElementsByClassName("author-info__description")[0].style.textShadow = "";
} catch {
}
}
}
// 开启计时器
window.onload = setInterval(changeColor, 1200);在主题配置文件
_config.butterfly.yml引入以上两个文件，要注意的是，js文件这里必须为defer，不能为ansyc，保证脚本会延迟到整个页面都解析完后再执行，此时才有对应的元素进行操作：1
2
3
4
5inject:
head:
- <link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'">
bottom:
- <script defer src="/js/light.js"></script> # 霓虹灯(必须defer否则有时候会不生效)重启项目即可看到效果
1
hexo cl; hexo s
星空背景和流星特效
在
[BlogRoot]/source/js目录下新建universe.js，输入以下代码：1
2function dark() {window.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;var n,e,i,h,t=.05,s=document.getElementById("universe"),o=!0,a="180,184,240",r="226,225,142",d="226,225,224",c=[];function f(){n=window.innerWidth,e=window.innerHeight,i=.216*n,s.setAttribute("width",n),s.setAttribute("height",e)}function u(){h.clearRect(0,0,n,e);for(var t=c.length,i=0;i<t;i++){var s=c[i];s.move(),s.fadeIn(),s.fadeOut(),s.draw()}}function y(){this.reset=function(){this.giant=m(3),this.comet=!this.giant&&!o&&m(10),this.x=l(0,n-10),this.y=l(0,e),this.r=l(1.1,2.6),this.dx=l(t,6*t)+(this.comet+1-1)*t*l(50,120)+2*t,this.dy=-l(t,6*t)-(this.comet+1-1)*t*l(50,120),this.fadingOut=null,this.fadingIn=!0,this.opacity=0,this.opacityTresh=l(.2,1-.4*(this.comet+1-1)),this.do=l(5e-4,.002)+.001*(this.comet+1-1)},this.fadeIn=function(){this.fadingIn&&(this.fadingIn=!(this.opacity>this.opacityTresh),this.opacity+=this.do)},this.fadeOut=function(){this.fadingOut&&(this.fadingOut=!(this.opacity<0),this.opacity-=this.do/2,(this.x>n||this.y<0)&&(this.fadingOut=!1,this.reset()))},this.draw=function(){if(h.beginPath(),this.giant)h.fillStyle="rgba("+a+","+this.opacity+")",h.arc(this.x,this.y,2,0,2*Math.PI,!1);else if(this.comet){h.fillStyle="rgba("+d+","+this.opacity+")",h.arc(this.x,this.y,1.5,0,2*Math.PI,!1);for(var t=0;t<30;t++)h.fillStyle="rgba("+d+","+(this.opacity-this.opacity/20*t)+")",h.rect(this.x-this.dx/4*t,this.y-this.dy/4*t-2,2,2),h.fill()}else h.fillStyle="rgba("+r+","+this.opacity+")",h.rect(this.x,this.y,this.r,this.r);h.closePath(),h.fill()},this.move=function(){this.x+=this.dx,this.y+=this.dy,!1===this.fadingOut&&this.reset(),(this.x>n-n/4||this.y<0)&&(this.fadingOut=!0)},setTimeout(function(){o=!1},50)}function m(t){return Math.floor(1e3*Math.random())+1<10*t}function l(t,i){return Math.random()*(i-t)+t}f(),window.addEventListener("resize",f,!1),function(){h=s.getContext("2d");for(var t=0;t<i;t++)c[t]=new y,c[t].reset();u()}(),function t(){document.getElementsByTagName('html')[0].getAttribute('data-theme')=='dark'&&u(),window.requestAnimationFrame(t)}()};
dark()在
[BlogRoot]/source/css目录下新建universe.css，输入以下代码：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16/* 背景宇宙星光 */
#universe{
display: block;
position: fixed;
margin: 0;
padding: 0;
border: 0;
outline: 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
/* 这个是调置顶的优先级的，-1在文章页下面，背景上面，个人推荐这种 */
z-index: -1;
}在主题配置文件
_config.butterfly.yml的inject配置项中bottom下填入：1
2
3
4inject:
bottom:
- <canvas id="universe"></canvas>
- <script defer src="/js/universe.js"></script>在主题配置文件
_config.butterfly.yml的inject配置项中head下填入：1
2
3inject:
head:
- <link rel="stylesheet" href="/css/universe.css">重新编译即可看到效果。
侧边栏电子时钟(安知鱼)
安装
如果有安装店长的插件版侧边栏电子钟（与店长的电子钟冲突），在博客根目录
[BlogRoot]下打开终端，运行以下指令1
2# 卸载原版电子钟
npm uninstall hexo-butterfly-clock安装插件,在博客根目录
[BlogRoot]下打开终端，运行以下指令：1
npm install hexo-butterfly-clock-anzhiyu --save
添加配置信息，以下为写法示例
在主题配置文件_config.butterfly.yml（注意一定要主题配置文件）中添加：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21# electric_clock (安知鱼电子钟)
# see https://anzhiy.cn/posts/fc18.html
electric_clock:
enable: true # 开关
priority: 5 #过滤器优先权
enable_page: / # 应用页面
exclude:
# - /posts/
# - /about/
layout: # 挂载容器类型
type: class
name: sticky_layout
index: 0
loading: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/loading.gif #加载动画自定义
clock_css: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.css
clock_js: https://cdn.cbd.int/hexo-butterfly-clock-anzhiyu/lib/clock.min.js
ip_api: https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0
qweather_key: # 和风天气key
gaud_map_key: # 高得地图web服务key
default_rectangle: false # 开启后将一直显示rectangle位置的天气，否则将获取访问者的地理位置与天气
rectangle: 113.34532,23.15624 # 获取访问者位置失败时会显示该位置的天气，同时该位置为开启default_rectangle后的位置其中qweather_key 和gaud_map_key 最好自己去申请对应的 api key，默认使用
鱼的，可能会被限制，不保证可靠性。参数释义
| 参数 | 备选值/类型 | 释义 |
|---|---|---|
| priority | number | 【可选】过滤器优先级，数值越小，执行越早，默认为 10，选填 |
| enable | true/false | 【必选】控制开关 |
| enable_page | path/all | 【可选】填写想要应用的页面的相对路径（即路由地址）,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面，就填’all’，默认为 all |
| exclude | path | 【可选】填写想要屏蔽的页面，可以多个。写法见示例。原理是将屏蔽项的内容逐个放到当前路径去匹配，若当前路径包含任一屏蔽项，则不会挂载。 |
| layout.type | id/class | 【可选】挂载容器类型，填写 id 或 class，不填则默认为 id |
| layout.name | text | 【必选】挂载容器名称 |
| layout.index | 0和正整数 | 【可选】前提是 layout.type 为 class，因为同一页面可能有多个 class，此项用来确认究竟排在第几个顺位 |
| loading | URL | 【可选】电子钟加载动画的图片 |
| clock_css | URL | 【可选】电子钟样式 CDN 资源 |
| clock_js | URL | 【可选】电子钟执行脚本 CDN 资源 |
| ip_api | URL | 【可选】获取时钟 IP 的 API |
| qweather_key | text | 【可选】和风天气 key |
| gaud_map_key | text | 【可选】高得地图 web 服务 key |
| default_rectangle | text | 【可选】开启后将一直显示 rectangle 位置的天气，否则将获取访问者的地理位置与天气 |
| rectangle | text | 【可选】获取访问者位置失败时会显示该位置的天气，同时该位置为开启 default_rectangle 后的位置 |
个人卡片渐变色
在[BlogRoot]\source\css\custom.css自定义样式的文件中引入如下代码（最后记得在inject配置项引入!!!）：
1 | /* 侧边栏个人信息卡片动态渐变色 */ |
直达底部按钮
在[BlogRoot]\themes\butterfly\layout\includes\rightside.pug做以下修改:
1 | button#go-up(type="button" title=_p("rightside.back_to_top")) |
文章H1~H6标题小风车转动效果
修改主题配置文件
_config.butterfly.yml文件的beautify配置项：1
2
3
4
5
6beautify:
enable: true
field: post # site/post
# title-prefix-icon: '\f0c1' 原内容
title-prefix-icon: '\f863'
title-prefix-icon-color: "#F47466"在
[BlogRoot]\source\css\custom.css中加入以下代码，可以自己调节一下转速:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88/* 文章页H1-H6图标样式效果 */
/* 控制风车转动速度 4s那里可以自己调节快慢 */
h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
-webkit-animation: ccc 4s linear infinite;
animation: ccc 4s linear infinite;
}
/* 控制风车转动方向 -1turn 为逆时针转动，1turn 为顺时针转动，相同数字部分记得统一修改 */
@-webkit-keyframes ccc {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-1turn);
transform: rotate(-1turn);
}
}
@keyframes ccc {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-1turn);
transform: rotate(-1turn);
}
}
/* 设置风车颜色 */
#content-inner.layout h1::before {
color: #ef50a8;
margin-left: -1.55rem;
font-size: 1.3rem;
margin-top: -0.23rem;
}
#content-inner.layout h2::before {
color: #fb7061;
margin-left: -1.35rem;
font-size: 1.1rem;
margin-top: -0.12rem;
}
#content-inner.layout h3::before {
color: #ffbf00;
margin-left: -1.22rem;
font-size: 0.95rem;
margin-top: -0.09rem;
}
#content-inner.layout h4::before {
color: #a9e000;
margin-left: -1.05rem;
font-size: 0.8rem;
margin-top: -0.09rem;
}
#content-inner.layout h5::before {
color: #57c850;
margin-left: -0.9rem;
font-size: 0.7rem;
margin-top: 0rem;
}
#content-inner.layout h6::before {
color: #5ec1e0;
margin-left: -0.9rem;
font-size: 0.66rem;
margin-top: 0rem;
}
/* s设置风车hover动效 6s那里可以自己调节快慢*/
#content-inner.layout h1:hover,
#content-inner.layout h2:hover,
#content-inner.layout h3:hover,
#content-inner.layout h4:hover,
#content-inner.layout h5:hover,
#content-inner.layout h6:hover {
color: var(--theme-color);
}
#content-inner.layout h1:hover::before,
#content-inner.layout h2:hover::before,
#content-inner.layout h3:hover::before,
#content-inner.layout h4:hover::before,
#content-inner.layout h5:hover::before,
#content-inner.layout h6:hover::before {
color: var(--theme-color);
-webkit-animation: ccc 6s linear infinite;
animation: ccc 6s linear infinite;
}在主题配置文件
_config.butterfly.yml的inject配置项进行引入（不再赘述）。
三栏布局首页卡片
修改
[Blogroot]\themes\butterfly\layout\includes\mixins\post-ui.pug,整个替换为下面的代码：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135mixin postUI(posts)
each article , index in page.posts.data
.recent-post-item
-
let link = article.link || article.path
let title = article.title || _p('no_title')
const position = theme.cover.position
let leftOrRight = position === 'both'
? index%2 == 0 ? 'left' : 'right'
: position === 'left' ? 'left' : 'right'
let post_cover = article.cover
let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
-
.recent-post-content(class=leftOrRight)
.recent-post-cover-shadow
.recent-post-cover
img.article-cover(src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` alt=title)
.recent-post-info
a.article-title(href=url_for(link) title=title)
.article-title-link= title
.recent-post-meta
.article-meta-wrap
if (is_home() && (article.top || article.sticky > 0))
span.article-meta
i.fas.fa-thumbtack.sticky
span.sticky= _p('sticky')
span.article-meta-separator |
if (theme.post_meta.page.date_type)
span.post-meta-date
if (theme.post_meta.page.date_type === 'both')
i.far.fa-calendar-alt
span.article-meta-label=_p('post.created')
time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date))=date(article.date, config.date_format)
span.article-meta-separator |
i.fas.fa-history
span.article-meta-label=_p('post.updated')
time.post-meta-date-updated(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated))=date(article.updated, config.date_format)
else
- let data_type_updated = theme.post_meta.page.date_type === 'updated'
- let date_type = data_type_updated ? 'updated' : 'date'
- let date_icon = data_type_updated ? 'fas fa-history' :'far fa-calendar-alt'
- let date_title = data_type_updated ? _p('post.updated') : _p('post.created')
i(class=date_icon)
span.article-meta-label=date_title
time(datetime=date_xml(article[date_type]) title=date_title + ' ' + full_date(article[date_type]))=date(article[date_type], config.date_format)
if (theme.post_meta.page.categories && article.categories.data.length > 0)
span.article-meta
span.article-meta-separator |
i.fas.fa-inbox
each item, index in article.categories.data
a(href=url_for(item.path)).article-meta__categories #[=item.name]
if (index < article.categories.data.length - 1)
i.fas.fa-angle-right.article-meta-link
if (theme.post_meta.page.tags && article.tags.data.length > 0)
span.article-meta.tags
span.article-meta-separator |
i.fas.fa-tag
each item, index in article.tags.data
a(href=url_for(item.path)).article-meta__tags #[=item.name]
if (index < article.tags.data.length - 1)
span.article-meta-link #[='•']
mixin countBlockInIndex
- needLoadCountJs = true
span.article-meta
span.article-meta-separator |
i.fas.fa-comments
if block
block
span.article-meta-label= ' ' + _p('card_post_count')
if theme.comments.card_post_count
case theme.comments.use[0]
when 'Disqus'
+countBlockInIndex
a(href=full_url_for(link) + '#disqus_thread')
i.fa-solid.fa-spinner.fa-spin
when 'Disqusjs'
+countBlockInIndex
a(href=full_url_for(link) + '#disqusjs')
span.disqus-comment-count(data-disqus-url=full_url_for(link))
i.fa-solid.fa-spinner.fa-spin
when 'Valine'
+countBlockInIndex
a(href=url_for(link) + '#post-comment')
span.valine-comment-count(data-xid=url_for(link))
i.fa-solid.fa-spinner.fa-spin
when 'Waline'
+countBlockInIndex
a(href=url_for(link) + '#post-comment')
span.waline-comment-count(id=url_for(link))
i.fa-solid.fa-spinner.fa-spin
when 'Twikoo'
+countBlockInIndex
a.twikoo-count(href=url_for(link) + '#post-comment')
i.fa-solid.fa-spinner.fa-spin
when 'Facebook Comments'
+countBlockInIndex
a(href=url_for(link) + '#post-comment')
span.fb-comments-count(data-href=urlNoIndex(article.permalink))
when 'Remark42'
+countBlockInIndex
a(href=url_for(link) + '#post-comment')
span.remark42__counter(data-url=urlNoIndex(article.permalink))
i.fa-solid.fa-spinner.fa-spin
when 'Artalk'
+countBlockInIndex
a(href=url_for(link) + '#post-comment')
span.artalk-count(data-page-key=url_for(link))
i.fa-solid.fa-spinner.fa-spin
a.article-content(href=url_for(link) title=title)
//- Display the article introduction on homepage
case theme.index_post_content.method
when false
- break
when 1
.article-content-text!= article.description
when 2
if article.description
.article-content-text!= article.description
else
- const content = strip_html(article.content)
- let expert = content.substring(0, theme.index_post_content.length)
- content.length > theme.index_post_content.length ? expert += ' ...' : ''
.article-content-text!= expert
default
- const content = strip_html(article.content)
- let expert = content.substring(0, theme.index_post_content.length)
- content.length > theme.index_post_content.length ? expert += ' ...' : ''
.article-content-text!= expert
.recent-post-arrow
if theme.ad && theme.ad.index
if (index + 1) % 3 == 0
.recent-post-item.ads-wrap!=theme.ad.index样式方案：移除滑动卡片，按屏幕宽度依次应用三栏、双栏、单栏。
新建目录
[Blogroot]\themes\butterfly\source\css\_index_card_style\,并在下面新建对应的文件。新建
[Blogroot]\themes\butterfly\source\css\_index_card_style\multicard.styl,填入以下内容。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174//default color:
:root
--recent-post-bgcolor: rgba(200, 200, 200, 0.5) //默认背景
--article-content-bgcolor: #49b1f5 //描述版块背景
--recent-post-arrow: #ffffff //箭头配色
--recent-post-cover-shadow: #ffffff //封面遮罩层配色，建议和默认值的颜色相对应。
--recent-post-transition: all 0.5s cubic-bezier(0.59, 0.01, 0.48, 1.17) //动画效果。不了解的不要改动
[data-theme="dark"]
--recent-post-bgcolor: rgba(35,35,35,0.5)
--article-content-bgcolor: #99999a
--recent-post-arrow: #37e2dd
--recent-post-cover-shadow: #232323
// 默认的首页卡片容器布局
.recent-posts
padding 0 15px 0 15px
height fit-content
.recent-post-item
margin-bottom 15px
background var(--recent-post-bgcolor)
overflow hidden
border-radius 15px
.recent-post-content
display flex
background var(--recent-post-bgcolor)
position relative
.recent-post-cover
display flex
background transparent
.recent-post-info
display flex
background transparent
flex-direction column
justify-content center
align-items center
.article-title
height 50%
display: flex
text-align: center
align-items: center
justify-content: flex-end
flex-direction: column
.article-title-link
color: var(--text-highlight-color)
transition: all .2s ease-in-out
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
&:hover
color: $text-hover
.recent-post-meta
height 50%
display: flex
text-align: center
align-items: center
justify-content: flex-start
flex-direction: column
.article-meta-wrap
color #969797
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
a
color: var(--text-highlight-color)
transition: all .2s ease-in-out
color #969797
&:hover
color: $text-hover
.article-content
display flex
text-align: center
flex-direction row
align-items center
justify-content center
.article-content-text
display -webkit-box
-webkit-box-orient vertical
text-overflow: ellipsis
overflow hidden
color #fff
text-shadow 1px 2px 3px #000
&.ads-wrap
display: block
height: auto
nav#pagination
width: 100%
// 卡片单元布局样式
.recent-posts
padding 0 15px 0 15px
display flex
flex-direction row
flex-wrap wrap
.recent-post-item
border-radius 15px
overflow hidden
.recent-post-content
flex-direction column
flex-wrap nowrap
align-items center
max-height 350px
height: auto
width 100%
.recent-post-cover
width 100%
height 200px
clip-path polygon(0 130px,0 0,100% 0,100% 130px,50% 100%)
img
height 200px
width 100%
object-fit cover
.recent-post-info
height 150px
width 100%
padding 0px 25px 5px 25px
.article-title
margin: 0px 40px
font-size 18px
.article-title-link
-webkit-line-clamp: 2;
.recent-post-meta
margin: 0px 20px
.article-meta-wrap
font-size 12px
-webkit-line-clamp: 3;
.article-content
position absolute
height 200px
width 100%
background rgba(25,25,25,0.5)
clip-path polygon(0 130px,0 0,100% 0,100% 130px,50% 100%)
.article-content-text
-webkit-line-clamp 3
font-size 16px
margin 0px 25px 30px 25px
&::before
content "❝"
font-size 20px
&::after
content "❞"
font-size 20px
.recent-post-arrow
display block
background var(--article-content-bgcolor)
position absolute
height 10px
width 20px
clip-path polygon(0 0,100% 0,50% 100%)
top 20px
// 三栏布局滑动卡片样式
@media screen and (min-width:1069px)
.recent-posts
.recent-post-item
width 32.3%
margin 0px 1% 20px 0px
.recent-post-content
.recent-post-info
.article-title
margin: 0px 5px
.article-title-link
-webkit-line-clamp: 1;
.recent-post-meta
margin: 0px 5px
.article-meta-wrap
-webkit-line-clamp: 2;
// 双栏布局卡片自适应适配
@media screen and (min-width:572px) and (max-width:1068px)
.recent-posts
.recent-post-item
width 47%
margin 0px 3% 20px 0px
// 单栏布局卡片自适应适配
@media screen and (max-width:572px)
.recent-posts
.recent-post-item
width 100%修改
[BlogRoot]\themes\butterfly\source\css\_page\homepage.styl,将整文件内容替换为以下代码：1
2
3
4if hexo-config('index_card_style') == 'slidecard'
@import './_index_card_style/slidecard'
else if hexo-config('index_card_style') == 'multicard'
@import './_index_card_style/multicard'然后在主题配置文件
[BlogRoot]\_config.butterfly.yml里新增配置项，这样我们就可以通过配置项自由切换使用哪款了：1
2
3# 主页卡片样式
# Docs: https://akilar.top/posts/d6b69c49/
index_card_style: multicard # slidecard | multicard为了不至于让首页的文章出现空缺，建议将首页生成的文章数量控制为1,2,3的公倍数。修改站点配置文件
[BlogRoot]\_config.yml。找到以下配置项进行调整，注意这是站点配置文件本就有的配置项，不是新增配置项。建议是调整为12篇。如果你的侧边栏魔改内容特别多，那么建议改成18、24、30。务必确保文章卡片栏比侧栏完全展开要长，这样展示效果最好1
2
3
4
5
6
7
8# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 12
order_by: -date本教程讨论的卡片都是考虑有封面和有描述的。所以需要保证你已经开启了相应的配置，查看主题配置文件
[BlogRoot]\_config.butterfly.yml,找到配置项开启描述栏，建议选择2模式1
2
3
4
5
6
7
8# Display the article introduction on homepage
# 1: description
# 2: both (if the description exists, it will show description, or show the auto_excerpt)
# 3: auto_excerpt (default)
# false: do not show the article introduction
index_post_content:
method: 2
length: 500 # if you set method to 2 or 3, the length need to config
首页分类磁贴
安装插件,在博客根目录
[BlogRoot]下打开终端，运行以下指令：1
npm install hexo-butterfly-categories-card --save
添加配置信息，以下为写法示例
在站点配置文件_config.yml或者主题配置文件_config.butterfly.yml中添加以下代码，注意要根据他的默认描述排序改为你自己对应的分类名字：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26# hexo-butterfly-categories-card
# see https://akilar.top/posts/a9131002/
categoryBar:
enable: true # 开关
priority: 5 #过滤器优先权
enable_page: / # 应用页面
layout: # 挂载容器类型
type: id
name: recent-posts
index: 0
column: odd # odd：3列 | even：4列
row: 1 #显示行数，默认两行，超过行数切换为滚动显示
message:
- descr: Ubuntu指南
cover: https://assets.akilar.top/image/cover1.webp
- descr: 玩转Win10
cover: https://assets.akilar.top/image/cover2.webp
- descr: 长篇小说连载
cover: https://assets.akilar.top/image/cover3.webp
- descr: 个人日记
cover: https://assets.akilar.top/image/cover4.webp
- descr: 诗词歌赋
cover: https://assets.akilar.top/image/cover5.webp
- descr: 杂谈教程
cover: https://assets.akilar.top/image/cover6.webp
custom_css: https://npm.elemecdn.com/hexo-butterfly-categories-card@1.0.0/lib/categorybar.css参数释义
| 参数 | 备选值/类型 | 释义 |
|---|---|---|
| priority | number | 【可选】过滤器优先级，数值越小，执行越早，默认为10，选填 |
| enable | true/false | 【必选】控制开关 |
| enable_page | path/all | 【可选】填写想要应用的页面的相对路径（即路由地址）,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面，就填’all’，默认为’/‘ |
| layout.type | id/class | 【可选】挂载容器类型，填写id或class，不填则默认为id |
| layout.name | text | 【必选】挂载容器名称 |
| layout.index | 0和正整数 | 【可选】前提是layout.type为class，因为同一页面可能有多个class，此项用来确认究竟排在第几个顺位 |
| column | odd/even | 【可选】显示列数，考虑到比例问题，只提供3列和4列，odd为3列， even为4列 |
| row | number | 【可选】显示行数，默认两行，超过行数切换为滚动显示 |
| message.descr | text | 分类描述,需要和你自己的文章分类一一对应。 |
| message.cover | url | 分类背景,需要和你自己的文章分类一一对应。 |
| custom_css | url | 【可选】自定义样式，会替换默认的css链接，可以下载文档给出的cdn链接后自主修改 |
首页分类磁贴1.0
这个插件主要实现了以下功能：
- 自定义 tags 或 categories 的排列和展示
- 自定义 tags 或 categories 的展示图标，名称
- 自定义排列的行数，默认 2 行
教程：
在博客根目录
[BlogRoot]下打开终端，运行以下指令：1
npm i hexo-magnet --save
注意，一定要加
--save，不然本地预览的时候可能不会显示！！！在网站配置文件
_config.yml新增以下项 (注意不是主题配置文件)，这里的分类名字必须和你文章的分类名字一一对应：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36magnet:
enable: true
priority: 1
enable_page: /
type: categories
devide: 2
display:
- name: 教程
display_name: 小冰の魔改教程
icon: 📚
- name: 游戏评测
display_name: 小冰の游戏评测
icon: 🎮
- name: 生活趣闻
display_name: 小冰の生活趣闻
icon: 🐱👓
- name: vue
display_name: 小冰の编程学习
icon: 👩💻
- name: 学习
display_name: 小冰の读书笔记
icon: 📒
- name: 随想
display_name: 小冰の胡思乱想
icon: 💡
color_setting:
text_color: black
text_hover_color: white
background_color: "#f2f2f2"
background_hover_color: "#b30070"
layout:
type: id
name: recent-posts
index: 0
temple_html: '<div class="recent-post-item" style="width:100%;height: auto"><div id="catalog_magnet">${temple_html_item}</div></div>'
plus_style: ""配置项的含义：
enable
参数：true/false
含义：是否开启插件enable_page
参数：/
含义：路由地址，如 / 代表主页。/me/ 代表自我介绍页等等priority
参数：1
含义：插件的叠放顺序，数字越大，叠放约靠前。type
参数：categories/tags
含义：选择筛选分类还是标签devide
参数：2
含义：表示分隔的列数，2 表示分为两列展示display
参数：
1
2
3- name: 教程 # 这里是tags或者categories的名称
display_name: 小冰の魔改教程 # 这里是替换的名称
icon: 📚 # 这里是展示的图标含义：配置项，可自行设置，按照设置的顺序展示
color_setting
参数：
1
2
3
4text_color: black # 文字默认颜色
text_hover_color: white # 文字鼠标悬浮颜色
background_color: "#f2f2f2" # 文字背景默认颜色
background_hover_color: "#b30070" # 文字背景悬浮颜色含义：颜色配置项，可自行设置
layout
参数：type; （class&id）
参数：name;
参数：index；（数字）
含义：如果说 magnet 是一幅画，那么这个 layout 就是指定了哪面墙来挂画
而在 HTML 的是世界里有两种墙分别 type 为 id 和 class。
其中在定义 class 的时候会出现多个 class 的情况，这时就需要使用 index，确定是哪一个。
最后墙的名字即是 name;1
2
3
4
5
6
7
8<div name="我是墙" id="recent-posts">
<!-- id=>type recent-posts=>name -->
<div name="我是画框">
<div name="我是纸">
<!--这里通过js挂载magnet，也就是画画-->
</div>
</div>
</div>temple_html
参数：html 模板字段
含义：包含挂载容器1
2
3
4
5<div class="recent-post-item" style="width:100%;height: auto"> <!--文章容器-->
<div id="catalog_magnet"> <!--挂载容器-->
${temple_html_item}
</div>
</div>plus_style
参数：“”
含义：提供可自定义的 style，如加入黑夜模式。
执行 hexo 三连
1
2
3hexo clean
hexo g
hexo s我们可以看到黑夜模式看起来特别的别扭，因此还要做一下黑夜模式的颜色适配，在
custom.css文件中添加以下代码适配黑夜模式(具体颜色可以自己调节)：1
2
3
4
5
6
7
8
9
10
11/* 小冰分类分类磁铁黑夜模式适配 */
/* 一般状态 */
[data-theme="dark"] .magnet_link_context {
background: #1e1e1e;
color: antiquewhite;
}
/* 鼠标悬浮状态 */
[data-theme="dark"] .magnet_link_context:hover {
background: #3ecdf1;
color: #f2f2f2;
}
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 ZYH's blog！
wechat- alipay
相关推荐
评论
