快速開始

hexo-theme-butterfly是基於Molunerfinn的hexo-theme-melody的基礎上進行開發的。
文檔也是在hexo-theme-melody的文檔基礎上修改。因為一些配置變更導致與原主題配置上有部分區別。故如果安裝hexo-theme-butterfly主題，請參考這篇文檔。

主題安裝和升級

安裝

在你的博客根目錄裏

1	git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

如果想要安裝比較新的dev分支，可以

1	git clone -b div https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

應用主題

修改站點配置文件_config.yml，把主題改為Butterfly

1	theme: Butterfly

如果你沒有 pug 以及 stylus 的渲染器，請下載安裝： npm install hexo-renderer-jade hexo-renderer-stylus --save or yarn add hexo-renderer-jade hexo-renderer-stylus

平滑升級

為了主題的平滑升級, Butterfly 使用了 data files特性。

推薦把主題默認的配置文件_config.yml複製到 Hexo 工作目錄下的source/_data/butterfly.yml，如果source/_data的目錄不存在那就創建一個。

注意，如果你創建了butterfly.yml, 它將會替換主題默認配置文件_config.yml裏的配置項 (不是合併而是替換), 之後你就只需要通過git pull的方式就可以平滑地升級 theme-butterfly了。

配置

配置文件説明

站點配置文件_config.yml是 hexo 工作目錄下的主配置文件
butterfly.yml 是 Butterfly 的配置文件。它需要你手動將主題目錄下的_config.yml文件複製到 hexo 工作目錄的source/_data/butterfly.yml中。如果文件或者文件夾不存在，需要手動創建。

語言

修改站點配置文件 _config.yml

默認語言是 en

主題支持三種語言

default(en)
zh-CN (簡體中文)
zh-TW (繁體中文)

自定義主題色

可以修改大部分UI顏色

配置butterfly.yml，比如：

顏色值必須被雙引號包裹，就像"#000"而不是#000。否則將會在構建的時候報錯！

theme_color:
  enable: true
  main: "#9370DB"
  paginator: "#7A7FF1"
  button_hover: "#FF7242"
  text_selection: "#69c46d"
  link_color: "#858585"
  hr_color: "#A4D8FA"
  read-mode-bg_color: '#FAF9DE'

配置文件説明

代碼高亮主題

Butterfly 支持了 Material Theme全部 5 種代碼高亮樣式：

default
darker
pale night
light
ocean

配置butterfly.yml

1	highlight_theme: light

default

配置文件説明

darker

配置文件説明

pale night

配置文件説明

light

配置文件説明

ocean

配置文件説明

代碼複製

主題支持代碼複製功能

配置butterfly.yml

1	highlight_copy: true

配置文件説明

代碼換行

在默認情況下，hexo-highlight在編譯的時候不會實現代碼自動換行。如果你不希望在代碼塊的區域裏有橫向滾動條的話，那麼你可以考慮開啟這個功能。

配置butterfly.yml

1	code_word_wrap: true

然後找到你站點的 Hexo 配置文件_config.yml，將line_number改成false:

highlight:
  enable: true
  line_number: false
  auto_detect: false
  tab_replace:

設置code_word_wrap之前:

配置文件説明

設置code_word_wrap之後:

配置文件説明

社交圖標

Butterfly支持 font-awesome v4和 font-awesome v5. 如需開啟font-awesome v5,需要在Butterfly.yml上開啟

cdn:
  css:
    fontawesome: https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css
    fontawesomeV5: https://use.fontawesome.com/releases/v5.8.1/css/all.css

無論V4還是V5,書寫格式都是一樣的圖標名：url

1
2
3

social:
  fa fa-github: https://github.com/jerryc127
  fa fa-rss: /atom.xml

圖標名可在這尋找

配置文件説明

PC:

Mobile:

導航菜單

配置butterfly.yml

menu:
  首頁: /||fa fa-home
  時間軸: /archives/||fa fa-archive
  標籤: /tags/||fa fa-tags
  分類: /categories/||fa fa-folder-open
  留言板: /messageboard/||fa fa-coffee
  友鏈: /link/||fa fa-link
  關於: /about/||fa fa-heart

必須是 /xxx/，後面||分開，然後寫圖標名。菜單名稱可自己修改。

主頁文章節選(自動節選和文章頁description)

因為主題UI的關係，主頁文章節選只支持自動節選和文章頁description。優先選擇自動節選。

在butterfly.yml裏可以開啟auto_excerpt的選項，你的文章將會在自動截取部分顯示在主頁。（默認顯示150個字）。

1
2
3

auto_excerpt:
  enable: true
  length: 150

如果沒有開啟自動節選，則會顯示文章頁front-matter裏面設置的description。

配置文件説明

注意：如果開啟了自動節選功能，代碼塊的顯示將有可能不正常。

頂部圖

頂部圖有2種配置：具體url 和（留空，true和false，三個效果一樣）

page頁

當具體url時

主頁的頂部圖可以在Butterfly.yml設置top_img

archives頁的頂部圖可以在Butterfly.yml設置archive_img

其他page頁的頂部圖可以在各自的md頁面設置front-matter中的top_img

除主頁外，其他頁面如果沒有設置各自的top_img，則會顯示與主頁同樣的top_img圖片

當頂部圖留空，true和false

主頁會顯示純顏色的頂部圖

其他page的頂部圖沒有設置時，也會顯示純顏色的頂部圖

post頁

post頁的頂部圖會優先顯示各自front-matter中的top_img,如果沒有設置，則會縮略圖（即各自front-matter中的cover)，如果沒有則會顯示默認的post頂部圖,可在Butterfly.yml設置post_img

文章相關項

這個選項是用來顯示文章的相關信息的。

配置butterfly.yml

post_meta:
  date_type: both #or created or updated 文章日期是創建日或者更新日或都顯示
  categories: true # or false 是否顯示分類
  tags: true # or false 是否顯示標籤

在文章頂部的資料，

date_type: 可設置文章日期顯示創建日期(created)或者更新日期(updated)或者兩種都顯示(both)

categories 是否顯示分類

配置文件説明

tags是否顯示標籤

配置文件説明

文章版權

為你的博客文章展示文章版權和許可協議。

配置butterfly.yml

post_copyright:
  enable: true
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

配置文件説明

文章打賞

在你每篇文章的結尾，可以添加打賞按鈕。相關二維碼可以自行配置

配置butterfly.yml

reward:
  enable: true
  QR_code:
    - itemlist:
        img: /img/wechat.jpg
        text: 微信
    - itemlist:
        img: /img/alipay.jpg
        text: 支付寶

配置文件説明

文章封面

文章的markdown文檔上,在Front-matter添加cover,并填上要顯示的圖片地址。
如果不配置cover,可以設置顯示默認的cover.

配置butterfly.yml

1	default_cover: https://cdn.jsdelivr.net/gh/jerryc127/[email protected]/cover/default_bg.png

當配置多張圖片時,會隨機選擇一張作爲cover.此時寫法應爲

default_cover:
  - https://cdn.jsdelivr.net/gh/jerryc127/[email protected]/cover/default_bg.png
  - https://cdn.jsdelivr.net/gh/jerryc127/[email protected]/cover/default_bg2.png
  - https://cdn.jsdelivr.net/gh/jerryc127/[email protected]/cover/default_bg3.png

配置文件説明

頭像

配置butterfly.yml

1	avatar: https://xxxx/avatar.png

博客年份

since是一個來展示你站點起始時間的選項。它位於頁面的最底部。

配置butterfly.yml

1	since: 2018

配置文件説明

頁腳自定義文本

footer_custom_text是一個給你用來在頁腳自定義文本的選項。通常你可以在這裏寫聲明文本等。支持 HTML。

配置butterfly.yml

1	footer_custom_text: Hi, welcome to my <a href="https://jerryc.me/">blog</a>!

配置文件説明

ICP

對於部分有備案的域名，可以在ICP配置顯示。

配置butterfly.yml

ICP:
  enable: true
  url: http://www.beian.miit.gov.cn/state/outPortal/loginPortal.action
  text: 粵ICP備xxxx

夜間模式

右下角會有夜間模式按鈕

配置butterfly.yml

1 2	nightshift: enable: true

配置文件説明

閲讀模式

閲讀模式下會去掉除文章外的內容，避免幹擾閲讀。

只會出現在文章頁面，右下角會有閲讀模式按鈕。

配置butterfly.yml

1 2	readmode: enable: true

配置文件説明

簡繁轉換

簡體繁體互換

右下角會有簡繁轉換按鈕。

配置butterfly.yml

translate:
  enable: true
  # 默認按鈕顯示文字(網站是簡體，應設置為'default: 繁')
  default: 簡
  #網站默認語言，1: 繁體中文, 2: 簡體中文
  defaultEncoding: 1
  #延遲時間,若不在前, 要設定延遲翻譯時間, 如100表示100ms,默認為0
  translateDelay: 0
  #博客網址
  cookieDomain: "https://jerryc.me/"
  #當文字是簡體時，按鈕顯示的文字
  msgToTraditionalChinese: "繁"
  #當文字是繁體時，按鈕顯示的文字
  msgToSimplifiedChinese: "簡"

簡體

配置文件説明

繁體

配置文件説明

運行時間

網頁已運行時間

配置butterfly.yml

runtimeshow:
  enable: true
  start_date: 6/7/2018 00:00:00  
  ##網頁開通時間
  #格式: 月/日/年 時間
  #也可以寫成 年/月/日 時間

配置文件説明

側邊排版

可自行決定哪個項目需要顯示

至少需要顯示一個

配置butterfly.yml

aside:
  card_author: true
  card_announcement: true
  card_recent_post: true
  card_categories: true
  card_tags: true
  card_archives: true
  card_webinfo: true

相關文章推薦的原理是根據文章tags的比重來推薦

配置butterfly.yml

1
2
3

related_post:
  enable: true
  limit: 6 # 顯示推薦文章數目

配置文件説明

自定義字體

可自行設置字體的font-family

配置butterfly.yml

font:
  enable: true
  font-family: Lato, Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB,"Microsoft JhengHei", "MicrMicrosoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
  code-font: consolas, Menlo, "PingFang SC", "Microsoft JhengHei","Microsoft YaHei", monospace, Helvetica Neue For Number

網站副標題

可設置主頁中顯示的網站副標題或者喜歡的座右銘。

配置butterfly.yml

subtitle: 
  enable: true
  sub1: 今日事,今日畢
  sub2: Never put off till tomorrow what you can do today

配置文件説明

主題頁面

Page Front-matter

---
title:
date:
type: （tags,link,categories這三個頁面需要配置）
comments: (是否需要顯示評論，默認true)
description:
top_img: (設置頂部圖)
---

Post Front-matter

---
title:
date:
tags:
categories:
keywords:
description:
top_img: （除非特定需要，可以不寫）
comments  是否顯示評論（除非設置false,可以不寫）
cover:  縮略圖
toc:  是否顯示toc （除非特定文章設置，可以不寫）
toc_number: 是否顯示toc數字 （除非特定文章設置，可以不寫）
---

標籤頁

前往你的 Hexo 博客的根目錄
輸入hexo new page tags
你會找到source/tags/index.md這個文件
修改這個文件：

---
title: 標籤
date: 2018-01-05 00:00:00
type: "tags"
---

分類頁

前往你的 Hexo 博客的根目錄
輸入hexo new page categories
你會找到source/categories/index.md這個文件
修改這個文件：

---
title: 分類
date: 2018-01-05 00:00:00
type: "categories"
---

相冊

為你的博客創建一個相冊頁！

創建相冊頁

前往你的 Hexo 博客的根目錄
輸入hexo new page gallery
你會找到source/gallery/index.md這個文件
修改這個文件：

---
title: Gallery
date: 2018-01-05 00:00:00
type: "gallery"
---

Butterfly 提供了一個叫做gallery的標籤，讓你能夠在 markdown 文件裏生成gallery-item。

修改你剛剛創建的source/gallery/index.md，並加上gallery 標籤。

gallery img-url [title]

例子:

---
title: Gallery
date: 2018-01-05 00:00:00
type: "gallery"
---
{% gallery https://ws1.sinaimg.cn/large/8700af19gy1fp5i6o2vghj20ea0eajse melody %}
{% gallery https://user-images.githubusercontent.com/12621342/37325500-23e8f77c-26c9-11e8-8e24-eb4346f1fff5.png background %}
{% gallery https://ws1.sinaimg.cn/large/8700af19gy1fp5i64zaxqj20b40b474b demo1 %}
{% gallery https://ws1.sinaimg.cn/large/8700af19ly1fn2h26q32uj21120kudqq demo2 %}
{% gallery https://ws1.sinaimg.cn/large/8700af19ly1fnhdaimi40j218g0p0dic demo3 %}
{% gallery https://ws1.sinaimg.cn/large/8700af19ly1fn2i5kjh2pj21120kuncd %}

gallery-item 也擁有 fancybox 的效果!

配置文件説明

友情鏈接

為你的博客創建一個友情鏈接！

創建友情鏈接頁面

前往你的 Hexo 博客的根目錄
輸入 hexo new page link
你會找到source/link/index.md這個文件
修改這個文件：

---
title: 友情鏈接
date: 2018-06-07 22:17:49
type: "link"
---

友情鏈接添加

在Hexo博客目錄中的source/_data，創建一個文件link.yml

class:
  class_name: 友情鏈接
  link_list:
    1:
      name: xxx
      link: https://blog.xxx.com
      avatar: https://cdn.xxxxx.top/avatar.png
      descr: xxxxxxx
    2:
      name: xxxxxx
      link: https://www.xxxxxxcn/
      avatar: https://xxxxx/avatar.png
      descr: xxxxxxx  

 class2:
   class_name: 鏈接無效
   link_list:
     1:
       name: 夢xxx
       link: https://blog.xxx.com
       avatar: https://xxxx/avatar.png
       descr: xxxx
     2:
       name: xx
       link: https://www.axxxx.cn/
       avatar: https://x
       descr: xx

友情鏈接界面設置

需要添加友情鏈接，可以在Butterfly.yml配置
可在友情鏈接上寫上自己的個人資料，方便其他人添加。

Flink:
  headline: 友情鏈接
  info_headline: 我的Blog資料
  name: Blog 名字： JerryC
  address: Blog 地址： https://jerryc.me/
  avatar: Blog 頭像： https://jerryc.me/img/avatar.png
  info: Blog 簡介： 今日事,今日畢
  comment: 如果需要交換友鏈,請留言

配置文件説明

第三方支持

valine:
  enable: false # if you want use valine,please set this value is true
  appId:   # leancloud application app id
  appKey:   # leancloud application app key
  notify: false # valine mail notify (true/false) https://github.com/xCss/Valine/wiki
  verify: false # valine verify code (true/false)
  pageSize: 10 # comment list page size
  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
  lang: en # i18n: zh-cn/en/tw
  placeholder: Please leave your footprints # valine comment input placeholder(like: Please leave your footprints )
  guest_info: nick,mail,link #valine comment header inf

配置文件説明

只能選擇一個分享服務商

AddThis

找到你的 pub-id

配置文件説明

配置butterfly.yml

1
2
3

addThis:
  enable: true # or false
  pubid: 你的pub-id

Sharejs

如果你不知道 sharejs，看看它的説明。

配置butterfly.yml

1
2
3

sharejs:
  enable: true
  sites: facebook,twitter,wechat,weibo,qq  #想要顯示的內容

配置文件説明

Addtoany

可以到addtoany查看使用説明

addtoany:
  enable: false
  item:   # 顯示的內容
    - facebook
    - twitter
    - wechat
    - sina_weibo
    - facebook_messenger
    - email
    - copy_link

配置文件説明

搜索系統

Algolia

你需要安裝 hexo-algolia或 hexo-algoliasearch. 根據它們的説明文檔去做相應的配置。
配置butterfly.yml

algolia_search:
  enable: true
  hits:
    per_page: 6

  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}" # if there are no result
    hits_stats: "${hits} results found in ${time} ms"

本地搜索

你需要安裝 hexo-generator-search. 根據它的文檔去做相應配置。注意格式只支持 xml。
配置butterfly.yml

local_search:
  enable: false
  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}" # if there are no result

網站驗證

如果需要搜索引擎收錄網站，可能需要登錄對應搜索引擎的管理平台進行提交。
各自的驗證碼可從各自管理平台拿到

配置butterfly.yml

# Google Webmaster tools verification setting
# See: https://www.google.com/webmasters/
google_site_verification:

# Bing Webmaster tools verification setting
# See: https://www.bing.com/webmaster/
bing_site_verification:

# Yandex Webmaster tools verification setting
# See: https://webmaster.yandex.ru/
yandex_site_verification:

# Baidu Webmaster tools verification setting
# See: https://ziyuan.baidu.com/site/
baidu_site_verification:

# 360 Webmaster tools verification setting
# see http://zhanzhang.so.com/
qihu_site_verification:

分析統計

百度統計

登錄百度統計的官方網站
找到你百度統計的統計代碼

配置文件説明

3. 配置butterfly.yml

1	baidu_analytics: 你的代碼

谷歌分析

登錄谷歌分析的官方網站
找到你的谷歌分析的跟蹤 ID

配置文件説明

配置butterfly.yml

1	google_analytics: 你的代碼 # 通常以`UA-`打頭

訪問人數 (UV 和 PV)

busuanzi

訪問 busuanzi 的官方網站查看更多的介紹。

配置butterfly.yml

busuanzi:
  site_uv: true
  site_pv: true
  page_pv: true

配置文件説明

MathJax

建議使用 KaTex 獲得更好的效果，下文有介紹！

配置butterfly.yml:

1
2
3

mathjax:
  enable: true # or false
  cdn: https://cdn.bootcss.com/mathjax/2.7.2/MathJax.js?config=TeX-AMS-MML_HTMLorMML # required

然後你需要修改一下默認的markdown渲染引擎來實現 MathJax 的效果。

查看: hexo-renderer-kramed

以下操作在你 hexo 博客的目錄下 (不是 Butterfly 的目錄!):

配置文件説明

效果：

配置文件説明

KaTeX

首先禁用MathJax（如果你配置過 MathJax 的話），然後修改你的butterfly.yml以便加載katex.min.css:

katex:
  enable: true
  cdn:
    css: https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css

你不需要添加katex.min.js來渲染數學方程。相應的你需要卸載你之前的 hexo 的 markdown 渲染器以及hexo-math，然後安裝新的hexo-renderer-markdown-it-plus:

# 替換 `hexo-renderer-kramed` 或者 `hexo-renderer-marked` 等hexo的markdown渲染器
# 你可以在你的package.json裏找到hexo的markdwon渲染器，並將其卸載
npm un hexo-renderer-marked --save

# or

npm un hexo-renderer-kramed --save

# 卸載 `hexo-math`
npm un hexo-math --save

# 然後安裝 `hexo-renderer-markdown-it-plus`
npm i @upupming/hexo-renderer-markdown-it-plus --save

注意到 hexo-renderer-markdown-it-plus已經無人持續維護, 所以我們使用 @upupming/hexo-renderer-markdown-it-plus。這份 fork 的代碼使用了 @neilsustc/markdown-it-katex同時它也是 VSCode 的插件 Markdown All in One所使用的, 所以我們可以獲得最新的 KaTex 功能例如 /tag{}。

你還可以通過 @neilsustc/markdown-it-katex控制 KaTeX 的設置，所有可配置的選項參見 https://katex.org/docs/options.html。比如你想要禁用掉 KaTeX 在命令行上輸出的宂長的警告信息，你可以在根目錄的 _config.yml 中使用下面的配置將 strict 設置為 false:

markdown_it_plus:
  plugins:
    - plugin:
      name: '@neilsustc/markdown-it-katex'
      enable: true
      options:
        strict: false

當然，你還可以利用這個特性來定義一些自己常用的 macros。

因為 KaTeX 更快更輕量，因此沒有 MathJax 的功能多（比如右鍵菜單）。為那些使用 MathJax 的用户，我們也為 KaTeX 默認添加了 Copy As TeX Code的功能。

配置文件説明

特效

打字效果

打字效果activate-power-mode

配置butterfly.yml

1 2	activate_power_mode: enable: true

配置文件説明

靜止彩帶

好看的彩帶背景，可設置每次刷新更換彩帶，或者每次點擊更換彩帶

配置butterfly.yml

canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false  #設置是否每次點擊都更換彩帶

相關配置可查看canvas_ribbon

動態彩帶

好看的彩帶背景，會飄動

配置butterfly.yml

1 2	canvas_ribbon_piao: enable: true

配置文件説明

煙花效果

配置butterfly.yml

1 2	fireworks: enable: true

配置文件説明

PWA

要為Butterfly配上 PWA 特性, 你需要如下幾個步驟:

打開 hexo 工作目錄
npm install hexo-offline --save 或者 yarn add hexo-offline
修改_config.yml 在站點_config.yml中增加以下內容。

# offline config passed to sw-precache.
offline:
  maximumFileSizeToCacheInBytes: 10485760 # 緩存的最大文件大小，以字節為單位
  staticFileGlobs:
    - public/**/*.{js,html,css,png,jpg,gif,svg,webp,eot,ttf,woff,woff2}
  # 靜態文件合集，如果你的站點使用了例如webp格式的文件，請將文件類型添加進去。
  stripPrefix: public
  verbose: true
  runtimeCaching:
    # CDNs - should be cacheFirst, since they should be used specific versions so should not change
    - urlPattern: /* # 如果你需要加載CDN資源，請配置該選項，如果沒有，可以不配置。
      handler: cacheFirst
      options:
        origin: your_websie_url # 可替換成你的 url

更多內容請查看 hexo-offline的官方文檔

在butterfly.yml中開啟 pwa 選項。

pwa:
  enable: true
  manifest: /img/pwa/manifest.json
  theme_color: "#fff"
  apple_touch_icon: /img/pwa/apple-touch-icon.png
  favicon_32_32: /img/pwa/32.png
  favicon_16_16: /img/pwa/16.png
  mask_icon: /img/pwa/safari-pinned-tab.svg

在創建source/目錄中創建manifest.json文件。

{
    "name": "string", //應用全稱
    "short_name": "Junzhou", //應用簡稱
    "theme_color": "#49b1f5", //匹配瀏覽器的地址欄顏色
    "background_color": "#49b1f5",//加載應用時的背景色
    "display": "standalone",//首選顯示模式 其他選項有：fullscreen,minimal-ui,browser
    "scope": "/",
    "start_url": "/",
    "icons": [ //該數組指定icons圖標參數，用來時適配不同設備（需為png，至少包含一個192px*192px的圖標）
        {
          "src": "images/pwaicons/36.png", //圖標文件的目錄，需在source/目錄下自行創建。
          "sizes": "36x36",
          "type": "image/png"
        },
        {
            "src": "images/pwaicons/48.png",
          "sizes": "48x48",
          "type": "image/png"
        },
        {
          "src": "images/pwaicons/72.png",
          "sizes": "72x72",
          "type": "image/png"
        },
        {
          "src": "images/pwaicons/96.png",
          "sizes": "96x96",
          "type": "image/png"
        },
        {
          "src": "images/pwaicons/144.png",
          "sizes": "144x144",
          "type": "image/png"
        },
        {
          "src": "images/pwaicons/192.png",
          "sizes": "192x192",
          "type": "image/png"
        },
        {
            "src": "images/pwaicons/512.png",
            "sizes": "512x512",
            "type": "image/png"
          }
      ],
      "splash_pages": null //配置自定義啟動動畫。
  }

你也可以通過 Web App Manifest快速創建manifest.json。（Web App Manifest 要求至少包含一個 512*512 像素的圖標）

可以通過Chrome插件Lighthouse檢查 PWA 配置是否生效以及配置是否正確。

打開博客頁面
啟動Lighthouse插件 (Lighthouse插件要求至少包含一個 512*512 像素的圖標)

關於 PWA（漸進式增強 Web 應用）的更多內容請參閲 Google Tools for Web Developers

字數統計

要為Butterfly配上字數統計特性, 你需要如下幾個步驟:

打開 hexo 工作目錄
npm install hexo-wordcount --save or yarn add hexo-wordcount
配置butterfly.yml:

1 2	wordcount: enable: true

配置文件説明

文章置頂

要為你一些文章置頂，你需要如下步驟:

打開 hexo 工作目錄
npm uninstall hexo-generator-index --save 然後 npm install hexo-generator-index-pin-top --save
你要在文章的front-matter區域裏添加top: True屬性來把這篇文章置頂。
你可以參考 hexo-generator-index-pin-top這個倉庫來了解更多細節。

舉個例子:

你的某篇文章開頭如下：

title: xxxx
tags:
  - xxx
date: 2018-08-08 08:08:08
---
// ....

現在把top: True加進去：

title: xxxx
tags:
  - xxx
date: 2018-08-08 08:08:08
top: True
---
// ....

Q & A

Q. 頁面只顯示 extends includes/layout.pug block content #recent-posts.recent-posts include includes/recent-posts.pug include includes/pagination.pug #aside_content.aside_content include includes/aside.pug

A. 请下载安装：npm install hexo-renderer-jade hexo-renderer-stylus --save or yarn add hexo-renderer-jade hexo-renderer-stylus

Q. 報錯

ERROR C:/Users/Shawn/Desktop/Blog/themes/Butterfly/layout/includes/layout.pug:18
16|
17| - var pageDescription = page.description || page.title || config.description || ‘’

18| - var pageKeywords = (config.keywords || []).join(‘,’)
19| - if (page.tags && page.tags.data) pageKeywords = page.tags.data.map(function(tag) {return tag.name;}).join(‘,’)
20| - var pageAuthor = config.email ? config.author + ‘,’ + config.email : config.author
21| - var pageCopyright = config.copyright || config.author

(config.keywords || []).join is not a function

A: 在Hexo的 _config文檔裏的keywords改成一下形式

1	keywords: [Jerry,JerryC,blog,安卓博客,安卓,程序员,个人博客,安卓開發,安卓博客,程序員,安卓開發,個人博客,Android]

Q: 配置友情鏈接頁面時出現報錯

ERROR D:/Desktop/orxing-blog/themes/Butterfly/layout/flink.pug:2
    1| .flink
  > 2|   each i in site.data.link
    3|     p.comment-word= i.class_name
    4|     .post-cards
    5|       ul.md-links

Cannot read property 'length' of undefined
TypeError: D:/Desktop/orxing-blog/themes/Butterfly/layout/flink.pug:2
    1| .flink
  > 2|   each i in site.data.link
    3|     p.comment-word= i.class_name
    4|     .post-cards
    5|       ul.md-links

Cannot read property 'length' of undefined
    at eval (eval at wrap (D:/Desktop/orxing-blog/node_modules/pug-runtime/wrap.js:6:10), <anonymous>:1890:32)
    at eval (eval at wrap (D:/Desktop/orxing-blog/node_modules/pug-runtime/wrap.js:6:10), <anonymous>:2017:4)
    at template (eval at wrap (D:/Desktop/orxing-blog/node_modules/pug-runtime/wrap.js:6:10), <anonymous>:10152:72)
    at Theme._View.View._compiled (D:/Desktop/orxing-blog/node_modules/hexo/lib/theme/view.js:123:48)
    at Theme._View.View.View.render (D:/Desktop/orxing-blog/node_modules/hexo/lib/theme/view.js:29:15)
    at D:/Desktop/orxing-blog/node_modules/hexo/lib/hexo/index.js:349:21
    at tryCatcher (D:/Desktop/orxing-blog/node_modules/bluebird/js/release/util.js:16:23)
    at D:/Desktop/orxing-blog/node_modules/bluebird/js/release/method.js:15:34
    at RouteStream._read (D:/Desktop/orxing-blog/node_modules/hexo/lib/hexo/router.js:123:3)
    at RouteStream.Readable.read (_stream_readable.js:457:10)
    at resume_ (_stream_readable.js:936:12)
    at processTicksAndRejections (internal/process/task_queues.js:84:9)

A: 請檢查 link.yml文檔内代碼的空格

转载请注明：逗比根据地 » 配置文件説明

快速開始

主題安裝和升級

安裝

應用主題

平滑升級

配置

配置文件説明

語言

自定義主題色

代碼高亮主題

代碼複製

代碼換行

社交圖標

導航菜單

主頁文章節選(自動節選和文章頁description)

頂部圖

page頁

當具體url時

當頂部圖留空，true和false

post頁

文章相關項

文章版權

文章打賞

文章封面

頭像

TOC

為特定的文章配置是否顯示TOC和特定的目錄章節數字

設置是否自動打開TOC

博客年份

頁腳自定義文本

ICP

夜間模式

閲讀模式

簡繁轉換

運行時間

側邊排版

相關文章

自定義字體

網站副標題

主題頁面

Page Front-matter

Post Front-matter

標籤頁

分類頁

相冊

創建相冊頁

友情鏈接

創建友情鏈接頁面

友情鏈接添加

友情鏈接界面設置

第三方支持

評論

Disqus

Laibili（來必力）

Gitment

Gitalk

Valine

分享

AddThis

Sharejs

Addtoany

搜索系統

Algolia

本地搜索

網站驗證

分析統計

百度統計

谷歌分析

訪問人數 (UV 和 PV)

busuanzi

MathJax

KaTeX

特效

打字效果

靜止彩帶

動態彩帶

煙花效果

PWA

字數統計

文章置頂