Hexo博客进阶美化设置

发表于 更新于 分类于 阅读次数： 本文字数： 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增加小组件