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 顯示描述性文字
# anchor anchor: # when you scroll, the URL will update according to header id. auto_update:false # Click the headline to scroll and update the anchor click_to_scroll:false
圖片描述
可開啟圖片Figcaption描述文字顯示
優先顯示圖片的 title 屬性,然後是 alt 屬性
修改 主題配置文件
1
photofigcaption: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
字數限制,當複製文字大於這個字數限制時,將在複製的內容後面加上版權信息
添加版權信息後
1 2 3 4 5 6 7
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.
作者: Jerry 連結: http://localhost:4000/posts/bd3c650b/#Paragraph 來源: Butterfly 著作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。
related_post: enable:true limit:6# 顯示推薦文章數目 date_type:created# or created or updated 文章日期顯示創建日或者更新日
文章過期提醒
可設置是否顯示文章過期提醒,以更新時間為基準。
1 2 3 4 5 6 7 8
# Displays outdated notice for a post (文章過期提醒) noticeOutdate: enable: true style: flat # style: simple/flat limit_day: 365 # When will it be shown position: top # position: top/bottom message_prev: It has been message_next: days since the last update, the content of the article may be outdated.
limit_day: 距離更新時間多少天才顯示文章過期提醒
message_prev : 天數之前的文字
message_next:天數之後的文字
style: flat
style: simple
文章編輯按鈕
在文章標題旁邊顯示一個編輯按鈕,點擊會跳轉到對應的鏈接去。
1 2 3 4 5 6 7
# Post edit # Easily browse and edit blog source code online. post_edit: enable:false # url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/ # For example: https://github.com/jerryc127/butterfly.js.org/edit/main/source/ url:
文章分頁按鈕
當文章封面設置為 false 時,或者沒有獲取到封面配置,分頁背景將會顯示主題色。
可設置分頁的邏輯,也可以關閉分頁顯示
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
aside: enable:true hide:false button:true mobile:true# display on mobile position:right# left or right display: archive:true tag:true category:true card_author: enable:true description: button: enable:true icon:fabfa-github text:FollowMe link:https://github.com/xxxxxx card_announcement: enable:true content:ThisismyBlog card_recent_post: enable:true limit:5# if set 0 will show all sort:date# date or updated sort_order:# Don't modify the setting unless you know how it works card_categories: enable:true limit:8# if set 0 will show all expand:none# none/true/false sort_order:# Don't modify the setting unless you know how it works card_tags: enable:true limit:40# if set 0 will show all color:false orderby:random# Order of tags, random/name/length order:1# Sort of order. 1, asc for ascending; -1, desc for descending sort_order:# Don't modify the setting unless you know how it works card_archives: enable:true type:monthly# yearly or monthly format:MMMMYYYY# eg: YYYY年MM月 order:-1# Sort of order. 1, asc for ascending; -1, desc for descending limit:8# if set 0 will show all sort_order:# Don't modify the setting unless you know how it works card_webinfo: enable:true post_count:true last_push_date:true sort_order:# Don't modify the setting unless you know how it works card_post_series: enable:true orderBy:'date'# Order by title or date order:-1# Sort of order. 1, asc for ascending; -1, desc for descending
由於 API 有 訪問次數限制,為了避免調用太多,主題默認存取期限為 10 分鐘。也就是説,調用後資料會存在 localStorage 裏,10分鐘內刷新網站只會去 localStorage 讀取資料。 10 分鐘期限一過,刷新頁面時才會去調取 API 讀取新的數據。( 3.6.0 新增了 storage 配置,可自行配置緩存時間)
在側邊欄顯示最新評論板塊
修改 主題配置文件
1 2 3 4 5 6 7
# Aside widget - NewestComments newest_comments: enable: true sort_order: # Don't modify the setting unless you know how it works limit: 6 storage: 10 # unit: mins, save data to localStorage avatar: true
# dark mode darkmode: enable:true # dark mode和 light mode切換按鈕 button:true autoChangeMode:false # Set the light mode time. The value is between 0 and 24. If not set, the default value is 6 and 18 start:# 8 end:# 22
參數
解釋
button
是否在右下角顯示日夜模式切換按鈕
autoChangeMode
自動切換的模式 autoChangeMode: 1 跟隨系統而變化,不支持的瀏覽器/系統將按照時間 start 到 end 之間切換為 light mode autoChangeMode: 2 只按照時間 start 到 end 之間切換為 light mode ,其餘時間為 dark mode autoChangeMode: false 取消自動切換
start
light mode 的開始時間
end
light mode 的結束時間
滾動狀態百分比
主題配置文件中
1 2
# show scroll percent in scroll-to-top button rightside_scroll_percent:true
按鈕排序
1 2 3 4 5 6 7
# Don't modify the following settings unless you know how they work (非必要請不要修改 ) # Choose: readmode,translate,darkmode,hideAside,toc,chat,comment # Don't repeat 不要重複 rightside_item_order: enable:false hide:# readmode,translate,darkmode,hideAside show:# toc,chat,comment
note: # Note tag style values: # - simple bs-callout old alert style. Default. # - modern bs-callout new (v2-v3) alert style. # - flat flat callout style with background, like on Mozilla or StackOverflow. # - disabled disable all CSS styles import of note tag. style:simple icons:false border_radius:3 # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6). # Offset also applied to label tag variables. This option can work with disabled note tag. light_bg_offset:0
<div class="gallery-group-main"> {% galleryGroup name description link img-url %} {% galleryGroup name description link img-url %} {% galleryGroup name description link img-url %} </div>
Unique name : Unique name of tabs block tag without comma. Will be used in #id's as prefix for each tab with their index numbers. If there are whitespaces in name, for generate #id all whitespaces will replaced by dashes. Only for current url of post/page must be unique! [index] : Index number of active tab. If not specified, first tab (1) will be selected. If index is -1, no tab will be selected. It's will be something like spoiler. Optional parameter. [Tab caption] : Caption of current tab. If not caption specified, unique name with tab index suffix will be used as caption of tab. If not caption specified, but specified icon, caption will empty. Optional parameter. [@icon] : FontAwesome icon name (full-name, look like 'fas fa-font') Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'. Optional parameter.
This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly %} This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right %} This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,,outline %} This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline %} This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,larger %}
This is my website, click the button Butterfly This is my website, click the buttonButterfly This is my website, click the button Butterfly This is my website, click the buttonButterfly This is my website, click the buttonButterfly
1 2 3
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,block %} {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,block center larger %} {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,block right outline larger %}