青崖之间

北海虽赊，扶摇可接

发表于 更新于 分类于 本文字数： 17k 阅读时长 ≈ 15 分钟

2023年11月11日更新：由于本站全面重构迁移至Next主题，本文内容已不再适用，正式归档。

前言

当我们有了一个基于Hexo的博客后，参考：[利用Hexo搭建个人博客，并添加多语言功能]，一方面当然要着手创作文章丰富其内容，而另一方面，将站点充分个性化也是必不可少的一步。仅仅按默认参数部署完成的站点虽然堪用，但是总是少了些个人空间独有的颜色。

而这篇Hexo 进阶美化设置，便是本学渣用来记录在搭建完成网站后，进行的一系列深度修改的操作。当然，这里说的深度，也只是相对的，毕竟本人非技术出身，并没有阅读乃至对于源码进行大量修改的能力，因此，本文记录的更多是源码作者写好的设置参数的修改。不过话又说回来，本学渣玩建站本身就是折腾着图一乐，也没必要费心费力研究的多深入，目前的效果我已然心满意足了。

网站个性化

顶栏个性化

进到站点里第一眼看到的就是首页的样式，很大程度上首页奠定了整个博客的画风，因此对于首页有必要进行详尽的个性化。

站点名修改

毋庸置疑，建好站哪怕什么修改都不想做，站点名也是非改不可的，毕竟不能每个人顶一样的ID出现。

站点名的配置文件为blog目录下的_config.yml文件，在开头第6行：

1
title: 你想要的名字

修改完毕后重启博客即可。

图标

首页能够修改的图标很多，这里本人只修改两个，分别是站点名左侧的图标和网页标签的图标。

站点名图标文件位于blog/themes/hexo-theme-matery/source/medias/logo.png

网页标签图标文件位于blog/themes/hexo-theme-matery/source/favicon.png

只要将自己喜欢的图标文件覆盖源文件即可，为了美观，建议使用透明背景图层的png位图。

添加友链

参考hexo-theme-matery 文档 ，友链设置如下：

friends 页是用来展示友情链接信息的页面，如果在你的博客 source 目录下还没有 friends/index.md 文件，那么你就需要新建一个，命令如下：

1
hexo new page "friends"

编辑你刚刚新建的页面文件 /source/friends/index.md，至少需要以下内容：

1
2
3
4
5
6
---
title: friends
date: 2022-12-12 12:12:12
type: "friends"
layout: "friends"
---

同时，在你的博客 source 目录下新建 _data 目录，在 _data 目录中新建 friends.json 文件，文件内容如下所示：

1
2
3
4
5
6
7
[{
    "avatar": "网站图标链接",
    "name": "网站名",
    "introduction": "简介",
    "url": "网站链接",
    "title": "自定义"
}]

字体大小修改

打开位于blog/themes/hexo-theme-matery/source/libs/materialize的materialize.min.css，搜索关键字nav ul a，将它大括号中的font-size修改为想要的大小。本站使用的是1.3rem。

banner个性化

hexo-theme-matery主题很醒目的一个特点便是首页的满屏Banner图片，以及上面的寄语。这里的配置带有浓重的个人色彩，非常重要，所以放在文章开头。

图片自定义

关闭图片轮播

首先修改下显示的图片。banner图片的位置在blog/themes/hexo-theme-matery/source/medias/banner下，直接修改替换其中的图片为自己想要的即可。

同时，网站默认会读取其中的图片，每天轮替更换。本人对于此功能并无需求，于是将其关闭。

修改blog/themes/hexo-theme-matery/_config.yml的banner字段：

1
2
banner:
  enable: false

此时，banner图片便固定为/medias/banner/0.jpg，只要修改这张图片即可。

关闭彩虹遮罩

默认情况下，banner会被一层自动切换的彩虹色覆盖，会对我设置的音无彩名造成一些美观性损失。而要修改这一设置，这里就需要对主题源码进行一定修改：在blog/themes/matery/source/css/matery.css中，找到.bg-cover:after一行，将其注释：

1
2
3
4
/*.bg-cover:after {
    -webkit-animation: rainbow 60s infinite;
    animation: rainbow 60s infinite;
}*/
增加黑色蒙版遮罩

与此同时，有必要加一层黑色蒙版，以免图片上的白色文字和图片中的白色融为一体。找到.bg-cover:after，将内容改为：

1
2
3
4
5
6
7
8
9
10
11
12
.bg-cover:after {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    left: 0;
    top: 0;
    content: "";
    backdrop-filter: blur(0.1vw);
    background: rgba(0, 0, 0, 0.1);
}

心灵鸡汤自定义

hexo-theme-matery主题的首页还有一张心灵鸡汤的卡片，本学渣由于学生时代看了太多的毫无逻辑、卖弄文笔、劝人学好、积极向善的鸡汤文，对于上述风格的语言有着很大的厌恶感，于是，本站选取一些看上去很丧气，然而在本人的眼里直指生命本质的虚无主义名言，也算是对这个荒唐世界无声的抗议了。

要设置自定义的心灵鸡汤，只要在themes/hexo-theme-matery/_config.yml文件中找到dream行，将内容修改即可，如：

1
2
3
4
5
dream:
  enable: true
  showTitle: true
  title: 人之大孽，在其有生
  text: 你有你的路。我有我的路。至于适当的路，正确的路和唯一的路，这样的路并不存在。--尼采

色彩自定义

在 blog/themes/hexo-theme-matery/source/css/matery.css 文件中，搜索 .bg-color 来修改背景颜色：

1
2
3
4
5
6
7
8
9
10
11
12
/* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色. */
.bg-color {
    background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
}

@-webkit-keyframes rainbow {
   /* 动态切换背景颜色. */
}

@keyframes rainbow {
    /* 动态切换背景颜色. */
}

配色就见仁见智了，需要自行到调色板找到对应的十六进制色彩值，然后替换上述区域的值。

网页背景个性化

与banner图设置类似，找到blog/themes/hexo-theme-matery/_config.yml中的下述字段：

1
2
3
background:
  enable: true
  url: "你想要的图片的本地或图床链接"

网站统计个性化

hexo-theme-matery主题集成了不蒜子统计器，要开启该功能，只要修改blog/themes/hexo-theme-matery/_config.yml中的postInfo，将想要开启的功能改为true：

1
2
3
4
5
6
7
postInfo:
  date: true # 发布日期
  update: true # 更新日期
  wordCount: true # 文章字数统计
  totalCount: true # 站点总文章字数
  min2read: true # 文章阅读时长
  readCount: true # 文章阅读次数

同时，如果想要开启站点运行时长，就将blog/themes/hexo-theme-matery/_config.yml中的time的值改为true

1
2
3
4
5
6
7
8
time:
  enable: true
  year: 2022 # 年份
  month: 01 # 月份
  date: 15 # 日期
  hour: 00 # 小时
  minute: 00 # 分钟
  second: 00 # 秒

添加看板娘

看板娘是一个没什么用的功能，但本人就喜欢没什么用的东西，所以马上安装了。具体过程如下：

首先安装插件：

1
npm install --save hexo-helper-live2d

接下来安装想要的看板娘模型，可用的模型在这个地址：live2d-widget-models ，在其中找到你想要的模型名字，替换下述的{package name} 。

1
npm install {package name}

然后在配置文件blog/_config.yml中添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
live2d: 
  enable: true # 默认 false 
  scriptFrom: local # 默认 
  pluginRootPath: live2dw/ # 插件在站点上的根目录（相对路径） 
  pluginJsPath: lib/ # 脚本文件相对于插件根目录路径 
  pluginModelPath: assets/ # 模型文件相对于插件根目录路径 
  tagMode: false # 标签模式，是否仅替换 live2d tag标签而非插入到所有页面中 
  debug: false # 调试，是否在控制台输出日志 
  model: # https://github.com/xiazeyu/live2d-widget-models 
    use: live2d-widget-model-unitychan # npm install package name 
  display: 
    position: left # 调整位置是左侧还是右侧 
    width: 150 # 调整宽度 
    height: 300 # 调整高度 
  mobile: # 是否在移动设备上显示 
    show: true # 默认 false 
  react: 
    opacity: 0.7 # 调整透明度

然而看板娘插件与网站统计有冲突，需要继续操作：

打开blog/themes/hexo-theme-matery/source/libs/others/busuanzi.pure.mini.js，将其中的b.style.display="none"改为b.style.display=""

本学渣是文科生，不懂原理，总之做完这步，看板娘与统计便可同时运行了。

滚动条个性化

在blog/themes/hexo-theme-matery/source/css中，添加：

1
2
3
4
5
6
7
8
9
10
11
12
13
::-webkit-scrollbar-thumb {
    background-color: #7900FF;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
    border-radius: 5em;
}
::-webkit-scrollbar-track {
    background-color: #0F0E0E;
    border-radius: 5m;
}
::-webkit-scrollbar {
    width: 10;
    height: 15px;
}

手动修改十六位颜色字段即可改滚动条颜色，修改border-radius的值可以改滚动条宽度。

阅读进度条个性化

主题默认的阅读进度条很细，几乎看不到，因此本人将其尺寸放大，方法如下：

在blog/themes/hexo-theme-matery/source/css的matery.css文件中，找到.progress-bar，修改为：

1
2
3
4
5
6
7
8
.progress-bar {
    height: 10px;
    position: fixed;
    bottom: 0;
    z-index: 300;
    background: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
    opacity: 0.8;
}

如果想的话，也可以根据自己喜好修改其中的十六进制色彩值来改变进度条的颜色。

背景动态彩带设置

没什么用处的功能，所以就马上打开了。

在blog/themes/hexo-theme-matery/_config.yml中，找到ribbon，修改为：

1
2
3
4
5
6
7
8
9
10
11
# 背景静止彩带.
ribbon:
  enable: false
  size: 150 # 彩带大小, 默认: 90.
  alpha: 0.6 # 彩带透明度 (0 ~ 1), 默认: 0.6.
  zIndex: -1 # 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1.
  clickChange: false  # 设置是否每次点击都更换彩带.

# 背景动态彩带.
ribbon_dynamic:
  enable: true

环绕光标的不明线条设置

没什么用处的功能，所以就也马上打开了。

在blog/themes/hexo-theme-matery/_config.yml中，找到canvas-nest，修改为：

1
2
3
4
5
6
7
8
#背景canvas-nest
canvas_nest:
  enable: true
  color: 0,0,255 # 线条颜色, 默认: '0,0,0' ；三个数字分别为(R,G,B)，注意用,分割
  pointColor: 0,0,255 # 交点颜色, 默认: '0,0,0' ；三个数字分别为(R,G,B)，注意用,分割
  opacity: 0.7 # 线条透明度（0~1）, 默认: 0.5
  zIndex: -1 # 背景的 z-index 属性，css 属性用于控制所在层的位置, 默认: -1.
  count: 99 # 线条的总数量, 默认: 99

添加防剧透插件

有些时候我们想要实现网页加载时隐藏部分文字，主动点击才显示，这时，防剧透插件就有很大必要了

1
npm install hexo-sliding-spoiler --save

然后便可使用了，方法如下：

1
2
3
{% spoiler Can't See Me %}
content
{% endspoiler %}

效果：

修改默认的数学公式渲染器

在Hexo中，默认的公式渲染器对复杂数学公式的支持不算好，我们可以将其修改为新的渲染器。

  1. 更换引擎：

    1
    2
    npm uninstall hexo-renderer-marked --save
    npm install hexo-renderer-kramed --save

  2. 更改kramed文件配置（看其他大佬的教程说这步很重要）：
    打开文件/node_modules/hexo-renderer-kramed/lib/renderer.js, 作如下更改:

    1
    2
    3
    4
    5
    6
    7
    // Change inline math rule
    function formatText(text) {
      // Fit kramed's rule: $$ + \1 + $$
      // return text.replace(/`\$(.*?)\$`/g, '$$$$$1$$$$');
      // 第67行直接返回text
      return text;
    }

  3. 更改转义冲突：

    找到根目录node_modules\kramed\lib\rules\inline.js

    修改11行，取消对,{,}的转义escape

    1
    2
    //这是修改前的样子  escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
    escape: /^\\([`*\[\]()#$+\-.!_>])/,

    修改20行em

    1
    2
    //这是修改前的样子  em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
    em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

  4. 修改Matery主题内MathJax的CDN加速链接：

    由于本人理解不能的原因，主题内自带的2.7.5版本的链接会导致公式无法渲染，blog/themes/hexo-theme-matery/_config.yml中，找到mathjax选项，将其中的cdn:后链接改为https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js?config=TeX-AMS-MML_HTMLorMML

增加直达评论区的插件

当我们的博客内容较长时，想要抵达评论区就变得麻烦起来：每次都得讲侧边滚动条拉到底才能进行评论，因此，有必要增加一个一件抵达评论区的插件。当然，这部分内容也有大佬做过，本人便继续在这篇文章中重复造一下轮子。

首先，在文件夹themes/hexo-theme-matery\layout\partial中新建back-comment.ejs，填入如下内容：

1
2
3
4
5
6
<!-- 直达评论 -->
<div id="to_comment" class="comment-scroll">
    <a class="btn-floating btn-large waves-effect waves-light" href="#vuttes" title="直达评论">
        <i class="fas fa-comments"></i>
    </a>
</div>

这里主要是要注意href="#vuttes"中填充的内容，如果你用的是valine，只需填写href="#vcomments"，而本人使用的是utterance，默认并无定义标题头，因此本人对utterance也进行了一定瞎改，在themes/hexo-theme-matery/layout/_partial/utteranc.ejs文件开始加了如下代码：

1
2
3
4
5
<style>
	#vuttes dfn {
        font-style: italic;
    }
</style>

当然，你得先安装了utterance才能进行该处的操作，如果你和本人一样，不打算用主题自带的几个评论系统，而是使用utterance，则必须保证已经安装，否则是看不到utteranc.ejs的。同时，上述操作纯粹是本学渣瞎加的，是否有副作用目前不详，慎用。

接下来，在themes/hexo-theme-matery\layout\partial\utterance.ejs文末添加一条，引用第一步的内容：

1
<%- partial('_partial/back-comment.ejs') %>

这一步据说是用来保证只在评论区存在的页面才显示直达评论，防止首页其他地方也出现按钮，然而本学渣测试下来这一步实际没啥用，但鉴于本人并不懂前端代码，就还是写在这里了，如果有大佬懂背后逻辑，还望不吝赐教。

最后在themes/hexo-theme-matery\source\css\matery.css文末中增加：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*直达评论按钮样式*/
.comment-scroll {
    position: fixed;
    right: 15px;
    bottom: 135px;
    padding-top: 15px;
    margin-bottom: 0;
    z-index: 998;
}

.comment-scroll .btn-floating {
    background: linear-gradient(to bottom right, #FF9999 0%, #ff6666 100%);
    width: 48px;
    height: 48px;
}

.comment-scroll .btn-floating i {
    line-height: 48px;
    font-size: 1.8rem;
}

至此，每篇博文便有了一个直达评论区的小插件。

网站优化

链接优化

这个插件是用来优化网页链接的，使用后可以使链接更加整洁，也可以增加被搜索到的概率。

首先安装插件：

1
npm install hexo-abbrlink --save

然后在blog配置文件_config.yml中添加：

1
2
3
4
# hexo-abbrlink config 固定文章地址插件
abbrlink:
  alg: crc16  #算法选项：crc16、crc32，区别见之前的文章，这里默认为crc16丨crc32比crc16复杂一点，长一点
  rep: dec    #输出进制：十进制和十六进制，默认为10进制。丨dec为十进制，hex为十六进制

此时网页链接便变化为整洁的数字类型。

添加搜索功能

首先安装插件：

1
npm install hexo-abbrlink --save

然后在blog配置文件_config.yml中添加：

1
2
3
search:
  path: search.xml
  field: post

此时博客右上角的搜索便上线了。

搜索引擎优化（SEO）

这一部分主要用作搜索引擎优化，增加站点被搜索到的概率。下列的配置本站都还没有做（本学渣还不会），留个坑以后学会怎么做了再写。

谷歌分析

百度分析

提交 robots.txt

代码压缩优化

为了让我们的服务器在传输数据时尽可能地消耗小的流量，我们可以将网页源代码进行去空格化压缩处理，无需担心这会破坏我们的博文，因为对于机器来说，空格是不必要的，其存在只为了让人类写码时能看懂。

而gulp模块便可以进行上述操作。

首先cd到Hexo根目录下，执行：

1
2
3
4
5
6
# 全局安装gulp模块
npm install gulp -g
# 安装各种小功能模块  执行这步的时候，可能会提示权限的问题，最好以管理员模式执行
npm install gulp gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save
# 额外的功能模块
npm install gulp-debug gulp-clean-css gulp-changed gulp-if gulp-plumber gulp-babel babel-preset-es2015 del @babel/core --save

在Hexo根目录新建文件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
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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
var gulp = require("gulp");
var debug = require("gulp-debug");
var cleancss = require("gulp-clean-css"); //css压缩组件
var uglify = require("gulp-uglify"); //js压缩组件
var htmlmin = require("gulp-htmlmin"); //html压缩组件
var htmlclean = require("gulp-htmlclean"); //html清理组件
var imagemin = require("gulp-imagemin"); //图片压缩组件
var changed = require("gulp-changed"); //文件更改校验组件
var gulpif = require("gulp-if"); //任务 帮助调用组件
var plumber = require("gulp-plumber"); //容错组件（发生错误不跳出任务，并报出错误内容）
var isScriptAll = true; //是否处理所有文件，(true|处理所有文件)(false|只处理有更改的文件)
var isDebug = true; //是否调试显示 编译通过的文件
var gulpBabel = require("gulp-babel");
var es2015Preset = require("babel-preset-es2015");
var del = require("del");
var Hexo = require("hexo");
var hexo = new Hexo(process.cwd(), {}); // 初始化一个hexo对象

// 清除public文件夹
gulp.task("clean", function () {
    return del(["public/**/*"]);
});

// 下面几个跟hexo有关的操作，主要通过hexo.call()去执行，注意return
// 创建静态页面 （等同 hexo generate）
gulp.task("generate", function () {
    return hexo.init().then(function () {
        return hexo
            .call("generate", {
                watch: false
            })
            .then(function () {
                return hexo.exit();
            })
            .catch(function (err) {
                return hexo.exit(err);
            });
    });
});

// 启动Hexo服务器
gulp.task("server", function () {
    return hexo
        .init()
        .then(function () {
            return hexo.call("server", {});
        })
        .catch(function (err) {
            console.log(err);
        });
});

// 部署到服务器
gulp.task("deploy", function () {
    return hexo.init().then(function () {
        return hexo
            .call("deploy", {
                watch: false
            })
            .then(function () {
                return hexo.exit();
            })
            .catch(function (err) {
                return hexo.exit(err);
            });
    });
});

// 压缩public目录下的js文件
gulp.task("compressJs", function () {
    return gulp
        .src(["./public/**/*.js", "!./public/libs/**"]) //排除的js
        .pipe(gulpif(!isScriptAll, changed("./public")))
        .pipe(gulpif(isDebug, debug({ title: "Compress JS:" })))
        .pipe(plumber())
        .pipe(
            gulpBabel({
                presets: [es2015Preset] // es5检查机制
            })
        )
        .pipe(uglify()) //调用压缩组件方法uglify(),对合并的文件进行压缩
        .pipe(gulp.dest("./public")); //输出到目标目录
});

// 压缩public目录下的css文件
gulp.task("compressCss", function () {
    var option = {
        rebase: false,
        //advanced: true, //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
        compatibility: "ie7" //保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
        //keepBreaks: true, //类型：Boolean 默认：false [是否保留换行]
        //keepSpecialComments: '*' //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
    };
    return gulp
        .src(["./public/**/*.css", "!./public/**/*.min.css"]) //排除的css
        .pipe(gulpif(!isScriptAll, changed("./public")))
        .pipe(gulpif(isDebug, debug({ title: "Compress CSS:" })))
        .pipe(plumber())
        .pipe(cleancss(option))
        .pipe(gulp.dest("./public"));
});

// 压缩public目录下的html文件
gulp.task("compressHtml", function () {
    var cleanOptions = {
        protect: /<\!--%fooTemplate\b.*?%-->/g, //忽略处理
        unprotect: /<script [^>]*\btype="text\/x-handlebars-template"[\s\S]+?<\/script>/gi //特殊处理
    };
    var minOption = {
        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"
        removeComments: true, //清除HTML注释
        minifyJS: true, //压缩页面JS
        minifyCSS: true, //压缩页面CSS
        minifyURLs: true //替换页面URL
    };
    return gulp
        .src("./public/**/*.html")
        .pipe(gulpif(isDebug, debug({ title: "Compress HTML:" })))
        .pipe(plumber())
        .pipe(htmlclean(cleanOptions))
        .pipe(htmlmin(minOption))
        .pipe(gulp.dest("./public"));
});

// 压缩 public/medias 目录内图片
gulp.task("compressImage", function () {
    var option = {
        optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级）
        progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
        interlaced: false, //类型：Boolean 默认：false 隔行扫描gif进行渲染
        multipass: false //类型：Boolean 默认：false 多次优化svg直到完全优化
    };
    return gulp
        .src("./public/medias/**/*.*")
        .pipe(gulpif(!isScriptAll, changed("./public/medias")))
        .pipe(gulpif(isDebug, debug({ title: "Compress Images:" })))
        .pipe(plumber())
        .pipe(imagemin(option))
        .pipe(gulp.dest("./public"));
});
// 执行顺序： 清除public目录 -> 产生原始博客内容 -> 执行压缩混淆 -> 部署到服务器
gulp.task(
    "build",
    gulp.series(
        "clean",
        "generate",
        "compressHtml",
        "compressCss",
        "compressJs",
        "compressImage",
        gulp.parallel("deploy")
    )
);

// 默认任务
gulp.task(
    "default",
    gulp.series(
        "clean",
        "generate",
        gulp.parallel("compressHtml", "compressCss", "compressJs","compressImage")
    )
);
//Gulp4最大的一个改变就是gulp.task函数现在只支持两个参数，分别是任务名和运行任务的函数

如果你不想进行图片压缩，可以把第154行的"compressImage", 和第165行的"compressImage"去掉。

然而，由于本人看的大佬在写教程时，版本还较旧，当前直接使用会报错"[ERR_REQUIRE_ESM]: require() not supported"，查询谷歌后得知，这主要是因为gulp-imagemin在最新版本中不再支持CommonJS，因此需将其替换为旧版本：

1
npm install --save-dev gulp-imagemin@7.1.0

这之后，只需执行gulp便可完成hexo cl && hexo g的工作，如果你的博客不是本人这样的双层结构，那也可以直接执行gulp build，一键静态化+远端部署。

当然，本人由于存在中英双站点，就要稍微多一点操作：

本地部署命令：

1
cd /home/aa/blog && gulp && cd /home/aa/blog/blogen && gulp && cd /home/aa/blog && cp -r /home/aa/blog/blogen/public/. /home/aa/blog/public/en/ && hexo s

远端部署命令：

1
cd /home/aa/blog && gulp && cd /home/aa/blog/blogen && gulp && cd /home/aa/blog && cp -r /home/aa/blog/blogen/public/. /home/aa/blog/public/en/ && hexo d

图片懒加载(Lazy-Load)

由于Hexo博客属于静态网页，用户浏览时会直接下载网页的全部代码，然后在本地加载，因此当文章内数据量较大时，则会加载缓慢，而数据量大的文件首要的就是图片。图片懒加载方法则是当用户浏览到某张图时，才开始加载，可以相对提升一些性能。

配置过程如下：

首先在Hexo目录下执行：

1
npm install hexo-lazyload-image --save

然后在你的 Hexo 目录的配置文件/blog/_config.yml中添加配置：

1
2
3
4
lazyload:
  enable: true
  onlypost: true
  loadingImg: /images/loading.png

onlypost指是否仅文章中的图片做懒加载，如果为 false, 则主题中的其他图片，也会做懒加载。

loadingImg为图片未加载时的代替图，笔者没有配置，故不仔细研究了。

在基础配置完成后，我们会发现图片必须进入到显示范围内才会加载，这会有一定的卡顿感，因此，我们可以让图片提前一定像素加载，以优化用户体验：

打开blog/node_modules/hexo-lazyload-image/lib下的simple-lazyload.js文件，找到function elementInViewport(el)代码块，将其改为：

1
2
3
4
5
6
7
8
function elementInViewport(el) {
	var rect = el.getBoundingClientRect();
	return (
		rect.bottom >= 0
		&& rect.left >= 0
		&& rect.top <= (window.innerHeight +240 || document.documentElement.clientHeight +240)
	);
}

这样图片便会提早240像素加载。

参考资料

Hexo进阶之各种优化

基于Hexo的matery主题搭建博客并深度优化

hexo(matery)背景、滚动条优化+增加点击跳评论

Hexo设置永久链接

Hexo进阶：基于matery主题的网站配置教程

hexo增加小组件

发表于 更新于 分类于 本文字数： 4.9k 阅读时长 ≈ 4 分钟

2023年11月11日更新：由于本站全面重构迁移至Next主题，本文内容已不再适用，正式归档。

前言

几年前在本科二年级时候，笔者曾经在学校的一个计算机应用比赛中，玩过Hexo建站作为项目的前端，不过当时用的是网上搜到的大佬的一键部署脚本，对于脚本中具体做了些什么操作，本人实际并不甚了解，只记得下载了许多不明所以的文件和创建了许多不明所以的目录。近期本学渣突然想怀怀旧，且正好想折腾一个写随笔的个人博客，便重头又学习了一下，谨以此文作为这段搭建的一个记录。

Hexo 简介

这一部分与文章内容其实并无关系，因为本文核心目的是用作日志性质，然而作为文科生，还是要象征性的做一下起承转合，如果上来就直接开始Hexo部署，难免会有读者心生疑惑：Hexo是啥？因此，在文章开头，本学渣还是要做一个简介，以引入主题。

根据Hexo的官方文档的定义：

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

可知，本质上Hexo是一个设计用来部署博客的程序。当然，部署博客还有许多其他方式，如WordExpress，Ghost等等，而这些程序部署出来的博客可以分为动态和静态两类，基于Hexo的博客属于静态博客。

关于动态和静态，网络上讨论很多，有人认为静态好，而有人更喜欢动态。由于本学渣只是一个文科生，对于其具体的区别和技术细节并不明白，在这里就不多讨论了，总之对于我来说，Hexo属于最易于上手且维护成本最低的方案，部署下来没有遇到什么功能缺失问题，因此，我便选择了利用Hexo搭建这个博客。

了解了Hexo为何，那么我们就可以正式开始了。

前置工作

依稀记得几年前本人是用Win10系统进行的操作，然而随着这些年我的折腾技能略微见长，再加上本人并不是搞开发的，在win10主力机上装一大堆开发相关的东西会让我很不舒服（没什么具体原因，单纯的个人强迫症），因此这次我选择单独开一台Linux的虚拟机来专门用作博客机。

那么第一步便是创建一台Linux虚拟机，这部分与文章主题关系不大，略过不谈，总之便是按照本人习惯，在VMWare中准备好了一台Ubuntu的Server版本虚机。机器命名为Blog。

接下来SSH连入Blog，进行具体配置。

依赖下载

Node.js 安装

由于Hexo是基于Node.js开发，第一步便是安装Node.js。

首先添加源，在命令行中输入：

1
curl -fsSL https://deb.nodesource.com/setup_17.x | sudo -E bash -

接下来下载并安装，在命令行中输入：

1
sudo apt-get install -y nodejs

此时Node.js搞定。

Git 安装及配置

Hexo还需要Git的存在来进行其他操作，安装很简单：

1
sudo apt-get install git-core

不过Git安装完成后并未结束，还需要进行个人信息的配置，否则之后部署Hexo时会报错

  1. 添加用户名
1
git config --global user.name "你的用户名"
  1. 添加邮箱
1
git config --global user.email "你的邮箱"

笔者测试下来，邮箱随便输即可，不需要填真实邮箱。不过为了Github页面中显示的Contributors为你本人，建议还是填绑定了Github的邮箱。

此时Git搞定。

Hexo 安装及启动

Hexo安装

安装指令依然很简单：

1
npm install -g hexo-cli

此时所有的基础安装工作结束，可以开始正式部署。

Hexo 启动

Hexo的启动命令会在当前的PWD下创建所有文件，且需要PWD为空文件夹，此时需要计划文件想放在哪里。
本人就直接在开机默认目录下创建了blog文件夹：

1
mkdir blog && cd blog

接下来：

1
hexo init

等待命令行跑完，此时敲ls指令便可看到基础文件已经生成。
万事俱备，只要敲下

1
hexo start

不出意外，即可看到

“Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.”

之后只要浏览器访问博客主机的IP加端口号：如10.10.10.1:4000，就可以看到初始的博客站点啦。

Hexo 配置及使用

初始化完成后，博客中会默认生成一篇”Helllo World”的文章，内容包括一些简单教程。

Hexo 配置

主题配置

到此，博客虽然跑了起来，但说实话，还是比较简陋的，这时候主题功能就派上了用场。

由于Hexo的社区相当活跃，因此有许多大佬写好的现成的主题可以使用，可以网上搜索并按需选取。本人选用的是"hexo-theme-matery"，总体还是比较符合我的审美。

配置方法也很简单，首先

1
cd themes

在确定PWD为blog目录下的themes时，

1
git clone https://github.com/blinkfox/hexo-theme-matery.git

这样就下载完毕了。

接下来，打开blog根目录下的_config.yml文件，找到其中的theme字段，将其改为：

theme: hexo-theme-matery

然后先按Crtl + C

再命令行中输入：

1
hexo s

也就是重启博客。

此时再次访问即可看到美观的站点了。

Github远端部署配置

搭建好了博客，总是要放置在公网环境中的，否则意义就不是很大了，而Hexo本身支持许多种本地向公网部署的方案，非常方便。

笔者选择的是部署到Github的Pages之上，主要是因为免费，且无需考虑SSL加密，证书之类的繁琐事。虽然许多意义上说，免费的解决方案总有各种不足，遇到问题时的维护时间很可能超出预期，导致很多时候免费的才是最贵的，但无论如何，笔者总是免费先爽一把再说。

要部署博客到Github上，首先你要有Github账号，此处不多赘述账号注册过程。

登录Github，在右上角的+号中，点选 New Repository，然后在Repository name中，输入你的github用户名.github.io，然后点下方的Creat repository完成创建。

接下来，点击右上角头像—Settings—Developer settings—Personal access tokens—Generate new token，

在权限选项中将有效期设为不过期，然后勾选Repo—最后点Generate token生成密匙

复制生成的ghp_开头的一串字符

在blog下的_config.yml文件中，找到deploy字段，将其改为：

1
2
3
4
deploy:
  type: git
  repo: https://ghp_你的密钥@github.com/你的用户名/你的用户名.github.io.git
  branch: master

保存文件，然后输入下述指令：

1
hexo deploy

不出意外，此时Github库中会出现你的博客文件，然后访问 https://你的用户名.github.io 即可进入你的博客。

Hexo 使用

总体来说，Hexo的使用相当简单，发博客主要就是下面几步轮着做：

创建文章

1
hexo new '文章标题'

撰写内容

Hexo管理的所有博客都是以MarkDown格式写作，因此，在写博客前，作者有必要了解一定的MarkDown语法。对于普通用户来说，熟练使用还是有一定门槛的。不过笔者在创作这篇文章前，几乎也是完全不会用MarkDown的，然而写了两三个小时后，大体操作就没有问题了，所以无基础的初学者也不用过于恐惧。

在这篇文章中，我就不多赘述具体的语法细节，未来可能会另开一篇文章，总结下其常见的用法（喜闻乐见的重复造轮子环节）。

启动本地服务（一般用作预览）

1
hexo s

生成文件

1
hexo g

部署到远端

1
hexo d

双语支持

最后，考虑到可能的（?）外文读者，笔者产生了添加英文站点的需求，而虽然Hexo文档中推荐了了一款国际化插件 Internationalization (i18n)，但是它的功能仅限于翻译标题，没什么实质用处，在各种网上冲浪后，我找到了一些前辈的解决方案，秉承着重复造轮子的原则，我将其搬运于此。

这套解决方案的核心原理很简单：克隆建好的中文站，然后将克隆体全局修改为英文版，最后在两个站点间互相插入链接。

首先将blog文件夹中除了node_modules以外的所有文件复制到新的一个文件中（笔者使用blogen），然后将该文件移动至博客文件夹中（下文中的aa为笔者的用户名，读者按需修改）。

1
2
3
4
5
6
cd /home/aa
mkdir blogen
cp -r /home/aa/blog/* /home/aa/blogen
rm -r /home/aa/blogen/node_modules
cp -r /home/aa/blogen /home/aa/blog/
rm -rf /home/aa/blogen

接着进入blogen目录中

1
cd blogen

重新下载依赖

1
npm install

修改语言

在blog下的_config.yml文件中，确保language为zh-CN，

然后在blogen下的_config.yml文件中，修改language为en，

修改根目录

在blog下的_config.yml文件中，将root: 后改为/，

然后在blogen下的_config.yml文件中，将root: 后改为/en，

修改主题

"hexo-theme-matery"主题会自动对全局语言进行适配，所以只需要添加另外语言站点的索引即可

首先对于中文站，修改blog/themes/hexo-theme-matery下的_config.yml，在menu中新增一条：

1
2
English Site:
    url: ‘你的url’/en

而对于英文站，修改blogen/themes/hexo-theme-matery下的_config.yml，在menu中新增一条：

1
2
中文站:
    url: ‘你的url’

此时，利用下述命令重新启动博客：

1
cd /home/aa/blog && hexo clean && hexo g &&cd /home/aa/blog/blogen && hexo clean && hexo g && cd /home/aa/blog && cp -r /home/aa/blog/blogen/public/. /home/aa/blog/public/en/ && hexo s

再次进入博客便可看到右上角新增的指向另一个语言的站点图标。

这之后，只要在文档编辑器里写好相应语言的文章，便可一键部署。

Hexo升级

当我们的博客运行一段时间后，很有可能Hexo本体有了版本更新，虽然更新一般对于本人来说没有什么用，但强迫症发时，总会想要手里的东西是最新版，因此，这里也记录下框架更新的方式。

注意：这里的部分本学渣不懂具体做了什么操作，只是复刻别的地方看到的大佬的教程，不保证不会出问题，仅供参考！！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
npm install -g hexo-cli
hexo version

npm install -g npm-check
npm-check

npm install -g npm-upgrade
npm-upgrade

npm update -g
npm install -g npm

hexo clean #清理hexo数据并重新生成页面并部署
hexo g -s
hexo d

到这里，Hexo的基础框架就更新完了，至于主题文件，由于修改了太多源码，实在没法更新了，最好就是删除+重新拉取主题源码，然后重新配置，太麻烦了，本人就不搞了。

参考资料

Hexo Documentation

Hexo添加多语言支持「国际化i18n」

超详细Hexo+Github博客搭建小白教程

hexo-theme-matery

0%