可以在这里选择自己喜欢的风格主题：hexo官网

搭建hexo+butterfly

参考资料：使用 hexo + 主题 butterfly + Github 搭建个人博客_hexo-theme-butterfly-CSDN博客

hexo命令

1
2
3
4
hexo g #完整命令为hexo generate,用于生成静态文件
hexo s #完整命令为hexo server,用于启动服务器，主要用来本地预览
hexo d #完整命令为hexo deploy,用于将本地文件发布到github等git仓库上
hexo n “my article” #完整命令为hexo new,用于新建一篇名为“my article”的文章

功能实现

发布一篇博客

1
hexo new post "demo"

数学符号：LaTeX 各种命令，符号_c上面一撇用chinatex怎么打-CSDN博客

基础美化

参考资料：Butterfly美化_butterfly-vue-CSDN博客

背景动态落叶

butterfly主题魔改05：页面增加樱花动态背景效果 | kukualのblog

在博客根目录themes\butterfly\source\js下创建sakura.js文件，并添加如下代码：

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
var stop, staticx;
var img = new Image();
img.src = " "; //这里添加需要显示的图片

function Sakura(x, y, s, r, fn) {
    this.x = x;
    this.y = y;
    this.s = s;
    this.r = r;
    this.fn = fn;
}
Sakura.prototype.draw = function (cxt) {
    cxt.save();
    var xc = 40 * this.s / 4;
    cxt.translate(this.x, this.y);
    cxt.rotate(this.r);
    cxt.drawImage(img, 0, 0, 40 * this.s, 40 * this.s)
    cxt.restore();
}
Sakura.prototype.update = function () {
    this.x = this.fn.x(this.x, this.y);
    this.y = this.fn.y(this.y, this.y);
    this.r = this.fn.r(this.r);
    if (this.x > window.innerWidth || this.x < 0 || this.y > window.innerHeight || this.y < 0) {
        this.r = getRandom('fnr');
        if (Math.random() > 0.4) {
            this.x = getRandom('x');
            this.y = 0;
            this.s = getRandom('s');
            this.r = getRandom('r');
        } else {
            this.x = window.innerWidth;
            this.y = getRandom('y');
            this.s = getRandom('s');
            this.r = getRandom('r');
        }
    }
}
SakuraList = function () {
    this.list = [];
}
SakuraList.prototype.push = function (sakura) {
    this.list.push(sakura);
}
SakuraList.prototype.update = function () {
    for (var i = 0, len = this.list.length; i < len; i++) {
        this.list[i].update();
    }
}
SakuraList.prototype.draw = function (cxt) {
    for (var i = 0, len = this.list.length; i < len; i++) {
        this.list[i].draw(cxt);
    }
}
SakuraList.prototype.get = function (i) {
    return this.list[i];
}
SakuraList.prototype.size = function () {
    return this.list.length;
}

function getRandom(option) {
    var ret, random;
    switch (option) {
        case 'x':
            ret = Math.random() * window.innerWidth;
            break;
        case 'y':
            ret = Math.random() * window.innerHeight;
            break;
        case 's':
            ret = Math.random();
            break;
        case 'r':
            ret = Math.random() * 6;
            break;
        case 'fnx':
            random = -0.5 + Math.random() * 1;
            ret = function (x, y) {
                return x + 0.5 * random - 1.7;
            };
            break;
        case 'fny':
            random = 1.5 + Math.random() * 0.7
            ret = function (x, y) {
                return y + random;
            };
            break;
        case 'fnr':
            random = Math.random() * 0.03;
            ret = function (r) {
                return r + random;
            };
            break;
    }
    return ret;
}

function startSakura() {
    requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame;
    var canvas = document.createElement('canvas'),
        cxt;
    staticx = true;
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;
    canvas.setAttribute('style', 'position: fixed;left: 0;top: 0;pointer-events: none;');
    canvas.setAttribute('id', 'canvas_sakura');
    document.getElementsByTagName('body')[0].appendChild(canvas);
    cxt = canvas.getContext('2d');
    var sakuraList = new SakuraList();
    for (var i = 0; i < 50; i++) {
        var sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny;
        randomX = getRandom('x');
        randomY = getRandom('y');
        randomR = getRandom('r');
        randomS = getRandom('s');
        randomFnx = getRandom('fnx');
        randomFny = getRandom('fny');
        randomFnR = getRandom('fnr');
        sakura = new Sakura(randomX, randomY, randomS, randomR, {
            x: randomFnx,
            y: randomFny,
            r: randomFnR
        });
        sakura.draw(cxt);
        sakuraList.push(sakura);
    }
    stop = requestAnimationFrame(function () {
        cxt.clearRect(0, 0, canvas.width, canvas.height);
        sakuraList.update();
        sakuraList.draw(cxt);
        stop = requestAnimationFrame(arguments.callee);
    })
}
window.onresize = function () {
    var canvasSnow = document.getElementById('canvas_snow');
}
img.onload = function () {
    startSakura();
}

function stopp() {
    if (staticx) {
        var child = document.getElementById("canvas_sakura");
        child.parentNode.removeChild(child);
        window.cancelAnimationFrame(stop);
        staticx = false;
    } else {
        startSakura();
    }
}


在博客根目录下_config.butterfly.yml文件中，找到inject，在bottom中添加以下内容：

1
- <script src="/js/sakura.js"></script>

留言板

支持博客评论

参考链接：

Waline在Butterfly主题中的应用_butterfly配置waline-CSDN博客

快速上手 | Waline

  • 需要注意的是该步骤跳转的地址即为serverURL，需要记住这个地址
  • 评论管理
    • 部署完成后，请访问 <serverURL>/ui/register 进行注册。首个注册的人会被设定成管理员。
    • 管理员登陆后，即可看到评论管理界面。在这里可以修改、标记或删除评论。
    • 用户也可通过评论框注册账号，登陆后会跳转到自己的档案页

添加表情包

可以从该仓库选择自己喜欢的表情包类型：walinejs/emojis: Emojis Repo for Waline

1
D:\myblog\themes\butterfly\layout\includes\third-party\comments\waline.pug

修改上述路径下的文件内容：

1
2
3
4
emoji: [
	'https://unpkg.com/@waline/emojis@1.2.0/alus',
	'https://unpkg.com/@waline/emojis@1.1.0/qq',
   ],

评论图片

1、在去不图床购买存储容量

2、去不图床购买完成之后进入Token页面，生成Token(保存此Token，因为只显示一次。)

3、修改waline.pug文件

1
D:\myblog\themes\butterfly\layout\includes\third-party\comments\waline.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
    const waline = Fn({
      el: el.querySelector('#waline-wrap'),
      serverURL: 'https://feifanyulu-waline.vercel.app',//
      emoji: [
        'https://unpkg.com/@waline/emojis@1.2.0/alus',
        'https://unpkg.com/@waline/emojis@1.1.0/qq',
        'https://unpkg.com/@waline/emojis@1.2.0/bmoji',
        'https://unpkg.com/@waline/emojis@1.2.0/tieba',
        'https://unpkg.com/@waline/emojis@1.2.0/weibo',
      ],
      pageview: !{lazyload ? false : pageview},
      dark: 'html[data-theme="dark"]',
      comment: !{lazyload ? false : count},
      
//-----------------------在文件中添加如下部分------------------------------------//
      imageUploader: (file) => {
          if (!file) {  
            throw new Error('No file provided');  
          }  
          let formData = new FormData();
          let headers = new Headers();
          formData.append('file', file);
          
          headers.set('Authorization', 'API TOKEN');  // API TOKEN需要改成第二步复制的token，去不给的token是1234|xxxx，前面的数字和竖杠不需要，加上Bearer 变成Bearer xxxxx才能认证通过
          headers.set('Accept', 'application/json');
          
          return fetch('https://7bu.top/api/v1/upload', {    // 去不图床的API就是此链接，如果你用的其他图床就改成其他的
            method: 'POST',
            headers: headers,
            body: formData,
            mode: 'cors',
          })
            .then((resp) => resp.json())
            .then((resp) => resp.data.links.url);
        },
//----------------------------------------------------------------------------//
      ...option,
      path: isShuoshuo ? path : (option && option.path) || path
    })

为Hexo添加评论系统Waline并配置图床_hexo waline-CSDN博客

遇见的问题

md格式的博文上传后图片无法显示

1、将 _config.yml 文件中的 post_asset_folder 选项设为 true；(该操作的目的就是在使用hexo new xxx指令新建md文档博文时，在相同的/source/posts路径下同步创建一个相同名字的xxx文件夹，而xxx文件夹就是用来存放新建md文档里的图片的)

2、使用typora编辑md格式的博文，需要对typora的设置–>偏好设置中进行修改，如下：(这样我们粘贴图片到md文档的时候，typora会自动把图片再复制一份到我们上面创建的同名文件夹下)

参考资料：[[2024] hexo图片无法加载究极解决方案_hexo图片显示不出来-CSDN博客](https://blog.csdn.net/lengcs/article/details/143816877?ops_request_misc={"request_id"%3A"39167e82ce3160fc47f69925ea7bb820"%2C"scm"%3A"20140713.130102334.pc_all."}&request_id=39167e82ce3160fc47f69925ea7bb820&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-13-143816877-null-null.142^v101^pc_search_result_base3&utm_term=hexo md插入图片&spm=1018.2226.3001.4187)