1
hexo clean && hexo g && gulp && hexo d
1
hexo clean && hexo s

从零开始

主题安装

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

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

1
2
3
4
5
6
npm un hexo-renderer-mathjax --save
npm un hexo-math --save
npm i hexo-renderer-markdown-it-katex
npm i hexo-renderer-markdown-it-plus
npm i katex
npm i @andatoshiki/markdown-it-katex

进入 主题 目录，编辑 _config.yml：

1
2
3
4
# MathJax Support
mathjax:
enable: true
per_page: true

在 根目录 _config.yml 的末尾添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
  plugins:
    - plugin:
      name: '@iktakahiro/markdown-it-katex'
      enable: false
    - plugin:
      name: '@andatoshiki/markdown-it-katex'
      enable: true
  anchors:
    level: 1
    collisionSuffix: ''

字數統計

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。

  • 首頁隱藏

執行 $ npm uninstall hexo-generator-index，

執行 $ npm install hexo-generator-indexed，

文章開頭置 hide: true；

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

  • 草稿

    _config.yml 中 # Writing 板塊置 render_drafts: false，

    使用 $ hexo new draft <title> 新建草稿，

    使用 $ hexo s --draft 預覽，

    使用 $ hexo publish <title> 發佈草稿（或直接從 source/_drafts移動到 source/_posts 文件夾）

  • 隱藏文件夾

    在 _post 文件夾中新建 _<folder> 文件夾，裏面的文件不會被發佈。

  • 加密

    執行 $ npm --save hexo-blog-encrypt，

    文章開頭置

    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!

Debug

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

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

部署 时 ERROR Deployer not found: git

1
npm install hexo-deployer-git --save

css

背景透明

新建 transpancy.css，輸入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 文章页背景 */
.layout_post>#post {
    background: rgba(255,255,255,.7);
}
/* 所有页面背景 */
#aside_content .card-widget, #recent-posts>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
    background: rgba(255,255,255,.7);
}
/* 侧边卡片的透明度 */
:root {
  --card-bg: rgba(255, 255, 255, .7);
}
/* 页脚透明 */
#footer {
	background: rgba(255,255,255, .0);
}

在_config.butterfly.yml 中的 inject: head: 中添加 - <link rel="stylesheet" href="/css/transpancy.css">，並置 footer_bg 爲 false（原爲 transparent）

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 参数，则此参数不生效