buffterfly主题配置

標籤頁

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

記得添加 type: "tags"

1
2
3
4
5
---
title: 標籤
date: 2018-01-05 00:00:00
type: "tags"
---

分類頁

  1. 前往你的 Hexo 博客的根目錄
  2. 輸入 hexo new page categories
  3. 你會找到source/categories/index.md這個文件
  4. 修改這個文件：
    記得添加 type: “categories”
1
2
3
4
5
---
title: 分類
date: 2018-01-05 00:00:00
type: "categories"
---

友情鏈接

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

創建友情鏈接頁面

  1. 前往你的 Hexo 博客的根目錄
  2. 輸入 hexo new page link
  3. 你會找到source/link/index.md這個文件
  4. 修改這個文件：
    記得添加 type: “link”
1
2
3
4
5
---
title: 友情鏈接
date: 2018-06-07 22:17:49
type: "link"
---

友情鏈接添加

本地生成

在Hexo博客目錄中的source/_data（如果沒有 _data 文件夾，請自行創建），創建一個文件link.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
- class_name: 友情鏈接
  class_desc: 那些人，那些事
  link_list:
    - name: Hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、簡單且強大的網誌框架

- class_name: 網站
  class_desc: 值得推薦的網站
  link_list:
    - name: Youtube
      link: https://www.youtube.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: 視頻網站
    - name: Weibo
      link: https://www.weibo.com/
      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
      descr: 中國最大社交分享平台
    - name: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: 社交分享平台

class_name 和 class_desc 支持 html 格式書寫，如不需要，也可以留空。

遠程拉取

從 4.0.0 開始，支持從遠程加載友情鏈接，遠程拉取只支持 json。

注意： 選擇遠程加載後，本地生成的方法會無效。

在 source/link/index.md 這個文件的 front-matter 添加遠程鏈接

1
flink_url: xxxxx

Json 的格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
[
  {
    "class_name": "友情鏈接",
    "class_desc": "那些人，那些事",
    "link_list": [
      {
        "name": "Hexo",
        "link": "https://hexo.io/zh-tw/",
        "avatar": "https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg",
        "descr": "快速、簡單且強大的網誌框架"
      }
    ]
  },
  {
    "class_name": "網站",
    "class_desc": "值得推薦的網站",
    "link_list": [
      {
        "name": "Youtube",
        "link": "https://www.youtube.com/",
        "avatar": "https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png",
        "descr": "視頻網站"
      },
      {
        "name": "Weibo",
        "link": "https://www.weibo.com/",
        "avatar": "https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png",
        "descr": "中國最大社交分享平台"
      },
      {
        "name": "Twitter",
        "link": "https://twitter.com/",
        "avatar": "https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png",
        "descr": "社交分享平台"
      }
    ]
  }
]

404頁面

主題內置了一個簡單的404頁面，可在設置中開啟

本地預覽時，訪問出錯的網站是不會跳到404頁面的。
如需本地預覽，請訪問http://localhost:4000/404.html

1
2
3
4
5
# A simple 404 page
error_404:
  enable: true
  subtitle: "頁面沒有找到"
  background:

導航菜單

修改 主題配置文件

1
2
3
4
5
6
7
8
9
Home: / || fas fa-home
Archives: /archives/ || fas fa-archive
Tags: /tags/ || fas fa-tags
Categories: /categories/ || fas fa-folder-open
List||fas fa-list:
  Music: /music/ || fas fa-music
  Movie: /movies/ || fas fa-video
Link: /link/ || fas fa-link
About: /about/ || fas fa-heart

必須是 /xxx/，後面 ||分開，然後寫圖標名。
如果不希望顯示圖標，圖標名可不寫。
默認子目錄是展開的，如果你想要隱藏，在子目錄裏添加 hide 。

注意： 導航的文字可自行更改
例如：

1
2
3
4
5
6
7
8
9
10
11
12

menu:
  首頁: / || fas fa-home
  時間軸: /archives/ || fas fa-archive
  標籤: /tags/ || fas fa-tags
  分類: /categories/ || fas fa-folder-open
  清單||fa fa-heartbeat:
    音樂: /music/ || fas fa-music
    照片: /Gallery/ || fas fa-images
    電影: /movies/ || fas fa-video
  友鏈: /link/ || fas fa-link
  關於: /about/ || fas fa-heart

代碼

代碼塊中的所有功能只適用於 Hexo 自帶的代碼渲染
如果使用第三方的渲染器，不一定會有效

代碼高亮主題

默認主題

Butterfly 支持6種代碼高亮樣式：

  • darker
  • pale night
  • light
  • ocean
  • mac
  • mac light
    修改 主題配置文件
1
highlight_theme: mac light

自定義主題

代碼複製

主題支持代碼複製功能

修改 主題配置文件

1
highlight_copy: true

代碼框展開/關閉

在默認情況下，代碼框自動展開，可設置是否所有代碼框都關閉狀態，點擊>可展開代碼

  • true 全部代碼框不展開，需點擊>打開
  • false 代碼框展開，有>點擊按鈕
  • none 不顯示>按鈕
    修改 主題配置文件
1
2

highlight_shrink: false #代碼框不展開，需點擊 '>' 打開

代碼換行

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

修改 主題配置文件

1
code_word_wrap: false

如果你是使用 highlight 渲染，需要找到你站點的 Hexo 配置文件 _config.yml，將 line_number改成 false:

1
2
3
4
5
highlight:
  enable: true
  line_number: false # <- 改這裏
  auto_detect: false
  tab_replace:

代碼高度限制

可配置代碼高度限制，超出的部分會隱藏，並顯示展開按鈕。

1
highlight_height_limit: false # unit: px

注意：

  1. 單位是 px，直接添加數字，如 200
  2. 實際限制高度為 highlight_height_limit + 30 px ，多增加 30px 限制，目的是避免代碼高度只超出highlight_height_limit 一點時，出現展開按鈕，展開沒內容。
  3. 不適用於隱藏後的代碼塊（ css 設置 display: none）

社交圖標

Butterfly支持 font-awesome v6圖標.

書寫格式 圖標名：url || 描述性文字

1
2
3
social:
  fab fa-github: https://github.com/xxxxx || Github
  fas fa-envelope: mailto:xxxxxx@gmail.com || Email

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

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

在butterfly裏，有四種可供選擇

  • description： 只顯示description
  • both： 優先選擇description，如果沒有配置description，則顯示自動節選的內容
  • auto_excerpt：只顯示自動節選
  • false： 不顯示文章內容
    修改 主題配置文件
1
2
3
index_post_content:
  method: 3
  length: 500 # if you set method to 2 or 3, the length need to config

在文章的front-matter添加

1
descriptions: xxxx

頂部圖

如果不要顯示頂部圖，可直接配置 disable_top_img: true

配置中的值：

配置 解釋
index_img 主頁的
default_top_img 默認的 top_img，當頁面的 top_img 沒有配置時，會顯示 default_top_img
archive_img 歸檔頁面的 top_img
tag_img tag 子頁面 的 默認 top_img
tag_per_img tag 子頁面的 top_img，可配置每個 tag 的 top_img
category_img category 子頁面 的 默認 top_img
category_per_img category 子頁面的 top_img，可配置每個 category 的 top_img

其它頁面 （tags/categories/自建頁面）和 文章頁 的 top_img ，請到對應的 md 頁面設置 front-matter中的 top_img

以上所有的 top_img 可配置以下值

配置的值 效果
留空 顯示默認的top_img（如有），否則顯示默認的顔色
（文章頁top_img留空的話，會顯示 cover 的值）
img鏈接 圖片的鏈接，顯示所配置的圖片
顔色(
HEX值 - #0000FF
RGB值 - rgb(0,0,255)
顔色單詞 - orange
漸變色 - linear-gradient( 135deg, #E2B0FF 10%, #9F44D3 100%)
） 對應的顔色
transparent 透明
false 不顯示 top_img

文章置頂

直接在文章的 front-matter區域裏添加 sticky: 1屬性來把這篇文章置頂。數值越大，置頂的優先級越大。

文章封面

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

如果不想在首頁顯示cover,可以設置為false

修改 主題配置文件

1
2
3
4
5
6
7
8
9
10
cover:
  # 是否顯示文章封面
  index_enable: true
  aside_enable: true
  archives_enable: true
  # 封面顯示的位置
  # 三個值可配置 left , right , both
  position: both
  # 當沒有設置cover時，默認的封面顯示
  default_cover:

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

1
2
3
4
default_cover:
  - https://fastly.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg.png
  - https://fastly.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg2.png
  - https://fastly.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg3.png

文章页配置

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

修改 主題配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
post_meta:
  page:
    date_type: both # created or updated or both 主頁文章日期是創建日或者更新日或都顯示
    date_format: relative # date/relative 顯示日期還是相對日期
    categories: true # true or false 主頁是否顯示分類
    tags: true # true or false 主頁是否顯示標籤
    label: true # true or false 顯示描述性文字
  post:
    date_type: both # created or updated or both 文章頁日期是創建日或者更新日或都顯示
    date_format: relative # date/relative 顯示日期還是相對日期
    categories: true # true or false 文章頁是否顯示分類
    tags: true # true or false 文章頁是否顯示標籤
    label: true # true or false 顯示描述性文字

文章版權

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

修改 主題配置文件

1
2
3
4
5
6
post_copyright:
  enable: true
  decode: false
  author_href:
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

如果有文章（例如：轉載文章）不需要顯示版權，可以在文章Front-matter單獨設置

1
2
copyright: false
從3.0.0開始，支持對單獨文章設置版權信息，可以在文章Front-matter單獨設置
1
2
3
4
5

copyright_author: xxxx
copyright_author_href: https://xxxxxx.com
copyright_url: https://xxxxxx.com
copyright_info: 此文章版權歸xxxxx所有，如有轉載，請註明來自原作者

文章打賞

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

對於沒有提供二維碼的，可配置一張軟件的icon圖片，然後在link上添加相應的打賞鏈接。用户點擊圖片就會跳轉到鏈接去。

link可以不寫，會默認為圖片的鏈接。

修改 主題配置文件

1
2
3
4
5
6
7
8
9
10

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

相關文章

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

修改 主題配置文件

1
2
3
4
related_post:
  enable: true
  limit: 6 # 顯示推薦文章數目
  date_type: created # or created or updated 文章日期顯示創建日或者更新日

文章分頁按鈕

可設置分頁的邏輯，也可以關閉分頁顯示

1
2
3
4
5
6
# post_pagination (分頁)
# value: 1 || 2 || false
# 1: The 'next post' will link to old post
# 2: The 'next post' will link to new post
# false: disable pagination
post_pagination: false
參數 解釋
post_pagination: false 關閉分頁按鈕
post_pagination: 1 下一篇顯示的是舊文章
post_pagination: 2 下一篇顯示的是新文章

頭像

修改 主題配置文件

1
2
3
avatar:
  img: /img/avatar.png
  effect: true # 頭像會一直轉圈

複製相關配置
可配置網站是否可以複製、複製的內容是否添加版權信息

1
2
3
4
5
6
7
# copy settings
# copyright: Add the copyright information after copied content (複製的內容後面加上版權信息)
copy:
  enable: true
  copyright:
    enable: true
    limit_count: 50
配置 解釋
enable 是否開啟網站複製權限
copyright 複製的內容後面加上版權信息
enable 是否開啟複製版權信息添加
limit_count 字數限制，當複製文字大於這個字數限制時，將在複製的內容後面加上版權信息

頁腳自定義文本

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

修改 主題配置文件

1
custom_text: Hi, welcome to my <a href="https://butterfly.js.org/">blog</a>!

對於部分人需要寫 ICP 的，也可以寫在 custom_text裏

1
custom_text: <a href="icp鏈接"><img class="icp-icon" src="icp圖片"><span>備案號：xxxxxx</span></a>

側邊欄設置

側邊排版

可自行決定哪個項目需要顯示，可決定位置，也可以設置不顯示側邊欄。

修改 主題配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
aside:
  enable: true
  hide: false
  button: true
  mobile: true # 手機頁面（ 顯示寬度 < 768px ）是否顯示aside內容
  position: right # left or right 导航栏位置
  display:
    archive: true
    tag: true
    category: true
  card_author:
    enable: true
    description:
    button:
      enable: true
	  icon: fab fa-github
      text: Github
      link: https://github.com/jerryc127/hexo-theme-butterfly
  card_announcement:
    enable: true
    content: This is my Blog
  card_recent_post:
    enable: true
    limit: 5 # if set 0 will show all
    sort: date # date or updated
  card_categories:
    enable: true
    limit: 8 # if set 0 will show all
    expand: none # none/true/false
  card_tags:
    enable: true
    limit: 40 # if set 0 will show all
    color: true # 设置标签颜色
  card_archives:
    enable: true
    type: monthly # yearly or monthly
    format: MMMM YYYY # eg: YYYY年MM月
    order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
    limit: 8 # if set 0 will show all
  card_webinfo:
    enable: true
    post_count: true
    last_push_date: true

字数统计

要为Butterfly配上字数统计特性, 你需要如下几个步骤:

  1. 打开 hexo 工作目录
  2. npm install hexo-wordcount --save or yarn add hexo-wordcount

修改 主题配置文件:

1
2
3
4
5
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

作者: Jerry
連結: https://butterfly.js.org/posts/ceeb73f/#PWA
來源: Butterfly
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。

作者: Jerry
連結: https://butterfly.js.org/posts/4aa8abbe/#側邊排版
來源: Butterfly
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。
作者: Jerry
連結: https://butterfly.js.org/posts/4aa8abbe/#博客年份
來源: Butterfly
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。