hexo(3)安装插件

本地搜索插件#

安装#

npm install hexo-generator-searchdb --save

配置#

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

search:
  path: search.xml
  field: post
  content: true
  template: ./search.xml

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

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

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

代码高亮#

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

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

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

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

安装#

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

配置#

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

highlight:  
  enable: true  
  line_number: true  
  auto_detect: true  
  tab_replace: ''  
  wrap: true  
  hljs: true  
prismjs:  
  enable: true  
  preprocess: true  
  line_number: true  
  tab_replace: ''

替换为：

highlight:  
  enable: false

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

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

遇到的问题#

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

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

修复问题 1#

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

修复问题 2#

第一步：

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

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

替换为：

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

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

第二步：

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

.btn-copy {  
    position: sticky;  
    height: 12px;  
    left: 96%;  
    width: 32px;  
    margin-left: 96%;  
    cursor: pointer;  
    border-radius: 6px;  
    -webkit-user-select: none;  
    -moz-user-select: none;  
    -ms-user-select: none;  
    user-select: none;  
    -webkit-appearance: none;  
    color: #808080;  
    -webkit-transition: opacity .3s ease-in-out;  
    -o-transition: opacity .3s ease-in-out;  
    transition: opacity .3s ease-in-out;  
    opacity: 0;  
}  
.btn-copy:hover{  
  color: #000;  
}  
  
pre:hover .btn-copy{  
  opacity: 1;  
}

修复问题 3#

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

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

const map = {  
  '&#39;': '\'',  
  '&amp;': '&',  
  '&gt;': '>',  
  '&lt;': '<',  
  '&quot;': '"',
  '&#123;':'{', // 添加这一行
  '&#123;':'}' // 添加这一行
};

字数统计#

安装#

hexo-wordcount 插件地址

npm i --save hexo-wordcount

配置#

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

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

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

高级配置：

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

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

中文链接转拼音#

安装#

hexo-permalink-pinyin 官方地址

npm i hexo-permalink-pinyin --save

配置#

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

permalink_pinyin:
  enable: true

添加 emoji 表情支持#

安装#

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

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

配置#

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

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

安装 sitemap#

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

hexo-generator-sitemap 官方地址

npm install hexo-generator-sitemap --save

配置#

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

sitemap:
  path: 
    - sitemap.xml
    - sitemap.txt
  rel: false
  tags: true
  categories: true

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

安装豆瓣卡片#

hexo-douban-card 官方地址

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

npm install hexo-douban-card --save

使用方法#

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

{% douban movie 24745500 %}

{% douban book 30376420 %}

{% douban music 35099703 %}

参数阐述#

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

添加 bilibili 视频卡片#

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

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

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

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

<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 官网地址

npm install hexo-feed --save-dev

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

hexo cl 
hexo g

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

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

info:  
  #######
  outlinkitem:  
 ######
    - name: rss  
      outlink: /rss.xml  
      message: RSS