hexo优化

hexo生成永久路径

hexo-abbrlink是一个将文章的路径变成也给随机数的插件，它可以使你生成的路径从hexo默认的http://xxx.xxxx.top/year/mouth/day/xxx.html变成http://xxx.xxxx.top/posts/123321.html ，这大大缩短了文章的路径。

插件非常便利，但是我在使用的时候遇到了一个可能独属于我的问题，因为之前使用公众号原文链接使用的是原来的链接，而这个插件是后来安装的。如果我使用了，那么我的公众号的原文链接就跳转不到了，这令我非常的苦恼。

butterfly主页头背景图以及post页头背景图的修改

butterfly页脚背景去除

valine评论魔改

https://cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js

1
2
3
master: 'ef2aca03b77e6934e3a45ccc751c5e91',   //博主邮箱md5加密32位小写
tagMeta: ["博主","小伙伴","访客"],     //标识字段名
friends:  [],  //小伙伴邮箱Md5

标签外挂

（不是标准markdown格式，hexo独有，有的是buttery主题独有）

Note

Note

tag-hide

tag-hide标签隐藏

如果你想把一些文字、内容隐藏起来，并提供按钮让用户点击显示。 可以使用这个标签外挂。

。。。

inline在文本里面添加按钮隐藏内容，只限文字

（content 不能包含英文逗号，可用‚)

1
{% hideInline content,display,bg,color %}

content： 文本内容

display： 按钮显示的文本（可选）

bg： 按钮的背景颜色（可选）

color： 按钮文本的颜色（可选）

demo

1
2
3
这里谁最帅?{% hideInline 当然是作者),查看答案,#FF7242,#fff %}

门里有匹马? {% hideInline 闯 %}

这里谁最帅? 当然是作者)

门里有匹马? 闯

block独立的block隐藏内容，可以隐藏很多内容，包括图片，代码块等等

（display 不能包含英文逗号，可用 ‚ )

1
2
3
{% hideBlock display,bg,color %}
content
{% endhideBlock %}
  • content： 文本内容
  • display： 按钮显示的文本（可选）
  • bg： 按钮的背景颜色（可选）
  • color： 按钮文本的颜色（可选）

demo

1
2
3
4
显示内容
{% hideBlock 显示内容 %}
没啥可以显示的
{% endhideBlock %}

显示内容

没啥可以显示的

如果你需要展示的内容太多，可以把它隐藏在收缩框里，需要时再把它展开。

（display 不能包含英文逗号，可用‚)

1
2
3
{% hideToggle display,bg,color %}
content
{% endhideToggle %}

Demo

1
2
3
4
5
{% hideToggle Butterfly安裝方法 %}
这里能装下很多东西哦

{% endhideToggle %}

Butterfly安裝方法

这里能装下很多东西哦

Tabs

Tabs多模块内嵌

label

label高亮文字

高亮所需的文字

1
{% label text color %}

Demo

1
大家好：欢迎来到{% label 春季赛 %}现场，现场的{% label 观众 blue %}都很{% label 热情 red %}啊。好了，{% label 废话 pink %}不多说，接下来我们来看看今天的BO3{% label 参赛队伍 green %}。

大家好：欢迎来到春季赛 现场，现场的观众 都很热情 啊。好了，废话 不多说，接下来我们来看看今天的BO3参赛队伍 。

flink卡片模块

hexo双栏布局

hexo双栏布局

首先执行下面的命令

1
npm i hexo-butterfly-article-double-row --save

在网站的根配置文件下添加以下的代码

1
2
3
#双栏美化
butterfly_article_double_row:
  enable: true

这样之后我们的页码会出现一个小bug，在自定义css文件中加入下面的代码

调整页码的位置

1
2
3
4
5
/* 翻页按钮居中 */
#pagination {
	width: 100%;
	margin: auto;
  }

首页轮播图

首页轮播图

首先执行以下的代码

1
npm install hexo-butterfly-swiper --save

然后再主题配置文件中引入轮播图组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# hexo-butterfly-swiper
# see https://akilar.top/posts/8e1264d1/
swiper:
  enable: true # 开关
  priority: 5 # 过滤器优先权
  enable_page: all # 应用页面
  timemode: date # date/updated
  layout: # 挂载容器类型
    type: id
    name: recent-posts
    index: 0
  default_descr: 
  swiper_css: https://unpkg.zhimg.com/hexo-butterfly-swiper/lib/swiper.min.css
  swiper_js: https://unpkg.zhimg.com/hexo-butterfly-swiper/lib/swiper.min.js
  custom_css: https://unpkg.zhimg.com/hexo-butterfly-swiper/lib/swiperstyle.css
  custom_js: https://unpkg.zhimg.com/hexo-butterfly-swiper/lib/swiper_init.js

下面是博主的配置，博主将这些文件另存下载下来，放在了本地，大家可以自由选择

1
2
3
4
5
6
7
8
9
10
11
12
13
14
swiper:
  enable: true # 开关
  priority: 5 # 过滤器优先权
  enable_page: all # 应用页面
  timemode: date # date/updated
  layout: # 挂载容器类型
    type: id
    name: recent-posts
    index: 0
  default_descr: 
  swiper_css: /css/swiper.min.css
  swiper_js: /js/swiper.min.js
  custom_css: /css/swiperstyle.css
  custom_js: /js/swiper_init.js

现在我们想要使文章进行轮播，那么现在我们需要在文章的写作时，在front_matter中添加swiper_index，数值越大，越首先进行出现

旋转小风车

旋转小风车

在主题配置文件中，更改如下，下面对应的为小风车的编号，可以更改为自己的编号

1
2
3
4
5
beautify:
  enable: true
  field: post # site/post
  title-prefix-icon: '\f863'
  title-prefix-icon-color: "#F47466"

复制以下代码到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;
}