Hexo相关的脚本：

上传仓库：

将D:\Hexo\Hexo改为自己的博客根目录即可，随后保存为.bat文件
1
2
3
4
5
6
7
@echo off
D:
cd D:\Hexo\Hexo
git add .
git commit -m "github action update"
git push origin main
pause
指令说明：
  1. 第一条指令@echo off，关闭回显
    第二叫指令D:，切换到博客站点目录所在的盘符，我这里是D盘
    第三条指令cd D:\Hexo\Hexo，进入站点目录，我这里是D:\Hexo\Hexo
    第四条指令git add -A commit -m 'test' git push推送到github
    第五条指令pause,暂停

刷新dns：

由于某些情况可能暂时无法访问github，需要更改Hosts，更改完需要刷新DNS才会生效，保存为.bat文件
1
2
3
@echo off
ipconfig /flushdns
pause
新建文章：
打开后输入文章名即可新建文章，将D:\Hexo\Hexo更改为自己的博客根目录即可，保存为.sh文件
1
2
3
4
5
set -e
cd "D:\Hexo\Hexo"
read -p "文章名称: " title
hexo new $layout $title
cd -

本地预览：

将D:\Hexo\Hexo更改为自己的博客根目录即可，保存为.sh文件
1
2
cd "D:\Hexo\Hexo"
hexo S

清理缓存：

将D:\Hexo\Hexo更改为自己的博客根目录即可，保存为.sh文件
1
2
cd "D:\Hexo\Hexo"
hexo clean

根目录：

如果要运行指令需要到跟目录右键打开git，简化操作，一键cd到更目录。将D:\Hexo\Hexo更改为自己的博客根目录即可，保存为.sh文件
1
2
cd "D:\Hexo\Hexo"
exec /bin/bash

hexo-butterfly美化：

樱花飘落背景

1
2
cd theme/Butterfly/source/js
wget https://yremp.live/wp-content/uploads/resource/js/sakura.js

把下载好的Js文件放在theme/Butterfly/source/js文件夹下
/Butterfly/layout/includes文件夹下找到head.pug文件，在最后引入

1
2
if theme.sakura.enable
  script(src="/js/sakura.js")

在主题的主配置文件加入Butterfly/_config.yml

1
2
3
# 页面樱花飘落动效
sakura:
  enable: true

浏览器标题恶搞

在theme/Butterfly/source/js文件夹下添加crash_cheat.js文件
填入以下内容记得要修改你喜欢的标题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var OriginTitle = document.title;
 var titleTime;
 document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         $('[rel="icon"]').attr('href', "/joke.ico");
         document.title = '看不见我🙈~看不见我🙈~';
         clearTimeout(titleTime);
     }
     else {
         $('[rel="icon"]').attr('href', "/favicon.ico");
         document.title = ' ( ๑•̀ㅂ•́) ✧被发现了～';
         titleTime = setTimeout(function () {
             document.title = OriginTitle;
         }, 2000);
     }
 });

在Butterfly/layout/includes/layout.pug中添加以下代码来引入

1
script(type='text/javascript', src='/js/crash_cheat.js')

注意

因更新最新主题版本出现以下报错

1
JQuery - $ is not defined

解决方式

引入以下js

https://cdn.jsdelivr.net/gh/weilain/cdn-photo/js/jquery.min.js

示例

在inject: -> bottom:

1
- <script src="https://cdn.jsdelivr.net/gh/weilain/cdn-photo/js/jquery.min.js"></script>

解决我了遇到的问题！

添加标签云

使用命令进行安装插件

1
cnpm install hexo-tag-cloud --save

打开Butterfly/layout/includes/widget/card_tags.pug文件，用下面内容将其替换掉，最好把之前的文件备份一下,防止后悔

1
2
3
4
5
6
7
8
9
10
11
12
if site.tags.length
  .card-widget.card-tags
    .card-content
      .item-headline
        i.fa.fa-tags(aria-hidden="true")
        span= _p('aside.card_tags')
        script(type="text/javascript" charset="utf-8" src="/js/tagcloud.js")
        script(type="text/javascript" charset="utf-8" src="/js/tagcanvas.js")
        #myCanvasContainer.widget.tagcloud(align='center')
          canvas#resCanvas(width='200', height='200', style='width=100%')
            != tagcloud()
          != tagcloud({min_font: 16, max_font: 24, amount: 50, color: true, start_color: '#999', end_color: '#99a9bf'})

添加个性化板娘

由stevenjoezhang 魔改项目
最简单引用方式在Butterfly/_config.yml中inject添加

1
2
3
4
5
inject:
   head:
     - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
   bottom:
     - <script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

添加访客地图

前往 clustrmaps 网站注册一个帐号

找到 Free Tools 下面的 Website Widget, 点击 Get Map Widget

输入你的博客网址，点击 Next

根据你自己的喜好选择样式 Map widget 或 Globe Widget

找到如下代码，记住 src (****** 的部分):

1
<script type="text/javascript" id="clstr_globe" src="**********************">

在 themes/butterfly/layout/includes/widget/ 文件夹新建 card_map.pug 文件，文件内容如下:

1
2
3
4
5
6
.card-widget.card-map
  .card-content
    .item-headline
      i.fa.fa-globe-asia(aria-hidden="true")
      span= _p('aside.card_map')
    script#clstr_globe(type="text/javascript" defer="defer" src="此处填入你自己的代码")

编辑 themes/butterfly/layout/includes/widget/index.pug 文件，在你想要显示的位置插入以下代码:

1
2
if theme.aside.card_map
        !=partial('includes/widget/card_map', {}, {cache:theme.fragment_cache})

注意格式

编辑 butterfly/_config.yml 文件，在 card_webinfo 下面添加一行 card_map: true

编辑 themes/Butterfly/languages/zh-CN.yml 文件 (请根据你的网站语言选择)，找到 aside 下对应格式添加 card_map: 访客地图 (后面的文本可自定义)

如果不想显示，直接把 butterfly/_config.yml 文件的 card_map: true 改为 card_map: false 即可

页脚跳动的♥

编辑博客根目录themes/Butterfly/layout/includes/footer.pug文件，将

1
.copyright!= `&copy;${theme.footer.owner.since} - ${nowYear} By ${config.author}`

改为

1
.copyright!= `&copy;${theme.footer.owner.since} - ${nowYear} <i id="heartbeat" class="fa fas fa-heartbeat"></i>  ${config.author}`

将

1
.copyright!= `&copy;${nowYear} By ${config.author}`

改为

1
.copyright!= `&copy;${nowYear} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}`

编辑butterfly.yml文件

在inject->head下面添加如下内容：

1
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HCLonely/images@master/others/heartbeat.min.css">

Butterfly加载动画修改

添加配置文件

在目录themes/butterfly/layout/includes/loading下添加loaded.ejs文件，代码如下

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
<% if (theme.preloader.enable) { %>
<div id='loader'>
    <% if(theme.preloader.layout == 'gear' ) {%>
    <div class="outer_box">
    <div class='loader_overlay'></div>
    <div class='loader_cogs'>
        <div class='loader_cogs__top'>
            <div class='top_part'></div>
            <div class='top_part'></div>
            <div class='top_part'></div>
            <div class='top_hole'></div>
        </div>
        <div class='loader_cogs__left'>
            <div class='left_part'></div>
            <div class='left_part'></div>
            <div class='left_part'></div>
            <div class='left_hole'></div>
        </div>
        <div class='loader_cogs__bottom'>
            <div class='bottom_part'></div>
            <div class='bottom_part'></div>
            <div class='bottom_part'></div>
            <div class='bottom_hole'></div>
        </div>
        <p style="text-align:center">&nbsp;&nbsp;&nbsp;loading...</p>
    </div>
    </div>
  <% } else if(theme.preloader.layout == 'spinner-box') { %>
    <div class="loading-left-bg"></div>
    <div class="loading-right-bg"></div>
    <div class="spinner-box">
        <div class="configure-border-1">
            <div class="configure-core"></div>
        </div>
        <div class="configure-border-2">
            <div class="configure-core"></div>
        </div>
        <div class="loading-word">加载中...</div>
    </div>
  <% } %>
</div>

<script>
  var endLoading = function () {
    document.body.style.overflow = 'auto';
    document.getElementById('loader').classList.add("loading");
  }
  window.addEventListener('load',endLoading);
</script>
<% } %>

引入样式文件

  • spinner-box

    1
    2
    3

    风格样式文件 及默认

    
butterfly

    1
    2
    3

    主题加载：

    
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zyoushuo/Blog@latest/hexo/css/loading_style_1.css" >

    1
    2
    3

    - gear风格样式文件

    

  • 1
    2
    3
    4
    5
    6
    7

    将上面两行代码加到主题目录`_config _yml`下的`inject`中

    引入到页面

    找到 `themes/butterfly/layout/includes/`下的文件`layout.pug`,将代码

    if theme.preloader !=partial('includes/loading/loading', {}, {cache:theme.fragment_cache})
1
2
3

替换为

if theme.preloader
!=partial(‘includes/loading/loaded.ejs’, {}, {cache:theme.fragment_cache})

1
2
3
4
5

开启加载

主题目录`_config _yml`中的

preloader: true

1
2
3

替换为

preloader:
enable: true
layout: gear # gear, spinner-box 两种样式

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

### Hexo 博客之优雅使用阿里 iconfont 图标：

Font Awesome 无论是 v4 还是 v5 图标都有一些局限性。因此不少小伙伴想到了使用阿里 iconfont 图标。然而很多小伙伴并不是前端这个专业，可能对使用图标存在一定的问题。

因此创作这篇水文，帮助小伙伴解决无法引入阿里 iconfont 图标的问题。

什么人能够使用？

理论上来说任何主题任何驱动都可以。只要你的网页还是 HTML+CSS。

引入并不是什么难事，这篇文章只是给小白看的，有相关经验或者大佬可以直接关掉这篇水文了。

引入前的准备

能够登录阿里 iconfont

认识汉字及部分单词（content、class 等）

具备一定的前端知识：了解什么是标签

具备一定的前端知识：能够使用开发者工具

具备一定的前端知识：能够找到相应的标签

具备一定的前端知识：明白 css 的语法

其他说明

此教程理论上可以在任意主题（需自己具备一定的能力）使用，此主题只以 butterfly（版本：2.3.5）主题为例。

###  建立项目

进入[阿里 iconfont](https://www.iconfont.cn/) 寻找你想要添加的图标，并且添加到项目。

1. 找到你想添加的图标（如果你不会找，可以直接关掉此文了。）

   将你想要添加的图标点击 “添加入库” 按钮，也就是图中圈起来的图标。

2. 添加至项目

   点击右上角小购物车图标。这里会看到你刚刚添加的所有图标

   接下来就是为你的图标创建一个项目，名称随意。创建完成后你将看到如下页面

3. 生成在线链接

   （font class 方式）点击 Font class 按钮然后生成链接。

   如果使用 svg，那么请点击 symbol，然后生成链接。

4. 查看链接

   点击链接会看到一些 css 代码。将鼠标下拉会看到刚才你添加的样式。


###  引入字体及样式

引入字体样式其实就是把刚才的链接引入到博客中，可以直接使用阿里的链接，也可以下载下来。为了方便方便修改，我建议下载下来放到本地。

同样以 butterfly 主题为例：

1. 下载

   右键另存为即可。路径选择 `\themes\Butterfly\source\css\`

2. 引入文件


> 不同主题引入外部 css/js 的方法都不相同，请参考你所使用主题引入外部样式的设置。

> 如果你不想自己创建而是想直接使用博主的，那么可以直接把链接换成：https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@master/Hexo/css/iconfont.min.css。
>
> 图标库预览：https://www.antmoe.com/iconfont/

1. 如果使用 svg

   如果使用 svg 图标，那么需要在 css 样式表中加入如下样式。如果使用 FontClass，那么可以无视这一步

CSS.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}

1
2
3
4
5
6
7
8
9

###  开始使用 iconfont

上述步骤全部完成后，那么接下来可以使用小图标了。

### 个人信息栏的小图标–font 字体方式

这里直接写阿里提供的样式即可。


YAMLsocial:
iconfont icon-bilibili: https://www.bilibili.com

1
2
3

小图标如果你觉得小，可以自行修改。

CSS.icon-bilibili:before {
content: “\e600”;
/* 修改颜色 /
color: blue;
/ 修改大小 */
font-size: 24px;
}

1
2
3

这样修改会导致所有这个图标的大小都会变动。建议的方式是重新写一个 css，为其添加规则。设置时只需要多加一个 class 即可例如：

CSS.icon-bilibili:before {
content: “\e600”;
}
/* 卡片处小图标 /
.card_icon {
/ 修改颜色 /
color: blue;
/ 修改大小 */
font-size: 24px;
}

1
2
3

设置时的方法：

YAMLsocial:
iconfont icon-bilibili card_icon: https://www.bilibili.com

1
2
3
4
5

### 个人信息栏的小图标–svg 方式

svg 也称多色图标，由于不是通过类名，而是使用了 svg 标签，因此需要通过脚本的方式动态插入。例如：

JAVASCRIPT$(“.card-info-social-icons”).append(
‘‘
);

1
2
3
4
5
6
7
8
9
10
11

其中两个空分别表示地址，例如 `https://www.antmoe.com`, 另外一个为图标名，例如`#icon-QQ`，名字根据你自己库来写，不是随便写的。

### 标题美化处的修改

butterfly 主题的标题标签前有一个图标，如何为其更改为阿里 iconfont 呢？

通过开发者工具我们可以看到主题为前边小图标的样式：

因此我们改动起来也很简单，只需要在刚才我们的 `iconfont.css` 文件中覆盖这个样式即可。

CSS#article-container h1:before,
#article-container h2:before,
#article-container h3:before,
#article-container h4:before,
#article-container h5:before,
#article-container h6:before {
font-family: “iconfont”;
content: “\e6a0”;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

此时就能看到图标已经发生了变化。

[![img](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)](https://cdn.jsdelivr.net/gh/blogimg/picbed@latest/2020/05/07/f4993de6d089f3232aad38ea1bcd8f1f.png)

> 这里解释下代码，方便大家自行决策如何修改。
>
> `font-family` 是必须写的，因为作者的代码只写了 FontAwesome，因此需要覆盖他。
>
> `content` 可以不在 css 中写，这样可以在配置文件里定义内容。如果写了，会导致配置文件的设置失效。颜色设置同理.

###  其他修改

不管是什么主题，不管是什么样式。只要你想使用阿里的图标，必须改变其标签的字体为 `iconfont`, 接下来可以用伪类方式，也可以使用 class 方式。

文章中使用 svg 也很简单，首先需要确保全局引用了 js。如果没有，在文中局部引入也是可以的。

接下来只需要在需要的地方插入 svg 标签即可。

HTML


##  最后

如果你遇到了如下问题，请向上查找解决方案.

1. 修改图标大小及颜色

2. 图标不显示 (无效果)

   这种原因很多种，但如果你稍有常识就不会遇到.

3. 不知道在哪改

   在你创建的 css 文件中.