基本用法2 | 黑羽 url:https://butterfly.js.org/posts/4aa8abbe/
配置文件速讀
————————————– 導航設置 ————————————– nav:
導航欄 Logo 圖片 logo:
是否顯示標題 display_title: true
是否在滾動時顯示文章標題 display_post_title: true
是否固定導航欄 fixed: false
menu:
首頁: / || fas fa-home 列表||fas fa-list: 音樂: /music/ || fas fa-music 電影: /movies/ || fas fa-video ————————————– 代碼塊設置 ————————————– code_blocks:
代碼塊主題: darker / pale night / light / ocean / false theme: light
是否使用 Mac 風格 macStyle: false
代碼塊高度限制（單位: px） height_limit: false
是否自動換行 word_wrap: false
工具欄 是否顯示複製按鈕 copy: true
是否顯示語言標籤 language: true
true: 收縮代碼塊 | false: 展開代碼塊 | none: 展開代碼塊並隱藏按鈕 shrink: false
是否顯示全屏顯示代碼塊按鈕 fullpage: false
社交媒體鏈接 格式: icon: 鏈接 || 描述 || 顏色 social:
————————————– 圖片設置 ————————————– 網站的 favicon 圖標 favicon: /img/favicon.png
頭像設置 avatar:
頭像圖片鏈接 img: https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png
是否啟用頭像效果 effect: false
禁用所有橫幅圖片 disable_top_img: false
如果頁面未設置橫幅，則顯示默認的橫幅圖片 default_top_img:
主頁的橫幅圖片 index_img:
歸檔頁的橫幅圖片 archive_img:
注意: 是標籤頁（單個標籤），不是標籤頁面（所有標籤） tag_img:
標籤頁的橫幅圖片，可以為每個標籤設置橫幅圖片 格式: - 標籤名: 圖片鏈接 tag_per_img:
注意: 是分類頁（單個分類），不是分類頁面（所有分類） category_img:
分類頁的橫幅圖片，可以為每個分類設置橫幅圖片 格式: - 分類名: 圖片鏈接 category_per_img:
頁腳的背景圖片 footer_img: false
網站背景 可以設置為顏色或圖片 background:
封面設置 cover:
是否禁用封面 index_enable: true
主頁封面的位置 選擇: left/right/both position: both
當未設置封面時，顯示默認封面 default_cover:
替換損壞的圖片 error_img:
友鏈頁面的錯誤圖片 flink: /img/friend_404.gif
文章頁面的錯誤圖片 post_page: /img/404.jpg
簡單的 404 頁面 error_404:
是否啟用 404 頁面 enable: false
404 頁面的副標題 subtitle: ‘Page Not Found’
404 頁面的卡片背景圖片 background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png
文章元數據設置 post_meta:
主頁頁面 page:
日期類型: created / updated / both date_type: created
日期格式: date / relative date_format: date
是否顯示分類 categories: true
是否顯示標籤 tags: false
是否顯示文字標籤 label: true
文章頁面 post:
元數據位置: left / center position: left
日期類型: created / updated / both date_type: both
日期格式: date / relative date_format: date
是否顯示分類 categories: true
是否顯示標籤 tags: true
是否顯示文字標籤 label: true
————————————– 首頁設置 ————————————– 首頁頭圖的設置 默認: 頭圖全屏，站點信息在中間 站點信息的位置，例如: 300px/300em/300rem/10% index_site_info_top:
頭圖的高度，例如: 300px/300em/300rem index_top_img_height:
首頁的副標題設置 subtitle:
是否啟用副標題 enable: false
是否啟用打字機效果 effect: true
自定義 typed.js typed_option:
來源 - 調用第三方服務 API（僅限中文） 它將首先顯示來源，然後顯示副標題內容 選擇: false/1/2/3 false - 禁用此功能 1 - hitokoto.cn 2 - yijuzhan.com 3 - jinrishici.com source: false
如果關閉打字機效果，副標題將僅顯示 sub 的第一行內容 sub:
首頁文章佈局 1: 行佈局 2: 列布局 index_layout: 1
在首頁顯示文章簡介 1: 描述 2: 兩者（如果存在描述，將顯示描述，否則顯示自動摘要） 3: 自動摘要（默認） false: 不顯示文章簡介 index_post_content:
如果設置 method 為 2 或 3，需要配置長度 length: 500
————————————– 文章設置 ————————————– toc:
是否在文章中顯示目錄 post: true
是否在頁面中顯示目錄 page: false
是否顯示目錄編號 number: true
是否默認展開目錄 expand: false
是否使用簡潔風格（僅適用於文章） style_simple: false
是否顯示滾動百分比 scroll_percent: true
post_copyright:
是否啟用版權聲明 enable: true
是否進行文章 URL 解碼 decode: false
作者鏈接 author_href:
許可證類型 license: CC BY-NC-SA 4.0
許可證鏈接 license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
贊助/打賞 reward:
是否啟用打賞 enable: false
打賞案例文本 text:
- img: /img/wechat.jpg link: text: 微信 - img: /img/alipay.jpg link: text: 支付寶 文章編輯 輕鬆在線瀏覽和編輯博客源代碼 post_edit:
是否啟用在線編輯 enable: false
url:
相關文章 related_post:
是否顯示相關文章 enable: true
顯示的文章數量 limit: 6
選擇: created / updated date_type: created
選擇: 1 / 2 / false 1: “下一篇文章”將鏈接到舊文章 2: “下一篇文章”將鏈接到新文章 false: 禁用分頁 post_pagination: 1
顯示文章過期通知 noticeOutdate:
是否啟用過期通知 enable: false
樣式: simple / flat style: flat
多少天后顯示通知 limit_day: 365
位置: top / bottom position: top
————————————– 頁腳設置 ————————————– footer:
頁腳導航欄配置 nav:
是否啟用所有者顯示 enable: true
網站創建年份 since: 2019
自定義文本 custom_text:
主題和框架的版權聲明 copyright:
顯示版本號 version: true
————————————– 側邊欄設置 ————————————– aside:
是否啟用側邊欄 enable: true
是否默認隱藏側邊欄 hide: false
是否在右下角顯示隱藏側邊欄的按鈕 button: true
移動設備上是否啟用側邊欄 mobile: true
側邊欄位置：left / right position: right
歸檔頁面是否顯示側邊欄 archive: true
標籤頁面是否顯示側邊欄 tag: true
分類頁面是否顯示側邊欄 category: true
是否顯示作者信息卡片 enable: true
作者描述 description:
是否顯示按鈕 enable: true
按鈕圖標 icon: fab fa-github
按鈕文本 text: Follow Me
按鈕鏈接 link: https://github.com/xxxxxx
是否顯示公告卡片 enable: true
公告內容 content: This is my Blog
是否顯示最近文章卡片 enable: true
顯示文章數量，0 表示顯示所有 limit: 5
排序方式：date / updated sort: date
是否顯示最新評論卡片 enable: false
顯示評論數量 limit: 6
單位：分鐘，保存數據到 localStorage storage: 10
是否顯示頭像 avatar: true
是否顯示分類卡片 enable: true
顯示分類數量，0 表示顯示所有 limit: 8
選擇：none / true / false expand: none
是否顯示標籤卡片 enable: true
顯示標籤數量，0 表示顯示所有 limit: 40
是否啟用顏色 color: false
標籤排序方式：random/name/length orderby: random
排序順序：1 表示升序，-1 表示降序 order: 1
是否顯示歸檔卡片 enable: true
歸檔類型：monthly / yearly type: monthly
日期格式，例如：YYYY年MM月 format: MMMM YYYY
排序順序：1 表示升序，-1 表示降序 order: -1
顯示歸檔數量，0 表示顯示所有 limit: 8
是否顯示系列文章卡片 enable: true
標題顯示系列名稱 series_title: false
排序方式：title 或 date orderBy: ‘date’
排序順序：1 表示升序，-1 表示降序 order: -1
是否顯示網站信息卡片 enable: true
是否顯示文章數量 post_count: true
是否顯示最後推送日期 last_push_date: true
發佈日期與當前日期的時間差 格式：Month/Day/Year Time 或 Year/Month/Day Time 如果不啟用此功能，請留空 runtime_date:
————————————– 右下角按鈕設置 ————————————– 右下角按鈕與底部的距離（默認單位：px） rightside_bottom:
簡繁轉換設置 translate:
是否啟用簡繁轉換 enable: false
按鈕文本 default: 繁
網站語言（1 - 繁體中文 / 2 - 簡體中文） defaultEncoding: 2
轉換延遲 translateDelay: 0
按鈕在簡體中文時的文本 msgToTraditionalChinese: ‘繁’
按鈕在繁體中文時的文本 msgToSimplifiedChinese: ‘簡’
閲讀模式 readmode: true
暗黑模式設置 darkmode:
是否啟用暗黑模式 enable: true
切換暗黑/明亮模式的按鈕 button: true
是否自動切換暗黑/明亮模式 autoChangeMode: 1 跟隨系統設置，如果系統不支持暗黑模式，則在晚上 6 點到早上 6 點之間切換暗黑模式 autoChangeMode: 2 在晚上 6 點到早上 6 點之間切換暗黑模式 autoChangeMode: false 不自動切換 autoChangeMode: false
設置明亮模式時間，值在 0 到 24 之間。如果未設置，默認值為 6 和 18 start:
在返回頂部按鈕中顯示滾動百分比 rightside_scroll_percent: false
不要修改以下設置，除非你知道它們的工作原理 不要重複相同的值 rightside_item_order:
是否啟用右側項目順序 enable: false
隱藏的默認項目：readmode,translate,darkmode,hideAside hide:
show:
右下角配置按鈕動畫效果 rightside_config_animation: true
————————————– 全局設置 ————————————– 錨點設置 anchor:
滾動時，URL 將根據標題 ID 更新 auto_update: false
點擊標題滾動並更新錨點 click_to_scroll: false
圖片標題 photofigcaption: false
複製設置 copy:
是否啟用複製功能 enable: true
在複製的內容後添加版權信息 copyright:
當複製字符數超過 limit_count 時添加版權信息 limit_count: 150
需要安裝 hexo-wordcount 插件 wordcount:
是否啟用字數統計 enable: false
在文章元信息中顯示字數統計 post_wordcount: true
在文章元信息中顯示閲讀時間 min2read: true
在側邊欄網站信息中顯示總字數 total_wordcount: true
不蒜子 PV / UV 統計 busuanzi:
網站 UV 統計 site_uv: true
網站 PV 統計 site_pv: true
頁面 PV 統計 page_pv: true
————————————– 數學公式設置 ————————————– 關於 per_page 如果設置為 true，將在每個頁面加載 mathjax/katex 腳本 如果設置為 false，將根據你的設置加載 mathjax/katex 腳本（在頁面的 front-matter 中添加 ‘mathjax: true’ 或者 ‘katex: true’） math:
選擇：mathjax, katex 如果不需要數學公式，保持為空 use:
mathjax:
啟用上下文菜單 enableMenu: true
選擇：all / ams / none，這控制是否對公式編號以及如何編號 tags: none
katex:
啟用複製 KaTeX 公式 copy_tex: false
————————————– 搜索設置 ————————————– search:
選擇：algolia_search / local_search / docsearch 如果不需要搜索功能，保持為空 use:
Algolia 搜索 algolia_search:
每頁搜索結果數量 hitsPerPage: 6
本地搜索 local_search:
頁面加載時預加載搜索數據 preload: false
每篇文章顯示的頂部 n 個搜索結果，設置為 -1 顯示所有結果 top_n_per_article: 1
將 HTML 字符串反轉義為可讀內容 unescape: false
Docsearch docsearch:
————————————– 分享系統 ————————————– share:
選擇：sharejs / addtoany 如果不需要分享功能，保持為空 use: sharejs
Share.js sharejs:
AddToAny addtoany:
————————————– 評論系統 ————————————– comments:
最多兩個評論系統，第一個將作為默認顯示 如果不需要評論功能，保持為空 use:
按鈕旁邊顯示評論系統名稱 text: true
懶加載：評論系統將在評論元素進入瀏覽器視口時加載 如果設置為 true，評論計數將無效 lazyload: false
在文章頂部圖片中顯示評論計數 count: false
在主頁顯示評論計數 card_post_count: false
disqus:
shortname:
最新評論小部件的 API 密鑰 apikey:
disqusjs:
shortname:
API 密鑰 apikey:
其他可選配置 option:
Livere 評論插件配置 livere:
Livere 的用戶 ID uid:
Gitalk 評論插件配置 gitalk:
GitHub 應用的客戶端 ID client_id:
GitHub 應用的客戶端密鑰 client_secret:
存儲評論的倉庫名稱 repo:
倉庫擁有者的用戶名 owner:
管理員用戶名列表 admin:
其他可選配置 option:
Valine 評論插件配置 valine:
LeanCloud 應用的 appId appId:
LeanCloud 應用的 appKey appKey:
評論者頭像樣式 avatar: monsterid
該配置適用於國內自定義域名用戶，海外版本將自動檢測（無需手動填寫） serverURLs:
評論框背景圖片 bg:
使用 Valine 的訪客計數作為頁面的訪客量 visitor: false
其他可選配置 option:
Waline 評論插件配置，一個簡單的評論系統，基於 Valine 開發，支持後端 waline:
服務器 URL serverURL:
評論框背景圖片 bg:
使用 Waline 的訪客計數作為頁面的訪客量 pageview: false
其他可選配置 option:
Utterances 評論插件配置 utterances:
存儲評論的 GitHub 倉庫 repo:
問題映射方式，可選值：pathname/url/title/og:title issue_term: pathname
淺色主題，可選值：github-light light_theme: github-light
深色主題，可選值：photon-dark dark_theme: photon-dark
Facebook 評論插件配置 facebook_comments:
應用 ID app_id:
用戶 ID，可選 user_id:
每頁顯示評論數 pageSize: 10
評論排序方式，可選值：social / time / reverse_time order_by: social
語言設置 lang: zh_TW
Twikoo 評論插件配置 twikoo:
環境 ID envId:
區域 region:
使用 Twikoo 的訪客計數作為頁面的訪客量 visitor: false
其他可選配置 option:
Giscus 評論插件配置 giscus:
倉庫地址 repo:
倉庫 ID repo_id:
分類 ID category_id:
主題配置，light 為淺色主題，dark 為深色主題 theme:
其他可選配置 option:
remark42:
服務器地址 host:
站點 ID siteId:
其他可選配置 option:
Artalk 評論插件配置 artalk:
服務器地址 server:
站點名 site:
使用 Artalk 的訪客計數作為頁面的訪客量 visitor: false
其他可選配置 option:
————————————– 聊天服務配置 ————————————– chat:
聊天服務類型，可選值：chatra/tidio/crisp，如果不需要聊天功能則留空 use:
推薦使用聊天按鈕，會在網站右下角創建一個按鈕，並隱藏原始按鈕 rightside_button: false
原始聊天按鈕在向上滾動時顯示，向下滾動時隱藏 button_hide_show: false
Chatra 聊天服務配置 chatra:
Chatra 服務 ID id:
Tidio 聊天服務配置 tidio:
Tidio 公鑰 public_key:
Crisp 聊天服務配置 crisp:
Crisp 網站 ID website_id:
————————————– 分析服務配置 ————————————– 百度統計配置 baidu_analytics:
谷歌分析配置 google_analytics:
Cloudflare 分析配置 cloudflare_analytics:
Microsoft Clarity 分析配置 microsoft_clarity:
umami_analytics:
給自託管的 Umami 實例配置主機名 serverURL:
Umami Cloud (API key) / self-hosted Umami (token) token:
google_tag_manager:
可選配置 domain:
————————————– 廣告配置 ————————————– Google Adsense 廣告配置 google_adsense:
是否啟用 enable: false
是否自動投放廣告 auto_ads: true
廣告腳本 URL js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
客戶 ID client:
是否啟用頁面級廣告 enable_page_level_ads: true
手動插入廣告配置，如果不需要廣告則留空 ad:
在首頁每三個帖子後插入廣告 index:
在側邊欄插入廣告 aside:
在文章分頁前插入廣告 post:
————————————– 站點驗證配置 ————————————– site_verification:
示例： - name: google-site-verification content: xxxxxx - name: baidu-site-verification content: xxxxxxx ————————————– 美化 / 效果 ————————————– 主題顏色自定義 注意：顏色值必須用雙引號，如 “#000”，否則可能會導致錯誤！ 主題顏色配置 theme_color: 是否啟用主題顏色 enable: true 主顏色 main: “#49B1F5” 分頁器顏色 paginator: “#00c4b6” 按鈕懸停顏色 文本選擇顏色 text_selection: “#00c4b6” 鏈接顏色 link_color: “#99a9bf” 元數據顏色 水平線顏色 hr_color: “#A4D8FA” 代碼前景色 code_foreground: “#F47466” 代碼背景色 code_background: “rgba(27, 31, 35, .05)” 目錄顏色 toc_color: “#00c4b6” 引用塊填充顏色 blockquote_padding_color: “#49b1f5” 引用塊背景顏色 blockquote_background_color: “#49b1f5” 滾動條顏色 淺色模式下的主題顏色 深色模式下的主題顏色 分類和標籤頁面的用戶界面設置 選擇：index - 與主頁 UI 相同 / default - 與歸檔 UI 相同 留空或設置為 index category_ui:
拉伸行使每行寬度相等 text_align_justify: false
為頁眉和頁腳添加遮罩 mask:
加載動畫 preloader:
是否啟用加載動畫 enable: false
資源 1. 全屏加載 2. 進度條 source: 1
pace_css_url:
頁面過渡效果 enter_transitions: true
默認顯示模式 - light (默認) / dark display_mode: light
美化文章內容的配置 beautify:
是否啟用美化 enable: false
指定美化的範圍 (site 或 post) field: post
指定標題前綴圖標，如 ‘\f0c1’ title-prefix-icon:
指定標題前綴圖標的顏色，如 ‘#F47466’ title-prefix-icon-color:
全局字體設置 除非您知道它們的工作原理，否則不要修改以下設置 font:
網站標題和副標題的字體設置 blog_title_font:
分隔符圖標的設置 hr_icon:
是否啟用分隔符圖標 enable: true
Font Awesome 圖標的 unicode 值，如 ‘\3423’ icon:
打字機效果 activate_power_mode:
是否啟用打字機效果 enable: false
是否啟用彩色效果 colorful: true
是否啟用震動效果 shake: true
是否在移動設備上啟用 mobile: false
背景效果 ————————————– canvas_ribbon canvas_ribbon:
是否啟用 canvas_ribbon enable: false
ribbon 的大小 size: 150
ribbon 的不透明度 (0 ~ 1) alpha: 0.6
是否點擊更改顏色 click_to_change: false
是否在移動設備上啟用 mobile: false
Fluttering Ribbon canvas_fluttering_ribbon:
是否啟用 Fluttering Ribbon enable: false
是否在移動設備上啟用 mobile: false
canvas_nest canvas_nest:
是否啟用 canvas_nest enable: false
線條顏色，默認: ‘0,0,0’; RGB 值: (R,G,B).(注意: 使用 ‘,’ 分隔.) color: ‘0,0,255’
線條的不透明度 (0~1) opacity: 0.7
背景的 z-index 屬性 zIndex: -1
線條數量 count: 99
是否在移動設備上啟用 mobile: false
鼠標點擊效果: 煙花 fireworks:
是否啟用煙花效果 enable: false
是否在移動設備上啟用 mobile: false
鼠標點擊效果: 心形符號 click_heart:
是否啟用心形符號效果 enable: false
是否在移動設備上啟用 mobile: false
鼠標點擊效果: 文字 clickShowText:
是否啟用文字效果 enable: false
- I - LOVE - YOU fontSize: 15px
是否隨機顯示文字 random: false
是否在移動設備上啟用 mobile: false
————————————– 燈箱設置 ————————————– 選擇: fancybox / medium_zoom 如果不需要燈箱效果，請留空 lightbox:
————————————– 標籤外掛設置 ————————————– 系列 series:
是否啟用系列 enable: false
按標題或日期排序 orderBy: ‘title’
排序方式。1, asc 為升序; -1, desc 為降序 order: 1
是否顯示編號 number: true
ABCJS - ABC 音樂符號插件 abcjs:
是否啟用 ABCJS enable: false
是否每頁啟用 per_page: true
Mermaid mermaid:
是否啟用 Mermaid enable: false
使用代碼塊編寫 Mermaid 圖表 code_write: false
內置主題: default / forest / dark / neutral theme:
chartjs chartjs:
除非你瞭解它們的工作原理，否則不要修改。 默認設置僅在未指定 MD 語法時使用。 圖表的字體顏色 fontColor:
圖表的邊框顏色 borderColor:
雷達圖和極區圖的刻度標籤背景顏色 scale_ticks_backdropColor:
Note - Bootstrap 提示框 note:
Note 標籤樣式值: - simple bs-callout 舊警告樣式。默認。 - modern bs-callout 新 (v2-v3) 警告樣式。 - flat 扁平提示框樣式，帶背景，如 Mozilla 或 StackOverflow。 - disabled 禁用所有 Note 標籤的 CSS 樣式。 style: flat
是否顯示圖標 icons: true
邊框半徑 border_radius: 3
背景顏色偏移百分比 (modern: -12 | 12; flat: -18 | 6)。 也應用於標籤變量。此選項可與禁用的 Note 標籤一起使用。 light_bg_offset: 0
————————————– 其他設置 ————————————– pjax:
是否啟用 pjax enable: false
排除指定頁面不使用 pjax，如 ‘/music/‘ exclude:
- /xxxxxx/ 注入 CSS 和腳本 (aplayer/meting) aplayerInject:
是否啟用注入 enable: false
是否每頁啟用 per_page: true
Snackbar - Toast 通知 位置: top-left / top-center / top-right / bottom-left / bottom-center / bottom-right snackbar:
是否啟用 Snackbar enable: false
通知位置 position: bottom-left
淺色模式和深色模式下的通知背景顏色 bg_light: ‘#49b1f5’
Instant.page instantpage: false
Lazyload lazyload:
是否啟用 Lazyload enable: false
使用瀏覽器的原生 lazyload 而不是 vanilla-lazyload native: false
指定使用 Lazyload 的範圍 (site 或 post) field: site
PWA ————— pwa:
是否啟用 PWA enable: false
PWA manifest 文件路徑 manifest:
Apple Touch 圖標路徑 apple_touch_icon:
32x32 像素的 favicon 圖標路徑 favicon_32_32:
16x16 像素的 favicon 圖標路徑 favicon_16_16:
mask 圖標路徑 mask_icon:
Open_Graph_meta:
enable: true
google_plus: fb_admins: fb_app_id: 結構化數據 structured_data: true
添加供應商前綴以確保兼容性 是否啟用 CSS 前綴 css_prefix: true
Inject 插入代碼到 head（在 ‘‘ 標籤之前）和底部（在 ‘ inject:
- bottom:
- CDN 設置 除非你知道它們的工作原理，否則不要修改以下設置 CDN:
內部和第三方腳本的 CDN 提供商 兩者的選項：local/jsdelivr/unpkg/cdnjs/custom 注意： Dev 版本只能使用 ‘local’ 作為內部腳本 注意：將第三方腳本設置為 ‘local’ 時，需要安裝 hexo-butterfly-extjs internal_provider: local
是否在 URL 中添加版本號，true 或 false version: false
自定義格式 custom_format:
option:
默認語言是 en
主題支持
default(en)
導航
Navigation bar logo image logo: /xxxx.png
Whether to fix navigation bar fixed: false
如果不希望顯示圖標，圖標名可不寫。
默認子目錄是展開的，如果你想要隱藏，在子目錄裡添加 hide 。
List||fas fa-list||hide:
例如：
menu:
代碼塊
如果使用第三方的渲染器，不一定會有效
code_blocks:
Code block theme: darker / pale night / light / ocean / false theme: light
Code block height limit (unit: px) height_limit: false
copy: true
shrink: false
darker
darker
pale night
light
ocean
macStyle
代碼框展開/關閉
true 全部代碼框不展開，需點擊>打開
當主題配置文件中的 highlight_shrink 設為 true 時，可在 front-matter 添加highlight_shrink: false來單獨配置文章展開代碼框。
當主題配置文件中的 highlight_shrink 設為 false 時，可在 front-matter 添加highlight_shrink: true來單獨配置文章收縮代碼框。
highlight_shrink: true
highlight_shrink: false
highlight_shrink: none
代碼換行
code_word_wrap: true
highlight:
prismjs:
設置code_word_wrap之後
代碼高度限制
可配置代碼高度限制，超出的部分會隱藏，並顯示展開按鈕。
highlight_height_limit: false # unit: px
單位是 px，直接添加數字，如 200
實際限制高度為 highlight_height_limit + 30 px ，多增加 30px 限制，目的是避免代碼高度只超出 highlight_height_limit 一點時，出現展開按鈕，展開沒內容。
不適用於隱藏後的代碼塊（ css 設置 display: none）
社交圖標
書寫格式 圖標名：url || 描述性文字 || color
social:https://github.com/xxxxx || Github || “#hdhfbb”xxxxxx@gmail.com || Email || “#000000”
PC:
!
Mobile:
圖片設置
頂部圖
頂部圖的獲取順序，如果都沒有配置，則不顯示頂部圖。
頁面頂部圖的獲取順序：
各自配置的 top_img > 配置文件的 default_top_img
文章頁頂部圖的獲取順序：
各自配置的 top_img > cover > 配置文件的 default_top_img
配置中的值：
配置 解釋
以上所有的 top_img 可配置以下值
配置的值 效果
並不推薦為每個 tag 和每個 category 都配置不同的頂部圖，因為配置太多會拖慢生成速度
tag_per_img:https://xxxxxx.png
category_per_img：
top_img: orange
top_img: ‘linear-gradient(20deg, #0062be, #925696, #cc426e, #fb0347)’
頁腳背景圖
footer_img: true
網站背景
顏色（HEX值/RGB值/顔色單詞/漸變色) 留空 不顯示背景 background:https://yoursite.com/blog,引用一張img/xx.png圖片，則設置 background 為 /blog/img/xx.png
background:’#49B202’
background: https://i.loli.net/2019/09/09/5oDRkWVKctx2b6A.png
文章封面
如果不配置 cover,可以設置顯示默認的 cover。
如果不想在首頁顯示 cover, 可以設置為 false。
文章封面的獲取順序 Front-matter 的 cover > 配置文件的 default_cover > false
cover:
是否顯示文章封面 index_enable: true
default_cover:
頁面 meta 顯示
post_meta:
Home Page page:
Choose: created / updated / both date_type: created
Choose: date / relative date_format: date
Choose: left / center position: left
Choose: created / updated / both date_type: both
Choose: date / relative date_format: date
參數 解釋
參數 解釋
文章頁
date_format 是 3.2.0 新增的內容，配置時間顯示明確時間還是相對時間
相對時間
明確時間
首頁
主頁設置 默認top_img全屏，site_info在中間 使用默認, 都無需填寫（建議默認） index_site_info_top: # 主頁標題距離頂部距離 例如 300px/300em/300rem/10%
舉例，當
index_top_img_height: 400px
網站副標題
主頁subtitle subtitle:
Typewriter Effect (打字效果) effect: true
Customize typed.js typed_option:
source 調用第三方服務 false 關閉調用 subtitle 會先顯示 source , 再顯示 sub 的內容 source: false
如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字 sub:
今日事,今日畢
Never put off till tomorrow what you can do today
首頁卡片佈局
index_layout: 3
配置值 解釋
1: 封面在左，信息在右
2: 封面在右，信息在左
3: 封面和信息左右交替顯示
4: 封面在上，信息在下
5: 信息顯示在封面上
6: 瀑布流佈局 - 封面在上，信息在下
7: 瀑布流佈局 - 信息顯示在封面上
主頁文章節選
Display the article introduction on homepage 1: description 2: both (if the description exists, it will show description, or show the auto_excerpt) 3: auto_excerpt (default) false: do not show the article introduction index_post_content:
If you set method to 2 or 3, the length need to config length: 500
文章頁
toc:
Only for post style_simple: false
Toc Mobile
style_simple: true
為特定的文章配置
主題會優先判斷文章 Markdown 的 Front-matter 是否有配置，如有，則以 Front-matter 的配置為準。否則，以主題配置文件中的配置為準。
文章版權
post_copyright:
是否啟用版權聲明 enable: true
是否進行文章 URL 解碼 decode: false
作者鏈接 author_href:
許可證類型 license: CC BY-NC-SA 4.0
許可證鏈接 license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
如果有文章（例如：轉載文章）不需要顯示版權，可以在文章 Front-matter 單獨設置
copyright: false
copyright_author: xxxxhttps://xxxxxx.com https://xxxxxx.com
文章打賞/贊助
對於沒有提供二維碼的，可配置一張軟件的 icon 圖片，然後在 link 上添加相應的贊助鏈接。用戶點擊圖片就會跳轉到鏈接去。
link 可以不寫，會默認為圖片的鏈接。
reward:
img: /img/wechat.jpg
img: /img/alipay.jpg
文章編輯按鈕
Post edit Easily browse and edit blog source code online. post_edit:
url:
相關文章
相關文章推薦的原理是根據文章 tags 的比重來推薦
related_post:
文章分頁按鈕
可設置分頁的邏輯，也可以關閉分頁顯示
value: 1 || 2 || false 1: The ‘next post’ will link to old post 2: The ‘next post’ will link to new post post_pagination: false
文章過期提醒
可設置是否顯示文章過期提醒，以更新時間為基準。
Displays outdated notice for a post noticeOutdate:
Style: simple / flat style: flat
When will it be shown limit_day: 365
Position: top / bottom position: top
style: simple
頁腳
你可以配置或者留空
以下是示例：
nav:
width:
title: 文檔
title: 🚀 快速開始
title: 📑 主題頁面
title: 📌 主題配置
title: ⚔️ 標簽外掛
title: ❓ 主題問答
title: ⚡️ 進階教程
content:
title: 其他
title: 圖庫
title: 留言板
title: 說說
title: 示例
title: 友鏈
content:
content:
配置 解釋
footer:
頁腳自定義文本
custom_text: Hi, welcome to my blog !
對於部分人需要寫 ICP 的，也可以寫在 custom_text裡
custom_text: 備案號：xxxxxx
aside:
button: true
Position: left / right position: righthttps://github.com/xxxxxx
If set 0 will show all limit: 5
Sort: date / updated sort: date
Unit: mins, save data to localStorage storage: 10
If set 0 will show all limit: 8
Choose: none / true / false expand: none
If set 0 will show all limit: 40
orderby: random
Sort of order. 1, asc for ascending; -1, desc for descending order: 1
Type: monthly / yearly type: monthly
Eg: YYYY年MM月 format: MMMM YYYY
Sort of order. 1, asc for ascending; -1, desc for descending order: -1
If set 0 will show all limit: 8
The title shows the series name series_title: false
Order by title or date orderBy: ‘date’
Sort of order. 1, asc for ascending; -1, desc for descending order: -1
Time difference between publish date and now Leave it empty if you don’t enable this feature runtime_date:
配置 解釋https://fontawesome.com/icons?d=gallery&m=free
最新評論只會在刷新時才會去讀取，並不會實時變化
由於 API 有 訪問次數限制，為了避免調用太多，主題默認存取期限為 10 分鐘。也就是説，調用後資料會存在 localStorage 裡，10 分鐘內刷新網站只會去 localStorage 讀取資料。 10 分鐘期限一過，刷新頁面時才會去調取 API 讀取新的數據。（ 3.6.0 新增了 storage 配置，可自行配置緩存時間）
position: left
position: right
card_tags color: false
card_tags color: true
aside button
運行時間
最新評論
自定義添加欄目
rightside_bottom:
簡繁轉換
開啟後，右下角會有簡繁轉換按鈕。
translate:
默認按鈕顯示文字(網站是簡體，應設置為’default: 繁’) default: 簡
只會出現在文章頁面，右下角會有閲讀模式按鈕。
readmode: true
夜間模式
dark mode darkmode:
dark mode和 light mode切換按鈕 button: true
Set the light mode time. The value is between 0 and 24. If not set, the default value is 6 and 18 start: # 8
滾動狀態百分比
rightside_scroll_percent: true
按鈕排序
注意： 不要重複
Don’t modify the following settings unless you know how they work (非必要請不要修改 ) Don’t repeat 不要重複 rightside_item_order:
anchor anchor:
auto_update: false
click_to_scroll: false
優先顯示圖片的 title 屬性，然後是 alt 屬性
photofigcaption: true
複製相關配置
copy:
Add the copyright information after copied content copyright:
Lorem ipsum dolor sit amet, test link consectetur adipiscing elit. Strong text pellentesque ligula commodo viverra vehicula. Italic text at ullamcorper enim. Morbi a euismod nibh. Underline text non elit nisl. Deleted text tristique, sem id condimentum tempus, metus lectus venenatis mauris, sit amet semper lorem felis a eros. Fusce egestas nibh at sagittis auctor. Sed ultricies ac arcu quis molestie. Donec dapibus nunc in nibh egestas, vitae volutpat sem iaculis. Curabitur sem tellus, elementum nec quam id, fermentum laoreet mi. Ut mollis ullamcorper turpis, vitae facilisis velit ultricies sit amet. Etiam laoreet dui odio, id tempus justo tincidunt id. Phasellus scelerisque nunc sed nunc ultricies accumsan.
作者: Jerryhttp://localhost:4000/posts/bd3c650b/#Paragraph
在 hexo 工作目錄下運行 npm install hexo-wordcount –save or yarn add hexo-wordcount
Need to install the hexo-wordcount plugin wordcount:
Display the word count of the article in post meta post_wordcount: true
Display the time to read the article in post meta min2read: true
Display the total word count of the website in aside’s webinfo total_wordcount: true
訪問人數 busuanzi (UV 和 PV)
由於 busuanzi 的穩定性問題，偶爾會遇到無法訪問的情況，請留意。
文章頁的訪問人數統計，是通過 busuanzi 這個插件實現的。個別評論系統自帶訪問人數統計功能，可以在相對應的評論系統配置中進行開啟，其會代替 busuanzi 的統計。
busuanzi:
CDN:
Math 數學
About the per_page if you set it to true, it will load mathjax/katex script in each page if you set it to false, it will load mathjax/katex script according to your setting (add the ‘mathjax: true’ or ‘katex: true’ in page’s front-matter) math:
Choose: mathjax, katex Leave it empty if you don’t need math use:
搜索
search:
Choose: algolia_search / local_search / docsearch leave it empty if you don’t need search use:
分享
Sharejs
share:
Choose: sharejs / addtoany Leave it empty if you don’t need share use: sharejs
評論
comments:
use:
text: true
lazyload: false
count: false
card_post_count: false
雙評論
在綫聊天
chat:
Choose: chatra/tidio/crisp Leave it empty if you don’t need chat use:
rightside_button: false
button_hide_show: false
為了不影響訪客的體驗，主題提供一個button_hide_show配置
分析統計
找到你百度統計的統計代碼
修改 主題配置文件
廣告
google_adsense:https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
網站驗證
site_verification:
- name: google-site-verification content: xxxxxx - name: baidu-site-verification content: xxxxxxx 美化/特效
修改 主題配置文件，比如：
顏色值必須被雙引號包裹，就像”#000”而不是#000。否則將會在構建的時候報錯！
theme_color:
文字左右對齊
Stretches the lines so that each line has equal width（文字向兩側對齊，對最後一行無效） text_align_justify: true
text_align_justify: true
黑色遮罩
mask:
主題支持 pace.js 的加載動畫，具體可查看 pace.js
配置 butterly.yml
加載動畫 Loading Animation preloader:
source 1. fullpage-loading 2. pace (progress bar) source: 1
pace_css_url:
頁面美化
field配置生效的區域
post 只在文章頁生效
美化頁面顯示 beautify:
未開啟美化
開啟美化
自定義字體和字體大小
如不需要配置，請留空
Global font settings Don’t modify the following settings unless you know how they work (非必要不要修改) font:
Font settings for the site title and site subtitle 左上角網站名字 主頁居中網站名字 blog_title_font:https://fonts.googleapis.com/css?family=Titillium+Web&display=swap
Typewriter Effect (打字效果) activate_power_mode:
背景特效
canvas_ribbon:
The size of ribbon size: 150
The opacity of ribbon (0 ~ 1) alpha: 0.6
鼠標點擊效果
圖片大圖查看模式
Choose: fancybox / medium_zoom Leave it empty if you don’t need lightbox lightbox:
FancyBox
Medium Zoom
標簽外掛
Mermaid
配置：
Mermaid mermaid:
Write Mermaid diagrams using code blocks code_write: true
built-in themes: default / forest / dark / neutral theme:
標簽外掛
代碼塊書寫
hexo 版本需要 7.0 或以上
hexo 的配置文件 要添加 exclude_languages: [‘mermaid’]
syntax_highlighter: ‘highlight.js’
例子
A
B
C
D
Pjax
這樣可以不用重複加載相同的資源（css/js）， 從而提升網頁的加載速度。
pjax:
Exclude the specified pages from pjax, such as ‘/music/‘ exclude:
- /xxxxxx/ 對於一些第三方插件，有些並不支持 pjax 。
使用 pjax 後，一些自己 DIY 的 js 可能會無效，跳轉頁面時需要重新調用，請參考Pjax 文檔
Snackbar 彈窗
Snackbar 彈窗 position 彈窗位置 可選 top-left / top-center / top-right / bottom-left / bottom-center / bottom-right snackbar:
開啟 Snackbar
Instantpage
修改配置文件
prefetch (預加載) instantpage: true
打開 hexo 工作目錄
npm install hexo-offline –save 或者 yarn add hexo-offline
在根目錄創建 hexo-offline.config.cjs 文件，並增加以下內容。
// offline config passed to workbox-build..{js,html,css,png,jpg,gif,svg,webp,eot,ttf,woff,woff2}’], /, // 可替換成你的 URL
在主題配置文件中開啟 pwa 選項。
可以通過Chrome插件Lighthouse檢查 PWA 配置是否生效以及配置是否正確。
打開博客頁面
Open Graph
修改配置文件
Open_Graph_meta:
google_plus: fb_admins: fb_app_id: CSS 前綴
開啟 css_prefix 後，會自動為一些 CSS 增加前綴。（會增加 20%的體積）
修改配置文件
Add the vendor prefixes to ensure compatibility css_prefix: true
如想添加額外的 js/css/meta 等等東西，可以在 Inject 裡添加，支持添加到 head(標籤之前)和 bottom(
“