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;':'{', // 添加這一行
  '&#125;':'}' // 添加這一行
};

字數統計#

安裝#

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