【Hexo】HEXO－EP02. 插件篇

一、hexo-clean-css

功能：優化css檔案

npm install hexo-clean-css --save

二、hexo-encrypt

功能：文章加密

npm install hexo-encrypt --save

• 1. 設立通用密碼

  # 站點文件
  encrypt: 
      password: 123456
  

  /* Front-matter */
  ---
  encrypt: true
  ---
  

• 2. 文章的獨立密碼

  /* Front-matter */
  ---
  enc_pwd: 123456
  ---
  

三、hexo-wordcount

功能：文章字數統計

npm i --save hexo-wordcount

• STEP.1：theme\<主題名>\layout\_plugins\wordcount.ejs

<span>文章字數：<%= wordcount(page.content) %>字</span>
<span>閱讀時長：<%= min2read(page.content) %>分</span>
<!-- 按不同主題可能為post or page -->

• STEP.2：theme\<主題名>\layout\<文章>.ejs

<% if(theme.word_count){%>
    <%- partial('plugins\wordcount') %>
<% } %>

• STEP.3：主題文件theme\_config.yml

# 文章字數統計
word_count: true

四、hexo-generator-sitemap

功能：建立sitemap.xml

npm install hexo-generator-sitemap --save

# 站點配置文件_config.yml
# sitemap
sitemap:
  path: 
    - sitemap.xml
    - sitemap.txt
  # template: ./sitemap_template.xml
  # template_txt: ./sitemap_template.txt
  rel: false
  tags: true
  categories: true

五、hexo-generator-feed

功能：生成atom.xml，RSS支持

npm install hexo-generator-feed --save

# 站點配置文件_config.yml
feed:
  enable: true
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date
  icon: icon.png
  autodiscovery: true
#  template:

本地預覽可能會有中文亂碼，但是部署後觀看正常

六、hexo-content-blocks

• 安裝

npm install hexo-content-blocks --save

• 在head.ejs中引入

<% if (config.content_blocks.enable) { %>
<style type="text/css"><%- content_blocks_css() %></style>
<% } %>

• 編輯_config.yml站點配置文件

content_blocks:
  enable: true
  open_button: fa fa-chevron-down
  types:
    note: "#448aff || fa fa-pen"
    abstract: "#00b0ff || fa fa-clipboard-list"
    info: "#00b8d4 || fa fa-circle-info"
    tip: "#00bfa5 || fa fa-fire"
    success: "#00c853 || fa fa-check"
    question: "#64dd17 || fa fa-circle-question"
    warning: "#ff9100 || fa fa-triangle-exclamation"
    failure: "#ff5252 || fa fa-xmark"
    danger: "#ff1744 || fa fa-bolt"
    bug: "#f50057 || fa fa-bug"
    example: "#7c4dff || fa fa-vial"
    quote: "#9e9e9e || fa fa-quote-right"

七、hexo-generator-calendar

• 安裝

npm install hexo-generator-calendar --save

需要以下四個文件並引入，

• 下載languages.js
• 下載calendar.js
• 使用線上轉換器變成scsscalendar.styl
• 新增calendar.ejs文件，並引入到想要的位置

<div>
  <h3>日曆</h3>
  <div id="calendar"></div>
</div>

• 編輯_config.yml主題配置文件

calendar:
    enable: true
    language: zh-TW
    options:
    months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
    dayOfWeekShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
    dayOfWeek: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
    postsMonthTip: 'Posts published in LMM yyyy'
    titleFormat: 'yyyy LMM'
    titleLinkFormat: 'archives/yyyy/MM/'
    headArrows: {previous: '<span class="cal-prev"></span>', next: '<span class="cal-next"></span>'}
    footArrows: {previous: ' ', next: ' '}
    weekOffset: 0
    calendarSingle: false
    calendarRoot: 'calendar/'
    calendarUrl: 'calendar.json'