Hexo 插件说明
如果应用官网的主题你会发现,有可能出现打不开的情况,这是由于有些主题使用的插件,本地并没有安装导致的报错。(没有问题的可以跳过)

代码高亮(建议安装)

由于 Hexo 自带的代码高亮主题显示不好看,可以使用 hexo-prism-plugin 的 Hexo 插件来做代码高亮,安装命令如下:

1
npm i -S hexo-prism-plugin

然后,修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false,并新增 prism 插件相关的配置,主要配置如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
highlight:
enable: false
line_number: true
auto_detect: false
tab_replace: false
wrap: true
hljs: false

prism_plugin:
mode: 'preprocess' # realtime/preprocess
theme: 'tomorrow'
line_number: false # default false
custom_css:

搜索(建议安装)

本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索,安装命令如下:

1
npm install hexo-generator-search --save

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

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

文章字数统计插件(建议安装)(使用了 halo 主题则必须安装)

如果你想要在文章中显示文章字数、阅读时长信息,可以安装 hexo-wordcount插件。安装命令如下:

1
npm i --save hexo-wordcount

然后只需在本主题下的 _config.yml 文件中,将各个文章字数相关的配置激活即可:

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

添加代码压缩(建议安装)

hexo-neat插件实现压缩代码,底层是通过 gulp 来实现的。但是这个插件是有 Bug 的:

压缩 md 文件会使 markdown 语法的代码块消失,会删除全角空格
在博客站点根目录执行安装代码:

1
npm install hexo-neat --save

紧接着在站点根目录下的配置文件添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
neat_enable: true
neat_html:
enable: true
exclude:
neat_css:
enable: true
exclude:
- '*.min.css'
neat_js:
enable: true
mangle: true
output:
compress:
exclude:
- '*.min.js'

然后直接输入 hexo cl && hexo g 就可以了,会自动压缩文件 。

补充:为了解决以上 Bug,对于halo主题(其他主题自行解决)需要将以上默认配置修改为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#hexo-neat 优化提速插件(去掉HTML、css、js的blank字符)
neat_enable: true
neat_html:
enable: true
exclude:
- '**/*.md'
neat_css:
enable: true
exclude:
- '**/*.min.css'
neat_js:
enable: true
mangle: true
output:
compress:
exclude:
- '**/*.min.js'
- '**/**/instantpage.js'
- '**/matery.js'

外链跳转插件 hexo-external-link(可选安装)(使用了 halo 主题则必须安装)

hexo-external-link是一个跳转外链相关插件。自动为所有 html 文件中外链的 a 标签生成对应的属性。 比如 设置target=’_blank’, rel=’external nofollow noopener noreferrer’告诉搜索引擎这是外部链接,不要将该链接计入权重。 同时自动生成外链跳转页面,默认在根目录下 go.html。

安装:

1
npm install hexo-external-link --save

配置插件 在 Hexo 根目录的_config.yml 文件中添加如下配置:

1
2
3
4
5
6
7
8
9
hexo_external_link:
enable: true
enable_base64_encode: true
url_param_name: 'u'
html_file_name: 'go.html'
target_blank: true
link_rel: 'external nofollow noopener noreferrer'
domain: 'your_domain' # 如果开启了防盗链
safety_chain: true
  • enable:是否开启 hexo_external_link 插件 - 默认 false
  • enable_base64_encode:是否对跳转 url 使用 base64 编码 - 默认 fasle
  • url_param_name:url 参数名,在跳转到外链传递给 html_file_name 的参数名 - 默认 ‘u’
  • html_file_name:跳转到外链的页面文件路径 - 默认 ‘go.html’
  • target_blank:是否为外链的 a 标签添加 target=’_blank’ - 默认 true
  • link_rel:设置外链的 a 标签的 rel 属性 - 默认 ‘external nofollow noopener noreferrer’
  • domain:如果开启了防盗链,除了 localhost 和 domain 之外调用会跳到主页,同时也是判断链接是否为外链的依据 - 默认 window.location.host
  • safety_chain:go.html 为了防止外链盗用 对域名进行的判断 - 默认 false 即关闭防盗链

添加 RSS 订阅支持(可选安装)(使用了 halo 主题则必须安装)

本主题中还使用到了 hexo-generator-feed 的 Hexo 插件来做 RSS,安装命令如下:

1
npm install hexo-generator-feed --save

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

1
2
3
4
5
6
feed: type: atom;
path: atom.xml;
limit: 20;
hub: content: content_limit: 140;
content_limit_delim: " ";
order_by: -date;

添加 sitemap 站点地图(可选安装)(使用了 halo 主题则必须安装)

本主题中还使用到了 hexo-generator-sitemap 的 Hexo 插件来做 Sitemap,安装命令如下:

1
npm install hexo-generator-sitemap --save

访问地址:/sitemap.xml

中文链接转拼音(可选安装)

如果你的文章名称是中文的,那么 Hexo 默认生成的永久链接也会有中文,这样不利于 SEO,且 gitment 评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件使在生成文章时生成中文拼音的永久链接。
这里为可选安装,因为我希望使用urlname进行连接访问,中文链接转拼音由一个缺点就是当文章名字过长会显示十分臃肿。

安装命令如下:

1
npm i hexo-permalink-pinyin --save

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

1
2
3
permalink_pinyin:
enable: true
separator: '-' # default: '-'

注:除了此插件外,hexo-abbrlink 插件也可以生成非中文的链接。

添加 emoji 表情支持(可选安装)

本主题新增了对emoji表情的支持,使用到了 hexo-filter-github-emojis 的 Hexo 插件来支持 emoji表情的生成,把对应的markdown emoji语法(::,例如::smile:)转变成会跳跃的emoji表情,安装命令如下:

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

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

1
2
3
4
5
6
githubEmojis:
enable: true
className: github-emoji
inject: true
styles:
customEmojis:

deploy 发布插件(可选安装)(部署到 github 需要安装)

如果你想通过deploy的方式进行推送public文件夹到托管网站,你需要安装

1
npm install hexo-deployer-git --save

当然你也可以选择不装,使用 Github Actions、docker 等方式
执行 hexo clean && hexo g 重新生成博客文件,然后在 public 文件夹中即可看到 atom.xml 文件,说明你已经安装成功了。

添加 DaoVoice 在线聊天功能(可选的)

前往 DaoVoice 官网注册并且获取 app_id,并将 app_id 填入主题的 _config.yml 文件中。

添加 Tidio 在线聊天功能(可选的)

前往 Tidio 官网注册并且获取 Public Key,并将 Public Key 填入主题的 _config.yml 文件中。

修改页脚

页脚信息可能需要做定制化修改,而且它不便于做成配置信息,所以可能需要你自己去再修改和加工。修改的地方在主题文件的 /layout/_partial/footer.ejs 文件中,包括站点、使用的主题、访问量等。

修改社交链接

在主题的 _config.yml 文件中,默认支持 QQ、GitHub 和邮箱等的配置,你可以在主题文件的 /layout/_partial/social-link.ejs 文件中,新增、修改你需要的社交链接地址,增加链接可参考如下代码:

1
2
3
4
5
<% if (theme.socialLink.github) { %>
<a href="<%= theme.socialLink.github %>" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
<i class="fab fa-github"></i>
</a>
<% } %>

其中,社交图标(如:fa-github)你可以在 Font Awesome 中搜索找到。以下是常用社交图标的标识,供你参考:

  • Facebook: fab fa-facebook
  • Twitter: fab fa-twitter
  • Google-plus: fab fa-google-plus
  • Linkedin: fab fa-linkedin
  • Tumblr: fab fa-tumblr
  • Medium: fab fa-medium
  • Slack: fab fa-slack
  • Sina Weibo: fab fa-weibo
  • Wechat: fab fa-weixin
  • QQ: fab fa-qq
  • Zhihu: fab fa-zhihu

注意: 本主题中使用的 Font Awesome 版本为 5.11.0。