1
hexo clean && hexo generate && gulp && hexo deploy
1
hexo clean && hexo server

从零开始

主题安装

https://butterfly.js.org/posts/21cfbf15/

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

安装

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

修改 Hexo 根目录下的 _config.yml，

1
theme: butterfly

在 hexo 的根目錄創建一個文件 _config.butterfly.yml，並把主題目錄的 _config.yml 內容複製到 _config.butterfly.yml 去。

域名

1
2
3
4
deploy:
  type: git
  repository: https://github.com/KobicGend/KobicGend.github.io.git
  branch: master

abbrlink（在写第一篇博客前修改）

https://zhuanlan.zhihu.com/p/169492685

1
npm install hexo-abbrlink --save

修改 _config.yml

1
2
3
4
permalink: posts/:abbrlink.html  # 此处可以自己设置，也可以直接使用 :/abbrlink
abbrlink:
  alg: crc32   # 算法： crc16(default) and crc32
  rep: hex     # 进制： dec(default) and hex

使用 gulp 压缩博客静态资源

1
2
3
4
5
6
7
8
9
10
11
12
npm install --global gulp-cli # 全局安装 gulp 指令集  
npm install gulp --save # 安装 gulp 插件
# 压缩 HTML
npm install gulp-htmlclean --save-dev  
npm install gulp-html-minifier-terser --save-dev  
# 用 gulp-html-minifier-terser 可以压缩 HTML 中的 ES6 语法
# 压缩 CSS
npm install gulp-clean-css --save-dev
# 压缩 JS
npm install gulp-terser --save-dev
# 压缩字体包(不再适用)
# npm install gulp-fontmin --save-dev

为 Gulp 创建 gulpfile.js 任务脚本。在博客根目录下新建gulpfile.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
// 用到的各个插件
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var htmlmin = require('gulp-html-minifier-terser');
var htmlclean = require('gulp-htmlclean');
// var fontmin = require('gulp-fontmin');
// gulp-tester
var terser = require('gulp-terser');
// 压缩 js
gulp.task('compress', async() =>{
  gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
    .pipe(terser())
    .pipe(gulp.dest('./public'))
});
// 压缩 css
gulp.task('minify-css', () => {
    return gulp.src(['./public/**/*.css'])
        .pipe(cleanCSS({
            compatibility: 'ie11'
        }))
        .pipe(gulp.dest('./public'));
});
// 压缩 html
gulp.task('minify-html', () => {
    return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true, // 清除 html 注释
            collapseWhitespace: true, // 压缩 html
            collapseBooleanAttributes: true,
            // 省略布尔属性的值，例如：<input checked="true"/> ==> <input />
            removeEmptyAttributes: true,
            // 删除所有空格作属性值，例如：<input id="" /> ==> <input />
            removeScriptTypeAttributes: true,
            // 删除 <script> 的 type="text/javascript"
            removeStyleLinkTypeAttributes: true,
            // 删除 <style> 和 <link> 的 type="text/css"
            minifyJS: true, // 压缩页面 JS
            minifyCSS: true, // 压缩页面 CSS
            minifyURLs: true  // 压缩页面 URL
        }))
        .pipe(gulp.dest('./public'))
});
// 压缩字体
// function minifyFont(text, cb) {
//   gulp
//     .src('./public/fonts/*.ttf') // 原字体所在目录
//     .pipe(fontmin({
//       text: text
//     }))
//     .pipe(gulp.dest('./public/fontsdest/')) // 压缩后的输出目录
//     .on('end', cb);
// }

// gulp.task('mini-font', (cb) => {
//   var buffers = [];
//   gulp
//     .src(['./public/**/*.html']) //HTML 文件所在目录请根据自身情况修改
//     .on('data', function(file) {
//       buffers.push(file.contents);
//     })
//     .on('end', function() {
//       var text = Buffer.concat(buffers).toString('utf-8');
//       minifyFont(text, cb);
//     });
// });
// 运行 gulp 命令时依次执行以下任务
gulp.task('default', gulp.parallel(
  'compress', 'minify-css', 'minify-html'
//   ,'mini-font'
))

更新所有插件

1
npm update

中英文之间自动加空格

1
npm install hexo-filter-auto-spacing --save
1
2
auto_spacing:
  enable: true

标签外挂

https://akilar.top/posts/615e2dec/

PDF

1
npm install --save hexo-pdf

在 source 文件夹下创建一个叫 pdf 的文件夹，把 xxx.pdf 文件放在这里，然后在使用

1
{% pdf /pdf/xxx.pdf %}

LATEX

Hexo 默认的 Markdown 解析器（marked）会将 LaTeX 公式中的下划线 _ 误认为是斜体，将双反斜杠 \\ 误认为是普通转义。为了彻底解决冲突，我们需要更换一个更高级的解析器：markdown-it。

1
2
3
4
npm uninstall hexo-renderer-marked --save
npm uninstall hexo-renderer-kramed --save
npm install hexo-renderer-markdown-it --save
npm install markdown-it-katex --save

记得配置主题文件里的 math: use: mathjax。

字數統計

1
npm install hexo-wordcount --save
1
2
3
4
5
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

將來的文章

_config.yml 中 # Writing 板塊置 future: false，若發佈時間晚於當前時間，則不會顯示，在重新部署後顯示。

發佈狀態

文章開頭置 published: false。

首頁隱藏

1
2
npm uninstall hexo-generator-index
npm install hexo-generator-indexed

文章開頭置 hide: true；

在 _config.yml 中 hide_categories 可設置隱藏某個分類下的文章。

加密

1
npm i hexo-blog-encrypt --save

文章開頭置

1
2
3
4
5
password: <password>
abstract: This blog is encrypted.
message: Please enter the password.
wrong_pass_message: Incorrect password, please try again.
wrong_hash_message: Bug found!

或在 _config.yml 中添加

1
2
3
4
5
6
7
8
9
10
encrypt: # hexo-blog-encrypt
  password: <password>
  abstract: This blog is encrypted.
  message: Please enter the password.
  tags:
	- {name: <tag>, password: <password>}
	- {name: <tag>, password: <password>}
  template: <div id="hexo-blog-encrypt" data-wpm="{{hbeWrongPassMessage}}" data-whm="{{hbeWrongHashMessage}}"><div class="hbe-input-container"><input type="password" id="hbePass" placeholder="{{hbeMessage}}" /><label>{{hbeMessage}}</label><div class="bottom-line"></div></div><script id="hbeData" type="hbeData" data-hmacdigest="{{hbeHmacDigest}}">{{hbeEncryptedData}}</script></div>
  wrong_pass_message: Incorrect password, please try again.
  wrong_hash_message: Bug found!

修改底部数量

D:\Blog\themes\butterfly\layout\includes\pagination.pug

1
2
3
4
5
6
var options = {
  prev_text: '<i class="fas fa-chevron-left fa-fw"></i>',
  next_text: '<i class="fas fa-chevron-right fa-fw"></i>',
  mid_size: 3,
  escape: false
}

Debug

提示“warning: LF will be replaced by CRLF”

啥也别干，它帮你修复了，是安全的。

部署时 ERROR Deployer not found: git

1
npm install hexo-deployer-git --save

B 站站外 (外链) 播放器

QueryString 参数：boolean 类型，在 QueryString 中可以使用 0 和 1 表示。

参数名类型必要说明
aidnumberUGC 视频 ID。aid、bvid 选择其一即可
cidnumberUGC 视频 ID
bvidstring✅UGC 视频 ID。aid、bvid 选择其一即可
seasonIdnumberOGV 视频 ID
episodeIdnumber✅OGV 视频 ID。优先级高于 aid、bvid
posterboolean展示封面
autoplayboolean自动播放
mutedboolean静音
tnumber跳转到媒体的初始时间点，单位：秒
danmakubooleanfalse 表示 关闭弹幕，其他表示默认值
kindnumber群组种类。非通用业务需要此参数
referboolean跳链时携带当前的 Referrer。用于合作方查询来自嵌入网站的跳转次数
pnumber多 P 视频的集数。从 1 开始计数，若有 cid 参数，则此参数不生效

小风车

修改主题配置文件，改成小风车样式

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

图标使用的「fontawesome.com」上的图标，引用的是 Unicode 形式。可自行查找合适的。

/* 页面设置 icon 转动速度调整 */
#rightside_config i.fas.fa-cog.fa-spin {
animation: fa-spin 5s linear infinite ;
}