hexo插件推荐及简明使用教程

概述

hexo

https://hexo.io/plugins

代码高亮

从 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表情，安装命令如下：

npm install hexo-filter-github-emojis --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

githubEmojis:
  enable: true
  className: github-emoji
  inject: true
  styles:
  customEmojis:

添加 RSS 订阅支持

本主题中还使用到了 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 自用的一个媒体插入插件，在添加部分功能后发布给大家使用。

已支持的平台

• Aplayer

• Meting

• Dplayer

• Bilibili

  未来可能支持

  • YouTube
  • 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

在 Hexo 根目录下的 _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:

使用

MetingJS

代码：

{% meting "001Mf4Ic1aNYYK" "tencent" "album" "order:random" "listmaxheight:180px" %}

{% meting "auto:https://y.qq.com/n/yqq/song/001RGrEX3ija5X.html" "autoplay" %}

演示效果：

meting已经用不了了

配置项	默认	描述
id	必须	音乐 id，第一个参数
server	必须	音乐平台，第二个参数，可选： netease , tencent , kugou , xiami , baidu
type	必须	音乐类型，第三个参数，可选： song , playlist , album search , artist
auto	无	有 auto 选项时前面参数不需要填写，否则为必填，见示例 2
autoplay	false	自动播放，带有此参数表示 true ，不带表示 false
fixed	false	吸底模式，带有此参数表示 true ，不带表示 false
mini	false	迷你模式，带有此参数表示 true ，不带表示 false
listfolded	false	默认折叠列表，带有此参数表示 true ，不带表示 false
mutex	true	互斥，如不需互斥 "mutex:false"
theme	#2980b9	主题颜色
loop	all	循环模式 ，可选值 all , one , none
order	list	播放顺序，可选值 list , random
preload	auto	预加载模式 ，可选 none , metadata , auto
volume	0.7	默认音量，可选 0-1
lrctype	0	歌词类型
listmaxheight	340px	播放器最大高度
storagename	metingjs

更多参数可以以 "option:vaule" 的格式增加。

后端服务器可以使用官方后端，也可以使用自己的后端服务器 MetingJS.Server 自建服务。

Aplayer

代码：

{% aplayer "Caffeine" "Jeff Williams" "caffeine.mp3" "picture.jpg" "lrc:caffeine.txt" %}

{% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}

演示效果：

配置项	默认	描述
title	必须	曲目标题，第一个参数
author	必须	曲目作者，第二个参数
url	必须	音乐文件地址
picture_url		音乐对应的图片地址
narrow	false	袖珍风格，带有此参数表示 true ，不带表示 false
autoplay	false	自动播放，带有此参数表示 true ，不带表示 false
width:xxx	100%	播放器宽度
lrc		歌词地址

AplayerList（不推荐使用）

代码：

{% aplayerlist %}
{
    "narrow": false,             // Optional, narrow style
    "autoplay": true,            // Optional, autoplay song(s), not supported by mobile browsers
    "mode": "random",            // Optional, play mode, can be `random` `single` `circulation`(loop) `order`(no loop), default: `circulation`
    "showlrc": 3,                // Optional, show lrc, can be 1, 2, 3
    "mutex": true,               // Optional, pause other players when this player playing
    "theme": "#e6d0b2",	         // Optional, theme color, default: #b7daff
    "preload": "metadata",       // Optional, the way to load music, can be 'none' 'metadata' 'auto', default: 'auto'
    "listmaxheight": "513px",    // Optional, max height of play list
    "music": [
        {
            "title": "CoCo",
            "author": "Jeff Williams",
            "url": "caffeine.mp3",
            "pic": "caffeine.jpeg",
            "lrc": "caffeine.txt"
        },
        {
            "title": "アイロニ",
            "author": "鹿乃",
            "url": "irony.mp3",
            "pic": "irony.jpg"
        }
    ]
}
{% endaplayerlist %}

演示效果：

作者表示弃用这个功能。。。。。

Dplayer

代码：

{% dplayer "url:KeyCastOW.mp4" "id:DDEC4F882C0B66FAD" "addition:addition0" "addition:addition1" %}

演示效果：

1、

配置项	默认	描述
url	必填	视频地址
pic		封面
thumbnails		缩略图
type	auto	视频格式，可选 auto hls dash shakaDash flv webtorrent
id		弹幕 id，建议使用视频的 CRC 或 MD5，再或使用 UUID
api		弹幕 api
token
maximum	10000	最大弹幕数
user	DIYgod	弹幕发送用户名
bottom	15%	弹幕底端距离
unlimited	true
addition		额外弹幕，可重叠加多个
suburl		字幕地址
subtype	webvtt	字幕类型，可选 webvtt ass
subbottom	40px	字幕底端距离
subfontSize	20px	字幕字体大小
subcolor	#fff	字幕字体颜色
autoplay	false	自动播放，带有此参数表示 true，不带表示 false
loop	false	循环，带有此参数表示 true，不带表示 false
screenshot	false	截屏按钮，带有此参数表示 true，不带表示 false，此参数会造成跨域
hotkey	true	热键控制
mutex	true	互斥
theme	#b7daff	主题颜色
lang		语言，不指定会根据浏览器环境自动识别
preload	auto	预加载，可选 none metadata auto
logo		logo 地址
volume	0.7	默认音量 0-1
contextmenu		右键菜单，可叠加
highlight		高光点，可叠加多个，例如 "highlight:{time: 20, text: '这是第 20 秒'}"
code		额外代码，不懂不要填，需要写的请参考源码

Bilibili

代码：

{% bilibili "aid:60016166" "quality:high" "danmaku" "allowfullscreen" %}

演示效果：

配置项	默认	描述
bvid		视频 bv 号，bvid、aid 和 av 必填一项，推荐使用 bvid
aid		视频 av 号
av		视频链接地址，不要带分 P 信息，与 aid 同时填写会被覆盖，不推荐使用
page	1	分 P，填写 av 时才会生效
quality	low	视频质量，可选 high low
danmaku	false	开启弹幕，带有此参数表示 true，不带表示 false
allowfullscreen	true	是否允许全屏
width	100%	宽度
max_width	800px	最大宽度
margin	auto	位置，css 属性，例： "margin:auto" "margin:0 0 0 auto"

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 i hexo-filter-nofollow --save

nofollow:
  enable: true
  field: site
  exclude:
    - 'exclude1.com'
    - 'exclude2.com'

推送链接

请认真认读该文档并配置

谷歌的推送不了，请自行科学上网，可以看这篇《》配置代理。

文章加密

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      #是否在手机端显示

cdn版

live2d:
	enable: true
	scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js
	model:
		use: https://cdn.jsdelivr.net/npm/live2d-widget-model-z16@1.0.5/assets/z16.model.json #模型选择
	display:
		position: left  #模型位置
		width: 120       #模型宽度
		height: 250      #模型高度
	mobile:
		show: false      #是否在手机端显示

用法

有三种方法添加模块名

a. live2d_models子目录名称

1. 在您博客根目录下创建一个 live2d_models 文件夹.
2. 在此文件夹内新建一个子文件夹.
3. 将你的 Live2D 模型复制到这个子文件夹中.
4. 将子文件夹的名称输入 _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

但是在这个主题会有个Bug，点击在看会弹出一个窗口，罪魁祸首是/libs/materialize/materialize.min.js

parentNode 属性可返回某节点的父节点，如果指定的节点没有父节点则返回 null 。

经过测试，把e&&n.call(e,t)删掉就好了

call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

更新:奈何博主能力浅薄，乱改代码导致主页面都不能正常显示了，大家还是改回去吧，没改的就不要改了

后面写了一个脚本来更改，大家用这个吧

<script type="text/javascript">
window.onload=function ()
	{
	var oDiv=document.getElementsByClassName("bangumi-tab");
	oDiv[0].target="_self";
	oDiv[1].target="_self";
	oDiv[2].target="_self";
}
</script>

再改回来，反复套娃，O(∩_∩)O哈哈~

图片懒加载

安装

npm install hexo-lazyload-image --save

用法

首先_config.yml从您的hexo项目中添加配置。

lazyload：
   enable：true 
  onlypost：false ＃可选
  loadingImg：＃可选，例如./images/loading.gif 
  isSPA：false ＃可选

Onlypost

• 如果为true，则仅帖子或页面中的图像将支持延迟加载。
• 如果为false，则网站的整个图像将使用延迟加载，包括与主题距离较远的图像，但不包括CSS样式的背景图像。

loadingImg

• 如果不设置任何值（默认情况下），则它将使用默认的加载图像。
• 如果要自定义图像，则需要将加载的图像复制到当前主题图像文件夹中，然后更改此路径以进行查找。

isSPA 为了性能考虑，添加了isSPA。如果您的主题是SPA页面，请将该主题设置为true以使延迟加载有效，

• 如果为true，则在滚动过程中搜索每个图像以支持SPA页面，
• 如果为false（默认值），则性能将最佳。

这里可以找到一些有趣的loading.gif，

Hexo-lazy-image 实现原理

【因为文章都是使用markdown来编写的，所以不可能要求我们在markdown里将所有图片路径都指向站位图片，并附加另一个属性，所以，这个工作必须留给hexo的generate部分来做。

最终可分为两步：

1. 在hexo after_post_render事件或者after_render:html事件里将生产出来的文章html代码中所有img元素都加上 data-original 属性，并把src值付给他， 然后在将src值致为loading图片
2. 注入simple-lazyload脚本在每个页面最后面，当页面加载过后负责判定当前需要重新加载的图片。

这里重点提提正则表达式，在对第一步替换的时候，只是使用了简单的正则表达式去匹配查找所有的img节点，后来发现不仅如此，正则表达式结合string.replace更是如此强大，直接将我原来30行的代码减为3行，从此热爱上了正则表达式。

return htmlContent.replace(/<img(\s*?)src="(.*?)"(.*?)>/gi, function (str, p1, p2) {
        return str.replace(p2, loadingImage + '" data-original="' + p2);
    });

关于simple-lazyload，这个是懒加载替换脚本的核心，原来使用jquery-lazyload插件，后来觉得没必要，最终还是自己写了个简单版。】

这是插件作者写的，但是他并没有把我的文章图片成功变成懒加载

挖坑：等博主学完JS及Hexo的API使用看下能不能将其魔改吧

Markown高级渲染

安装

npm install hexo-renderer-marked --save

添加配置 _config.yml.

marked:
  gfm: true
  pedantic: false
  breaks: true
  smartLists: true
  smartypants: true
  quotes: '“”‘’'
  modifyAnchors: 0
  anchorAlias: false
  autolink: true
  mangle: true
  sanitizeUrl: false
  headerIds: true
  lazyload: false
  prependRoot: false
  postAsset: false
  external_link:
    enable: false
    exclude: []
    nofollow: false
  disableNunjucks: false
  descriptionLists: true

• **gfm-**启用GitHub风格的降价

• **pedantic-**尽量遮盖部分markdown.pl。不要修复任何原始的降价错误或不良行为。

• **breaks-**启用GFM换行。此选项要求该gfm选项为true。

• **smartLists-**使用比原始减价更聪明的列表行为。

• **smartypant-**对引号和破折号使用“智能”印刷标点符号。

• quotes - Defines the double and single quotes used for substituting regular quotes if smartypants is enabled

  • 例如：“«»””
    • “双”将变成“单”
    • “单”将变成“单”
  • 必须指定双引号和单引号替换，否则将被忽略。

• **ModifyAnchors-**将anchorId转换为小写（1）或大写（2）。

• 自动链接-为网址启用自动链接。例如https://hexo.io将成为<a href="https://hexo.io">https://hexo.io</a>。

• mangle-

  使用HTML字符引用转义自动链接的电子邮件地址。

  • 这是为了掩盖垃圾邮件机器人使用的基本爬网程序的电子邮件地址，同时仍可让网络浏览器读取。

• sanitizeUrl -删除的网址开头javascript:，vbscript:和data:。

• **headerIds-**插入标头ID，例如<h1 id="value">text</h1>。对于将标题链接插入每个段落很有用。

• anchorAlias-

  启用自定义标头ID

  • 例如：## [foo](#bar)，id将被设置为“ bar”。
  • 需要启用headerIds。

• **lazyload-**通过loading="lazy"属性延迟加载图像。

• prependRoot-

  将根值附加到（内部）图像路径。

  • 范例_config.yml：

root: /blog/

• ![text](/path/to/image.jpg) becomes <img src="/blog/path/to/image.jpg" alt="text">

• postAsset-将

  发布资产的图像路径解析为相对路径，并在

  post_asset_folder

  启用后附加根值。

  • “ image.jpg”位于“ /2020/01/02/foo/image.jpg”，它是“ / 2020/01/02 / foo /”的后期资产。
  • ![](image.jpg) 变成 <img src="/2020/01/02/foo/image.jpg">
  • 需要启用prependRoot。

• 外部链接

  • enable-在新标签页中打开外部链接。

  • exclude-排除主机名。在适用时指定子域，包括www

    • 示例：[foo](http://bar.com)成为<a href="http://bar.com" target="_blank" rel="noopener">foo</a>

  • nofollow-添加

    rel="noopener external nofollow noreferrer"

    到所有外部链接以确保安全，隐私和SEO。阅读更多。可以启用，无论external_link.enable

    • 示例：[foo](http://bar.com)成为<a href="http://bar.com" rel="noopener external nofollow noreferrer">foo</a>

• disableNunjucks：如果为true，则不会呈现Nunjucks标签{{ }}或{% %}（通常由标签插件使用）。

• descriptionLists：启用对描述列表语法的支持。

  • 当前的描述列表语法既不是CommonMark也不是GFM，hexo-renderer-marked仅提供向后兼容的选项。
  • 通过禁用descriptionLists，降价渲染性能将会得到提高了很多。

有关更多选项，请参见标记。由于此插件实现了自定义功能，因此某些“标记”选项可能无法正常使用。随时向我们提出一个问题以进行澄清。

高级压缩

可直接看这个

在hexo目录创建gulpfile.js，内容为：

let gulp = require('gulp')
let cleanCSS = require('gulp-clean-css')
let htmlmin = require('gulp-htmlmin')
let htmlclean = require('gulp-htmlclean')
let babel = require('gulp-babel') /* 转换为es2015 */
let uglify = require('gulp-uglify')
let imagemin = require('gulp-imagemin')

// 设置根目录
const root = './public'

// 匹配模式， **/*代表匹配所有目录下的所有文件
const pattern = '**/*'

// 压缩html
gulp.task('minify-html', function() {
  return gulp
    // 匹配所有 .html结尾的文件
    .src(`${root}/${pattern}.html`)
    .pipe(htmlclean())
    .pipe(
      htmlmin({
        removeComments: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
      })
    )
    .pipe(gulp.dest('./public'))
})

// 压缩css
gulp.task('minify-css', function() {
  return gulp
    // 匹配所有 .css结尾的文件
    .src(`${root}/${pattern}.css`)
    .pipe(
      cleanCSS({
        compatibility: 'ie8'
      })
    )
    .pipe(gulp.dest('./public'))
})

// 压缩js
gulp.task('minify-js', function() {
  return gulp
    // 匹配所有 .js结尾的文件
    .src(`${root}/${pattern}.js`)
    .pipe(
      babel({
        presets: ['env']
      })
    )
    .pipe(uglify())
    .pipe(gulp.dest('./public'))
})

// 压缩图片
gulp.task('minify-images', function() {
  return gulp
    // 匹配public/images目录下的所有文件
    .src(`${root}/images/${pattern}`)
    .pipe(
      imagemin(
        [
          imagemin.gifsicle({ optimizationLevel: 3 }),
          imagemin.jpegtran({ progressive: true }),
          imagemin.optipng({ optimizationLevel: 7 }),
          imagemin.svgo()
        ],
        { verbose: true }
      )
    )
    .pipe(gulp.dest('./public/images'))
})

gulp.task('default', gulp.series('minify-html', 'minify-css', 'minify-js'))

4、执行压缩
gulp

命令精简

使用了gulp时候，构建发布需要四个命令：

hexo clean
hexo g
gulp
hexo d

这四个命令，可以都写在package.json。

"scripts": {
  "build": "hexo clean && hexo g && gulp",
  "deploy": "hexo clean && hexo g && gulp && hexo d"
}

构建只需要执行npm run build，构建发布只需要执行npm run deploy

更新：一堆报错，插件也是年久失修，对新特性支持不好，放弃（博主是不会轻易放弃的）

补充：如果还是想使用的话，可以把报错的文件给排除掉

以下为我的配置，参考另一个大佬的的配置文件，一个命令gulp解决上传部署

var gulp = require('gulp');
var minifycss = require('gulp-clean-css');
var uglify = require('gulp-uglify-es').default;
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');
var del = require('del');
var Hexo = require('hexo');
var minifyInlineJSON = require('gulp-minify-inline-json');

gulp.task('clean', function () {
    return del(['public/**/*']);
});

var hexo = new Hexo(process.cwd(), {});
gulp.task('generate', function (cb) {
    hexo.init().then(function () {
        return hexo.call('generate', {
            watch: false
        });
    }).then(function () {
        return hexo.exit();
    }).then(function () {
        return cb()
    }).catch(function (err) {
        console.log(err);
        hexo.exit(err);
        return cb(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('minify-css', function () {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss({
            compatibility: 'ie8'
        }))
        .pipe(gulp.dest('./public'));
});

gulp.task('minify-html', function () {
    return gulp.src(['./public/**/*.html', '!./public/posts/35189442/*.html', '!./public/tags/MATLAB/index.html'])
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true,
        }))
        .pipe(gulp.dest('./public'))
});

gulp.task('minify-js', function () {
    return gulp.src(['./public/**/*.js', '!./public/js/photo.js', '!./public/libs/materialize/materialize.min.js'])
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});

gulp.task('minify-img', function () {
    return gulp.src('./public/medias/**/*')
        .pipe(imagemin([
            imagemin.gifsicle({
                interlaced: true
            }),
            imagemin.mozjpeg({
                progressive: true
            }),
            imagemin.optipng({
                optimizationLevel: 5
            }),
            imagemin.svgo({
                plugins: [{
                    removeViewBox: true
                }, {
                    cleanupIDs: false
                }]
            })
        ]))
        .pipe(gulp.dest('./public/medias'))
});

gulp.task('minifyInlineJSON', function () {
    return gulp.src('./public/**/*.html')
        .pipe(minifyInlineJSON())
        .pipe(gulp.dest('./public'));
});

gulp.task('compress', gulp.series('minify-html', 'minify-css', 'minify-img', 'minify-js', 'minifyInlineJSON'));

gulp.task('default', gulp.series('clean', 'generate', 'compress', 'deploy'));

使用gulp就可以完成部署了

效果如图，感觉还不错

自动化部署

看这个

参考链接：