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.ymlinject添加

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 widgetGlobe 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

    主题加载:

    • 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 文件中.