概述
相信有很多小伙伴在选择了自己的主题，并且在官方文档的指导下配置了自己的主题后，仍然对其中的有些方面不太满意，但是又不想换主题的时候，那么config的配置已经不能满足你了，让我们从源文件下手，对其进行大刀阔斧的改革吧！
想要修改源文件，那么需要先了解你所选的主体架构，以下均已hexo-theme-matery为例，请根据你的主题进行对应，并且尽量选择使用人数多且文档完善的主题，否则修改会十分困难，如果你是高手的话就当我这句话没说。
（注：这里只是大致提了一下，想更详细的了解可以看看《hexo-theme-matery美化》和《hexo博客搭建全过程》）
├── languages 语言文件，用于国际化（不是很重要，除非你想向全球推广）
├── layout 页面模板文件，决定了网站内容的呈现方式
├── scripts Hexo 脚本（这是matery没有的，但是部分主题有）
└── source 主题资源文件，包括页面样式，脚本，字体等
博客的目录结构如下：
- node_modules
- public
- scaffolds
- source
- _data
- _posts
- about
- archives
- categories
- friends
- tags
- themes
node_modules是node.js各种库的目录，public是生成的网页文件目录，scaffolds里面就三个文件，存储着新文章和新页面的初始设置，source是我们最常用到的一个目录，里面存放着文章、各类页面、图像等文件，themes存放着主题文件，一般也用不到。
我们平时写文章只需要关注source/_posts这个文件夹就行了。
1.layout
每一个ejs对应的同名page的布局，例：contact是文章的布局，也有主题使用的article在_partial里的，一般如下：
| 模板 |
用途 |
回调 |
| index |
首页 |
|
| post |
文章 |
index |
| page |
分页 |
index |
| archive |
归档 |
index |
| category |
分类归档 |
archive |
| tag |
标签归档 |
archive |
注：文件或文件夹开头名称为 _（下划线线）或隐藏的文件会被忽略
2.scripts
注：部分主题在source\js
3.source
这里只讲了安装和简单的配置，想知道完整的使用教程可以跳转这篇《hexo插件推荐及简明使用教程》文章
代码高亮
从 Hexo5.0 版本开始自带了 prismjs 代码语法高亮的支持，本主题对此进行了改造支持。
如果你的博客中曾经安装过 hexo-prism-plugin 的插件，那么你须要执行 npm uninstall hexo-prism-plugin 来卸载掉它，否则生成的代码中会有 { 和 } 的转义字符。
然后，修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并将 prismjs.enable 的值设置为 true，主要配置如下：
highlight:
enable: false
line_number: true
auto_detect: false
tab_replace: ''
wrap: true
hljs: false
prismjs:
enable: true
preprocess: true
line_number: true
tab_replace: ''
搜索
本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索，安装命令如下：
npm install hexo-generator-search --save
在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：
search:
path: search.xml
field: post
中文链接转拼音
如果你的文章名称是中文的，那么 Hexo 默认生成的永久链接也会有中文，这样不利于 SEO，且 gitment 评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件使在生成文章时生成中文拼音的永久链接。
安装命令如下：
npm i hexo-permalink-pinyin --save
在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：
permalink_pinyin:
enable: true
separator: '-' # default: '-'
注：除了此插件外，hexo-abbrlink 插件也可以生成非中文的链接。
博主选择的是hexo-abbrlink 插件，因为感觉拼音有点傻，而且这个配置可选项比较多
安装命令如下：
npm install hexo-abbrlink --save
在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：
# abbrlink config
abbrlink:
alg: crc32 #support crc16(default) and crc32
rep: hex #support dec(default) and hex
drafts: false #(true)Process draft,(false)Do not process draft. false(default)
# Generate categories from directory-tree
# depth: the max_depth of directory-tree you want to generate, should > 0
auto_category:
enable: true #true(default)
depth: #3(default)
over_write: false
auto_title: false #enable auto title, it can auto fill the title by path
auto_date: false #enable auto date, it can auto fill the date by time today
force: false #enable force mode,in this mode, the plugin will ignore the cache, and calc the abbrlink for every post even it already had abbrlink.
如果你想要在文章中显示文章字数、阅读时长信息，可以安装 hexo-wordcount插件。
安装命令如下：
npm i --save hexo-wordcount
然后只需在本主题下的 _config.yml 文件中，将各个文章字数相关的配置激活即可：
postInfo:
date: true
update: false
wordCount: false # 设置文章字数统计为 true.
totalCount: false # 设置站点文章总字数统计为 true.
min2read: false # 阅读时长.
readCount: false # 阅读次数.
添加emoji表情支持
本主题新增了对emoji表情的支持，使用到了 hexo-filter-github-emojis 的 Hexo 插件来支持 emoji表情的生成，把对应的markdown emoji语法（::,例如：:smile:）转变成会跳跃的emoji表情，安装命令如下：
本主题中还使用到了 hexo-generator-feed 的 Hexo 插件来做 RSS，安装命令如下：
npm install hexo-generator-feed --save
在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：
feed:
type: atom
path: atom.xml
limit: 20
hub:
content:
content_limit: 140
content_limit_delim: ' '
order_by: -date
hexo-tag-mmedia 是 MonoLogueChi 自用的一个媒体插入插件，在添加部分功能后发布给大家使用。
已支持的平台
未来可能支持
- [YouTube](https://www.u2sb.top/docs/hexo-tag-mmedia/)
- [ArtPlayer](https://github.com/zhw2590582/ArtPlayer)
安装
npm install hexo-tag-mmedia --save
此插件与以下插件冲突
- hexo-tag-aplayer
- hexo-tag-dplayer
- hexo-tag-bilibili
如有安装，使用前请卸载。
npm uninstall hexo-tag-aplayer
npm uninstall hexo-tag-dplayer
npm uninstall hexo-tag-bilibili
config.yml
如果不需要自定义设置，不需要修改 _config.yml ，直接使用即可
mmedia:
aplayer:
cdn: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js
style_cdn: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css
default:
meting:
cdn: https://cdn.jsdelivr.net/npm/meting/dist/Meting.min.js
api:
default:
dplayer:
cdn: https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js
style_cdn: https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css
hls_cdn: https://cdn.jsdelivr.net/npm/hls.j/dist/hls.min.js
dash_cdn: https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js
shaka_dash_cdn: https://cdn.jsdelivr.net/npm/shaka-player/dist/shaka-player.compiled.js
flv_cdn: https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js
webtorrent_cdn: https://cdn.jsdelivr.net/npm/webtorrent/webtorrent.min.js
default:
使用
代码：
演示效果：
YOUTUBE
也可以等hexo-tag-mmedia插件支持
npm install hexo-tag-youtube-responsive --save
添加音乐
npm install hexo-tag-cplayer --save
添加像这样的代码到你的文章中。cplayer 将会生成在那里。
{% cplayer [autoplay] [yaml|cson|json] %}
# type your config here
{% endcplayer %}
SEO优化
npm install hexo-generator-seo-friendly-sitemap --save
sitemap:
path: sitemap.xml
npm install --save hexo-blog-encrypt
_config.yml
# Security
encrypt: # hexo-blog-encrypt
abstract: 有东西被加密了, 请输入密码查看.
message: 您好, 这里需要密码.
tags:
- {name: tagName, password: 密码A}
- {name: tagName, password: 密码B}
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: 抱歉, 这个密码看着不太对, 请再试试.
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.
安装模块:
npm install --save hexo-helper-live2d
试试 yarn add hexo-helper-live2d, 据说高能的yarn会比垃圾npm少很多麻烦呢。 Yarn
_config.yml
live2d:
enable: true
scriptFrom: local
model:
use: live2d-widget-model-z16 #模型选择
display:
position: left #模型位置
width: 150 #模型宽度
height: 300 #模型高度
mobile:
show: false #是否在手机端显示
用法
有三种方法添加模块名
a. live2d_models子目录名称
- 在您博客根目录下创建一个
live2d_models 文件夹.
- 在此文件夹内新建一个子文件夹.
- 将你的 Live2D 模型复制到这个子文件夹中.
- 将子文件夹的名称输入
_config.yml 的 model.use 中.
b. 相对于博客根目录的自定义路径
您可直接输入相对于博客根目录的自定义路径到 model.use 中.
示例: ./wives/wanko
c. npm 模块名
npm install live2d-widget-model-z16
d. 你的CDN
如果你是没有CDN会死星人,直接将 .model.json 的url地址输入 model.use.
添加追番页面
npm install hexo-bilibili-bangumi --save
将下面的配置写入站点的配置文件 _config.yml 里(不是主题的配置文件).
bangumi:
enable: true
path:
vmid:
title: '追番列表'
quote: '生命不息，追番不止！'
show: 1
loading:
metaColor:
color:
webp:
progress:
- enable: 是否启用
- path: 番剧页面路径，默认
bangumis/index.html
- vmid: 哔哩哔哩番剧页面的
vmid(uid),如何获取？
- title: 该页面的标题
- quote: 写在页面开头的一段话，支持 html 语法，可留空。
- show: 初始显示页面：
0: 想看, 1: 在看, 2: 看过，默认为1
- loading: 图片加载完成前的 loading 图片
- metaColor: meta 部分(简介上方)字体颜色
- color: 简介字体颜色
- webp: 番剧封面使用
webp格式(此格式在safari浏览器下不显示，但是图片大小可以缩小 100 倍左右), 默认true
- progress: 获取番剧数据时是否显示进度条，默认
true
2.魔改
官方功能增强
在官方的基础上进行修改。
修改 banner 图和文章特色图
你可以直接在 /source/medias/banner 文件夹中更换你喜欢的 banner 图片，主题代码中是每天动态切换一张，只需 7 张即可。如果你会 JavaScript 代码，可以修改成你自己喜欢切换逻辑，如：随机切换等，banner 切换的代码位置在 /layout/_partial/bg-cover-content.ejs 文件的 <script></script> 代码中：
修改为如下代码，则有60种随机图
<% if (theme.banner.enable) { %>
<script>
var bannerUrl = "<%- theme.jsDelivr.url %><%- url_for('/medias/banner/') %>" + new Date().getMinutes() + '.jpg';
$('.bg-cover').css('background-image', 'url(' + bannerUrl + ')');
</script>
添加樱花特效
CDN版
然后在 /themes/matery/layout/layout.ejs 中添加如下代码：
<% if (theme.sakura.enable) { %>
<script type="text/javascript">
var windowWidth = $(window).width();
if (windowWidth > 768) {
document.write('<script src="https://cdn.jsdelivr.net/gh/fz6m/Private-web@1.2/js/sakura/sakura-reduce.js"><\/script>');
}
</script>
<% } %>
可以修改src的js文件名来改变樱花的数量
| 文件名 |
说明 |
| sakura-small.js |
少量樱花 |
| sakura-reduce.js |
樱花相对原效果减少 1/4 |
| sakura-original.js |
樱花数量不变（原效果） |
| sakura-half.js |
樱花相对原效果数量减半 |
对于想安静阅读并且保持樱花效果的，这里推荐的是第一种少量 sakura-small.js 或第二种减半 sakura-half.js
本地版
在 /themes/matery/source/js 新建文件 sakura.js，并添加如下代码
Download Now,然后在 /themes/matery/layout/_partial/head.ejs 中添加如下代码：
<% if (theme.sakura.enable) { %>
<script type="text/javascript">
var windowWidth = $(window).width();
if (windowWidth > 768) {
document.write('<script type="text/javascript" src="/js/sakura.js"></script>');
}
</script>
<% } %>
在主题配置文件_config.yml中配置:
sakura:
enable: true
添加雪花特效
CDN版
然后在 /themes/matery/layout/_partial/head.ejs 中添加如下代码：
<% if (theme.xuehuapiaoluo.enable) { %>
<script type="text/javascript">
var windowWidth = $(window).width();
if (windowWidth > 768) {
document.write('<script src="https://cdn.jsdelivr.net/gh/guhailong18/guhailong18.github.io/js/xuehuapiaoluo.js"><\/script>');
}
</script>
<% } %>
cdn链接可以替换为如下的或自己的：
github:
jsdelivr:https://cdn.jsdelivr.net/gh/guhailong18/guhailong18.github.io/js/xuehuapiaoluo.js
gitee:https://gitee.com/xuexizhe6/guke/raw/master/js/xuehuapiaoluo.js
coding:
本地版
在 /themes/matery/source/js 新建文件 xuehuapiaoluo.js，并添加如下代码
Download Now
然后在 /themes/matery/layout/_partial/head.ejs 中添加如下代码：
<% if (theme.xuehuapiaoluo.enable) { %>
<script type="text/javascript">
var windowWidth = $(window).width();
if (windowWidth > 768) {
document.write('<script type="text/javascript" src="/js/xuehuapiaoluo.js"></script>');
}
</script>
<% } %>
在主题配置文件_config.yml中配置:
xuehuapiaoluo:
enable: true
相信看了以上的示例,聪明的读者已经学会如何做一个
代码雨: https://www.cnblogs.com/zhengbin/p/5023640.html
添加鼠标点击出现文字特效
CND版
然后在 /themes/matery/layout/layout.ejs 中添加如下代码：
<% if (theme.wenzi.enable) { %>
<script src="https://cdn.jsdelivr.net/gh/guhailong18/guhailong18.github.io/js/wenzi.js"></script>
<% } %>
cdn链接可以替换为如下的或自己的：
github:
jsdelivr: https://cdn.jsdelivr.net/gh/guhailong18/guhailong18.github.io/js/wenzi.js
gitee:https://gitee.com/xuexizhe6/guke/raw/master/js/wenzi.js
coding:
在主题配置文件_config.yml中配置:
本地版
<% if (theme.wenzi.enable) { %>
<script src="/js/wenzi.js" type="text/javascript"></script>
<% } %>
添加鼠标点击烟花爆炸效果
CND版
然后在 /themes/matery/layout/layout.ejs 中添加如下代码：
<% if (theme.fireworks.enable) { %>
<canvas class="fireworks" style="position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none;"></canvas>
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
<script type="text/javascript" src="/js/fireworks.js"></script>
<% } %>
cdn链接可以替换为如下的或自己的：
在主题配置文件_config.yml中配置:
本地版
CND版
然后在 /themes/matery/layout/_partial/head.ejs 中添加如下代码：
cdn链接可以替换为如下的或自己的：
github:
jsdelivr:
gitee:
coding:
在主题配置文件_config.yml中配置:
本地版
添加标签页题目效果
<script type="text/javascript">
var OriginTitile = document.title,
st;
document.addEventListener("visibilitychange", function () {
document.hidden ? (document.title = "主人，你竟然抛弃了我(；′⌒`)", clearTimeout(st)) : (document.title =
"主人回来啦٩(๑>◡<๑)۶ ", st = setTimeout(function () {
document.title = OriginTitile
}, 3e3))
})
</script>
CDN版
<% if (theme.cursor.on){ %>
<style>
body{
background: #3f3f3f;
cursor: url(<%- config.root %><%- theme.cursor.cursor_0 %>), url("<%- config.root %><%- theme.cursor.cursor_1 %>"), auto;
}
</style>
<% } %>
cdn链接可以替换为如下的或自己的：
github:
jsdelivr:
gitee:
coding:
本地版
3.优化
SEO优化
网站推广是一个比较烦人的事情，特别是对于专心搞技术的来说，可能就不是很擅长，那么怎么才能让别人知道我们网站呢？也就是说我们需要想办法让别人通过搜索就可以搜索到博客的内容，给我们带来自然流量，这就需要seo优化,让我们的站点变得对搜索引擎友好
SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”。SEO是指通过站内优化比如网站结构调整、网站内容建设、网站代码优化等以及站外优化。
1.1 让百度收录你的站点
首先要做的就是让各大搜索引擎收录你的站点，我们在刚建站的时候各个搜索引擎是没有收录我们网站的，在搜索引擎中输入site:<域名>,如果如下图所示就是说明我们的网站并没有被百度收录。我们可以直接点击下面的“网址提交”来提交我们的网站
在填完网址选择完网站的类型之后需要验证网站的所有权，验证网站所有权的方式有三种：
- 文件验证。
-
html标签验证
-
CNAME解析验证（推荐使用）
其实使用哪一种方式都可以，都是比较简单的。
但是一定要注意，使用文件验证文件存放的位置需要放在sourc文件夹下，如果是html文件那么hexo就会将其编译，所以必须要在html头部加上的layout:false，这样就不会被hexo编译。（如果验证文件是txt格式的就不需要）
1.1.2 向百度提交链接
然后我们就可以将我们生成的sitemap文件提交给百度，还是在百度站长平台，找到链接提交，这里我们可以看到有两种提交方式，自动提交和手动提交，自动提交又分为主动推送、自动推送和sitemap
如何选择链接提交方式
- 主动推送：最为快速的提交方式，推荐您将站点当天新产出链接立即通过此方式推送给百度，以保证新链接可以及时被百度收录。
- 自动推送：最为便捷的提交方式，请将自动推送的
JS代码部署在站点的每一个页面源代码中，部署代码的页面在每次被浏览时，链接会被自动推送给百度。可以与主动推送配合使用。
-
sitemap：您可以定期将网站链接放到sitemap中，然后将sitemap提交给百度。百度会周期性的抓取检查您提交的sitemap，对其中的链接进行处理，但收录速度慢于主动推送。
- 手动提交：一次性提交链接给百度，可以使用此种方式。
一般主动提交比手动提交效果好，这里介绍主动提交的三种方法
从效率上来说：
主动推送>自动推送>sitemap
1.1.1 验证网站所有权
登录百度站长搜索资源平台：http://zhanzhang.baidu.com， 只要有百度旗下的账号就可以登录，登录成功之后在站点管理中点击添加网站然后输入你的站点地址。
注意，这里需要输入我们自己购买的域名,不能使用xxx.github.io之类域名.因为github是不允许百度的spider（蜘蛛）爬取github上的内容的，所以如果想让你的站点被百度收录，只能使用自己购买的域名
1.2 让google收录你的站点
1.2.1 操作步骤
相比于百度，google的效率实在不能更快，貌似十分钟左右站点就被收录了，其实方法是和百度是一样的。
google站点平台：https://www.google.com/webmasters/
1.2.2 提交 robots.txt:
robots.txt 是一种存放于网站根目录下的 ASCII 编码的文本文件，它的作用是告诉搜索引擎此网站中哪些内容是可以被爬取的，哪些是禁止爬取的。robots.txt 放在博客目录下的 source 文件夹中，博客生成后在站点目录 /public/ 下。
我的 robots.txt 文件内容如下：
1.4 优化你的url
seo`搜索引擎优化认为，网站的最佳结构是**用户从首页点击三次就可以到达任何一个页面**，但是我们使用`hexo`编译的站点打开文章的`url`是：`sitename/year/mounth/day/title`四层的结构，这样的`url`结构很不利于`seo`，爬虫就会经常爬不到我们的文章，于是，我们需要优化一下网站文章`url
方案一：
我们可以将url直接改成sitename/title的形式，并且title最好是用英文，在根目录的配置文件下修改permalink如下：
url: https://sunhwee.com
root: /
permalink: :title.html
permalink_defaults:
方案二：
使用插件优化url
插件hexo-abbrlink实现了这个功能，它将原来的URL地址重新进行了进制转换和再编码。
安装hexo-abbrlink。
npm install hexo-abbrlink --save
Bash
配置博客根目录下的_config.yml文件。
permalink: archives/:abbrlink.html
abbrlink:
alg: crc32
rep: hex
Yml
运行hexo clean和hexo g命令来重新生成文件看看，可以清楚的看到，URL结构成功变为了3层。
来源: 洪卫の博客
作者: 洪卫
文章链接: https://sunhwee.com/posts/6e8839eb.html#toc-heading-59
本文章著作权归作者所有，任何形式的转载都请注明出处。
1.5 其他seo优化
seo优化应该说是一个收益延迟的行为，可能你做的优化短期内看不到什么效果，但是一定要坚持，seo优化也是有很深的可以研究的东西，从我们最初的网站设计，和最基础的标签的选择都有很大的关系，网站设计就如我们刚刚说的，要让用户点击三次可以到达网站的任何一个页面，要增加高质量的外链，增加相关推荐（比如说我们经常见到右侧本站的最高阅读的排名列表），然后就是给每一个页面加上keyword和描述
在代码中，我们应该写出能让浏览器识别的语义化HTML，这样有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；并且对外链设置nofollow标签，避免spider爬着爬着就爬出去了（减少网站的跳出率），并且我们要尽量在一些比较大的网站增加我们站点的曝光率，因为spider会经常访问大站，比如我们在掘金等技术社区发表文章中带有我们的站点，这样spider是很有可能爬到我们中的站点的，so….
- 网站外链的推广度、数量和质量
- 网站的内链足够强大
- 网站的原创质量
- 网站的年龄时间
- 网站的更新频率（更新次数越多越好）
- 网站的服务器
- 网站的流量：流量越高网站的权重越高
- 网站的关键词排名：关键词排名越靠前，网站的权重越高
- 网站的收录数量：网站百度收录数量越多，网站百度权重越高
- 网站的浏览量及深度：用户体验越好，网站的百度权重越高
添加 nofollow 标签
给非友情链接的出站链接添加「nofollow」标签，nofollow 标签是由谷歌领头创新的一个「反垃圾链接」的标签，并被百度、yahoo 等各大搜索引擎广泛支持，引用 nofollow 标签的目的是：用于指示搜索引擎不要追踪（即抓取）网页上的带有 nofollow 属性的任何出站链接，以减少垃圾链接的分散网站权重。
优化网站加载速度
3.1 优化图片加载
issue问题：
优化网站加载逻辑问题：图片最后加载，加入图片懒加载方法
hexo-lazyload-image的作用原理是讲你博客里面img标签的src属性替换为一个loading image，把真实的图片地址放在data-origin属性下面。然后当你的网页翻到那张图片时（也就是图片在窗口中完全可见时），他会有一段js用data-origin的内容替换src，打到懒加载的目的。
一般情况下懒加载和gallery插件会发生冲突，比如按照我上面所说，最终结果就会变成，可能只有第一张图片在gallery中打开是原图，右翻左翻都会是那张loading image，需要你掌握js，可以修改matery.js里面的内容，甚至可能换一个gallery，比如photosiwpe之类的
解决方法：修改/themes/matery/source/js中的matery.js文件
第103行：
$('#articleContent, #myGallery').lightGallery({
selector: '.img-item',
subHtmlSelectorRelative: true,
showThumbByDefault: false
});
后面加上：
$(document).find('img[data-original]').each(function(){
$(this).parent().attr("href", $(this).attr("data-original"));
});
再装个插件，https://github.com/Troy-Yang/hexo-lazyload-image
在博客根目录配置.yml文件加入对应字段，如下：
lazyload:
enable: true
onlypost: false
loadingImg:
Yml
好了，这样实现了博客网站的图片懒加载。
3.2 Gulp实现代码压缩
Gulp实现代码压缩，以提升网页加载速度。
1 首先我们需要安装Gulp插件和5个功能模块，依次运行下面的两条命令。
npm install gulp --save
npm install 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 --save
2 接下来在博客的根目录下新建gulpfile.js文件，并复制下面的内容到文件中。
var gulp = require("gulp");
var debug = require("gulp-debug");
var cleancss = require("gulp-clean-css");
var uglify = require("gulp-uglify");
var htmlmin = require("gulp-htmlmin");
var htmlclean = require("gulp-htmlclean");
var imagemin = require("gulp-imagemin");
var changed = require("gulp-changed");
var gulpif = require("gulp-if");
var plumber = require("gulp-plumber");
var isScriptAll = true;
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(), {});
gulp.task("clean", function() {
return del(["public/**/*"]);
});
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);
});
});
});
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);
});
});
});
gulp.task("compressJs", function() {
return gulp
.src(["./public/**/*.js", "!./public/libs/**"])
.pipe(gulpif(!isScriptAll, changed("./public")))
.pipe(gulpif(isDebug, debug({ title: "Compress JS:" })))
.pipe(plumber())
.pipe(
gulpBabel({
presets: [es2015Preset]
})
)
.pipe(uglify())
.pipe(gulp.dest("./public"));
});
gulp.task("compressCss", function() {
var option = {
rebase: false,
compatibility: "ie7"
};
return gulp
.src(["./public/**/*.css", "!./public/**/*.min.css"])
.pipe(gulpif(!isScriptAll, changed("./public")))
.pipe(gulpif(isDebug, debug({ title: "Compress CSS:" })))
.pipe(plumber())
.pipe(cleancss(option))
.pipe(gulp.dest("./public"));
});
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,
collapseBooleanAttributes: true,
removeEmptyAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
removeComments: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true
};
return gulp
.src("./public/**/*.html")
.pipe(gulpif(isDebug, debug({ title: "Compress HTML:" })))
.pipe(plumber())
.pipe(htmlclean(cleanOptions))
.pipe(htmlmin(minOption))
.pipe(gulp.dest("./public"));
});
gulp.task("compressImage", function() {
var option = {
optimizationLevel: 5,
progressive: true,
interlaced: false,
multipass: false
};
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"));
});
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", "compressImage", "compressJs")
)
);
3 最后 hexo clean && hexo g && gulp && hexo d 就可以了。
注意，很可能你会运行到第三步，也就是运行gulp压缩命令时会报错，如图所示：
那是因为gulp安装的本地版本和hexo自带的版本不对应导致，第三步gulp压缩可以用下面命令强制使用本地版本：
node ./node_modules/gulp/bin/gulp.js
其他
如果你想更深入的进行代码的修改，建议先去学习一下ejs的基本语法，这对魔改非常有帮助！！
也可以看看这篇《ejs语法入门》
参考链接：
官方文档
Hexo+Github博客搭建完全教程（洪卫）
Hexo 博客主题个性化