hexo(3)安装插件 - Cirry's Blog

本地搜索插件

安装

1
npm install hexo-generator-searchdb --save

配置

在根目录下的_config.yml文件夹中，新增如下内容：

1
search:
2
  path: search.xml
3
  field: post
4
  content: true
5
  template: ./search.xml

然后在_config.maupassant.yml中，找到self_search属性设置为true。

最后执行如下命令，安装插件之后都需要进行如下操作，才能看到效果：

1
hexo clean  # 清除缓存
2
hexo g # 重新生成文件
3
hexo s # 运行

代码高亮

目前hexo 6.0+ 以上的版本已经集成了代码高亮，直接开启即可，请在package.json中检查自己的hexo版本。亲测可以使用，但是显示的样式与我当前使用的主题有样式冲突，我选择手动安装。

官方高亮插件配置文档，建议看英文文档，中文文档有点滞后，可能会导致配置后没有效果。

如果你也是手动安装，可以跟着继续操作。

hexo-prism-plugin 插件地址，这个仓库有bug没有修复，我自己fork仓库，修复bug后重新发布了一个包——hexo-prism-plugin-advanced，以后可能会继续维护。

安装

1
npm install hexo-prism-plugin --save # 不建议安装
2
npm i hexo-prism-plugin-advanced --save # 建议安装

配置

在根目录下的_config.yml文件夹中，将如下内容：

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

替换为：

1
highlight:
2
  enable: false

在根目录下的_config.yml文件夹中，新增如下内容：

1
prism_plugin:
2
  mode: 'preprocess'    # realtime/preprocess
3
  theme: 'ghcolors'      # 自带的主题样式有很多，可以去官方网站查看
4
  line_number: true    # default false
5
  custom_css: 'path/to/your/custom.css'     # optional，如果没有可以删除这一行

遇到的问题

在使用中遇到的问题，不同的主题不一定会遇到这个问题 ：

展示在首页的文章摘要中不能有代码块，即不要在文章的第一段内容中有代码块，否则会导致样式错乱。
代码块的复制按钮消失。
代码块中的’{}‘会被转义为’{‘和’}‘，我在自己的包中修复了这个bug，如果你装的是hexo-prism-plugin-advanced则不会有这个问题。

修复问题1

我认为这个应该是插件的bug，另外在摘要上展示代码块并不是很美观，应该自行避免。

修复问题2

第一步：

修改themes/maupassant/source/js/copycode.js中的如下代码：

1
$(".highlight .code pre").before(copyHtml); // 第12行

替换为：

1
$("pre code").before(copyHtml);
2
$("pre").wrap('<div class="code-block-wrapper"></div'); //并添加这一行

这行代码的意思就是插入一个复制按钮在代码块上，因为我们使用了插件，导致样式发生了改变，按钮插入失败，所以没有复制按钮了

第二步：

修改themes/maupassant/source/css/copycode.scss为如下代码即可：

1
.btn-copy {
2
    position: sticky;
3
    height: 12px;
4
    left: 96%;
5
    width: 32px;
6
    margin-left: 96%;
7
    cursor: pointer;
8
    border-radius: 6px;
9
    -webkit-user-select: none;
10
    -moz-user-select: none;
11
    -ms-user-select: none;
12
    user-select: none;
13
    -webkit-appearance: none;
14
    color: #808080;
15
    -webkit-transition: opacity .3s ease-in-out;
11 collapsed lines
16
    -o-transition: opacity .3s ease-in-out;
17
    transition: opacity .3s ease-in-out;
18
    opacity: 0;
19
}
20
.btn-copy:hover{
21
  color: #000;
22
}
23

24
pre:hover .btn-copy{
25
  opacity: 1;
26
}

修复问题3

在node_modules/hexo-prism-plugin/src/index.js中，添加如下代码即可，记得清除缓存，重新运行：

这也意味着，你每次重新装包的时候都要修改这个地方，觉得麻烦的可以安装我发布的包。

1
const map = {
2
  '&#39;': '\'',
3
  '&amp;': '&',
4
  '&gt;': '>',
5
  '&lt;': '<',
6
  '&quot;': '"',
7
  '&#123;':'{', // 添加这一行
8
  '&#123;':'}' // 添加这一行
9
};

字数统计

安装

hexo-wordcount 插件地址

1
npm i --save hexo-wordcount

配置

在根目录下的_config.yml文件夹中，新增如下内容：

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

然后在_config.maupassant.yml中，找到wordcount属性设置为true即可。

高级配置：

在themes/maupassant/layout/_partial/wordcount.pug文件中，可以修改阅读速度等等。

1
span.post-time
2
  span.post-meta-item-text= ' | '
3
  span.post-meta-item-icon
4
    i.fa.fa-keyboard-o
5
    span.post-count= ' '+wordcount(page.content)
6
    span.post-meta-item-text= " "+__('word_cnt')
7
span.post-time= ' | '
8
  span.post-meta-item-icon
9
    i.fa.fa-clock-o
10
    span.post-count= ' '+min2read(page.content, {cn: 200, en: 160}) # 修改中文和英文的阅读速度
11
    span.post-meta-item-text= ' '+__('read_time')

中文链接转拼音

安装

hexo-permalink-pinyin官方地址

1
npm i hexo-permalink-pinyin --save

配置

在根目录下的_config.yml文件夹中，新增如下内容：

1
permalink_pinyin:
2
  enable: true

添加 emoji 表情支持

安装

# hexo-filter-github-emojis官方地址

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

配置

在根目录下的_config.yml文件夹中，新增如下内容：

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

安装sitemap

为了更好的seo，添加百度的网站收录。

hexo-generator-sitemap官方地址

1
npm install hexo-generator-sitemap --save

配置

在根目录下的_config.yml文件夹中，新增如下内容：

1
sitemap:
2
  path:
3
    - sitemap.xml
4
    - sitemap.txt
5
  rel: false
6
  tags: true
7
  categories: true

如果你希望某一篇文章不被抓取，你可以在front matter中设置sitemap: false。

安装豆瓣卡片

hexo-douban-card官方地址

当你写博文介绍一部电影或者一本书籍的时候可以直接从豆瓣上抓取到信息展示在博客上，截图展示如下。

1
npm install hexo-douban-card --save

使用方法

直接在文章的合适位置插入即可。

1
{% douban movie 24745500 %}
2

3
{% douban book 30376420 %}
4

5
{% douban music 35099703 %}

参数阐述

第一项douban 代表插件名
第二项可选:movie,book,music
第三项请填入对应的id，id为你在豆瓣上搜索到内容的url中subject后面的那串数字。

添加bilibili视频卡片

目前来看很多插件没有官网直接嵌入显得美观。

我们只需要在bilibili上点击分享按钮，复制嵌入链接到我们的文章中即可，如果你觉得样式不太美观，可以在链接中加入如下的样式：

1
style="width: 100%; height: 500px; max-width: 100%；align:center; padding:20px 0;"

最后的链接显示应该是下面这样：

1
<iframe src="//player.bilibili.com/player.html?aid=839629572&bvid=BV1Y54y1m743&cid=237240818&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="width: 100%; height: 500px; max-width: 100%；align:center; padding:20px 0;"> </iframe>

安装RSS功能

hexo-feed官网地址

1
npm install hexo-feed --save-dev

安装完成之后，使用命令：

1
hexo cl
2
hexo g

可以看到在根目录下生成的public文件中有rss.xml，atom.xml ，feed.json三个文件。

在配置文件_config.maupassant.yml中配置rss路径即可。

1
info:
2
  #######
3
  outlinkitem:
4
 ######
5
    - name: rss
6
      outlink: /rss.xml
7
      message: RSS