語言
修改項目配置檔案
_config.yml
預設語言是 en
language: zh-CN
主題支援三種語言:
- default(en)
- zh-CN (簡體中文)
- zh-TW (繁體中文)
網站資料
修改網站各種資料,例如标題、副标題和郵箱等個人資料,請修改項目根目錄的
_config.yml
導航菜單
修改 主題配置檔案
_config.butterfly.yml
:
menu:
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/
,後面
||
分開,然後寫圖示名支援的圖示網。
注意: 導航的文字可自行更改
menu:
首頁: / || fas fa-home
歸檔: /archives/ || fas fa-archive
标簽: /tags/ || fas fa-tags
分類: /categories/ || fas fa-folder-open
清單||fas fa-list:
- 音樂 || /music/ || fas fa-music
- 電影 || /movies/ || fas fa-video
友情連結: /link/ || fas fa-link
關于: /about/ || fas fa-heart
代碼
代碼塊中的所有功能隻适用于 Hexo 預設的 highlight 渲染,如果使用第三方的渲染器,不一定會有效
代碼高亮主題
Butterfly 支援 6 種代碼高亮樣式, 自定義主題請檢視自定義主題
- default
- darker
- pale night
- light
- ocean
- mac
- mac light
修改主題配置檔案
_config.butterfly.yml
:
highlight_theme: light
代碼複制
Butterfly主題支援代碼複制功能。
修改主題配置檔案
_config.butterfly.yml
:
代碼展開/關閉
在預設情況下,代碼框自動展開,可設定是否所有代碼框都關閉狀态,點選
>
可展開代碼
- true 全部代碼框不展開,需點選
打開>
- false 代碼狂展開,有
點選按鈕>
- none 不顯示
>
按鈕
修改主題配置檔案
:_config.butterfly.yml
代碼換行
在預設情況下,
hexo-highlight
在編譯的時候不會實作代碼自動換行。如果你不希望在代碼塊的區域裡有橫向滾動條的話,那麼你可以考慮開啟這個功能。
修改主題配置檔案
_config.butterfly.yml
:
然後找到
Hexo
配置檔案
_config.yml
,将
line_number
改成
false
:
highlight:
enable: true
line_number: false
auto_detect: false
tab_replace:
社交圖示
社交圖示即首頁上個性标簽下的各種社交賬号關聯。
書寫格式: 圖示名:url || 描述性文字
修改主題配置檔案
_config.butterfly.yml
:
social:
fab fa-github: https://github.com/xxxxx || Github
fas fa-envelope: mailto:[email protected] || Email
圖示名可在這尋找: https://fontawesome.com/icons?from=io
頂部圖
頂部圖有 2 種配置:具體 url 和(留白,true 和 false,三個效果一樣)
page頁
當具體 url 時
- 首頁的頂部圖可以在主題配置檔案中設定
index_img
- archives 頁的頂部圖可以在主題配置檔案中設定
archive_img
- 其他 page 頁的頂部圖可以在各自的 md 頁面設定
中的front-matter
top_img
{% note info %}
頁面如果沒有設定各自的 top_img,則會顯示
default_top_img
圖檔
{% endnote %}
留白, true 和 false
首頁會顯示純顔色的頂部圖,其他 page 的頂部圖沒有設定時,也會顯示純顔色的頂部圖
post頁
post 頁的頂部圖會優先顯示各自
front-matter
中的
top_img
, 如果沒有設定,則會縮略圖(即各自 front-matter 中的 cover),如果沒有則會顯示顯示
default_top_img
圖檔
文章置頂
要為文章置頂,你需要安裝插件 (hexo-generator-index-pin-top 或者 hexo-generator-indexed)
- 如果使用
, 需要先解除安裝掉hexo-generator-index-pin-top
,然後在文章的 front-matter 區域裡添加hexo-generator-index
屬性來把這篇文章置頂top: true
- 如果使用
, 需要先解除安裝掉hexo-generator-indexed
,然後在文章的 front-matter 區域裡添加hexo-generator-index
屬性來把這篇文章置頂。數值越大,置頂的優先級越大sticky: 1
文章封面
文章的 markdown 文檔上,在
Front-matter
添加
cover
, 并填上要顯示的圖檔位址。
- 如果不配置 cover, 可以設定顯示預設的 cover。
- 如果不想在首頁顯示 cover, 可以設定為 false。
修改主題配置檔案
_config.butterfly.yml
:
cover:
# 是否顯示文章封面
index_enable: true
aside_enable: true
archives_enable: true
# 封面顯示的位置
# 三個值可配置 left , right , both
position: both
# 當沒有設定cover時,預設的封面顯示
default_cover: # 當配置多張圖檔時,會随機選擇
- https://cdn.jsdelivr.net/gh/百度127/[email protected]/cover/default_bg.png
- https://cdn.jsdelivr.net/gh/百度127/[email protected]/cover/default_bg2.png
- https://cdn.jsdelivr.net/gh/百度127/[email protected]/cover/default_bg3.png
文章頁相關配置
文章 meta 顯示
這個選項是用來顯示文章的相關資訊的。
修改主題配置檔案
_config.butterfly.yml
:
post_meta:
page:
date_type: both # created or updated or both 首頁文章日期是建立日或者更新日或都顯示
categories: true # true or false 首頁是否顯示分類
tags: true # true or false 首頁是否顯示标籤
label: true # true or false 顯示描述性文字
post:
date_type: both # created or updated or both 文章頁日期是建立日或者更新日或都顯示
categories: true # true or false 文章頁是否顯示分類
tags: true # true or false 文章頁是否顯示标籤
label: true # true or false 顯示描述性文字
在文章詳情頁頂部的資料,
date_type
: 可設定文章日期顯示建立日期 (created) 或者更新日期 (updated) 或者兩種都顯示 (both)
categories
是否顯示分類
tags 是否顯示标簽
文章版權
為你的部落格文章展示文章版權和許可協定。
修改主題配置檔案
_config.butterfly.yml
:
post_copyright:
enable: true
decode: false
license: CC BY-NC-SA 4.0
license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
如果有文章(例如:轉載文章)不需要顯示版權,可以在文章 Front-matter 單獨設定
copyright: false
從 3.0.0 開始,支援對單獨文章設定版權資訊,可以在文章 Front-matter 單獨設定
copyright: true
copyright_author: xxxx
copyright_author_href: https://xxxxxx.com
copyright_url: https://xxxxxx.com
copyright_info: 此文章版權歸xxxxx所有,如有轉載,請註明來自原作者
文章打賞
在你每篇文章的結尾,可以添加打賞按鈕。相關二維碼可以自行配置。對于沒有提供二維碼的,可配置一張軟體的 icon 圖檔,然後在 link 上添加相應的打賞連結。使用者點選圖檔就會跳轉到連結去。link 可以不寫,會預設為圖檔的連結。
修改主題配置檔案
_config.butterfly.yml
:
reward:
enable: true
QR_code:
- img: /image/wechat.jpg
link:
text: 微信
- img: /image/alipay.jpg
link:
text: 支付寶
文章隐藏
如需要文章隐藏功能,請裝插件 hexo-generator-indexed 或者 hexo-hide-posts
TOC目錄
在文章頁,會有一個目錄,用于顯示 TOC。
- enable: 是否顯示 TOC
- number: 是否顯示章節數
- auto_open: 可選擇進入文章頁面時,是否自動打開 sidebar 顯示 TOC
修改主題配置檔案
_config.butterfly.yml
:
toc:
enable: true
number: true
auto_open: true # auto open the sidebar
為特定的文章配置
在你的文章 md 檔案的頭部,Front-matter 中加入 toc_number、toc 和 auto_open,并配置 true 或者 false 即可。
主題會優先判斷文章 Markdown 的 Front-matter 是否有配置,如有,則以 Front-matter 的配置為準。否則,以主題配置檔案中的配置為準
相關文章
相關文章推薦的原理是根據文章 tags 的比重來推薦
修改主題配置檔案
_config.butterfly.yml
:
related_post:
enable: true
limit: 6 # 顯示推薦文章數目
date_type: created # or created or updated 文章日期顯示建立日或者更新日
文章錨點
開啟文章錨點後,當你在文章頁進行滾動時,文章連結會根據标題 ID 進行替換
(注意:每替換一次,會留下一個歷史記錄。是以如果一篇文章有很多錨點的話,網頁的歷史記錄會很多。)
修改主題配置檔案
_config.butterfly.yml
:
文章過期提醒
可設定是否顯示文章過期提醒,以更新時間為基準。
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: 天數之後的文字
頭像
修改主題配置檔案
_config.butterfly.yml
:
avatar:
img: /img/avatar.png
effect: true # 頭像會一直轉圈
複制相關配置
可配置網站是否可以複制、複制的内容是否添加版權資訊
copy:
enable: true # 是否開啟網站複制權限
copyright: # 複制的内容後面加上版權資訊
enable: true # 是否開啟複制版權資訊添加
limit_count: 50 # 字數限制,當複制文字大于這個字數限制時,将在複制的内容後面加上版權資訊
添加版權後複制内容:
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.
作者: itchenliang
連結: http://localhost:4000/posts/bd3c650b/#Paragraph
來源: 個人部落格
着作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。
Footer 設定
項目年份
since 是一個來展示你站點起始時間的選項。它位于頁面的最底部。
修改主題配置檔案
_config.butterfly.yml
:
footer:
owner:
enable: true
since: 2018
頁腳自定義文本
custom_text 是一個給你用來在頁腳自定義文本的選項。通常你可以在這裡寫聲明文本等。支援 HTML。
修改主題配置檔案
_config.butterfly.yml
:
ICP
對于部分有備案的域名,可以在 ICP 配置顯示。
修改主題配置檔案
_config.butterfly.yml
:
ICP:
enable: true
url: http://www.beian.miit.gov.cn/state/outPortal/loginPortal.action
text: 粵ICP備xxxx
icon: /img/icp.png
右下角按鈕
簡繁轉換
簡體繁體互換, 右下角會有簡繁轉換按鈕。
修改主題配置檔案
_config.butterfly.yml
:
translate:
enable: true
# 預設按鈕顯示文字(網站是簡體,應設定為'default: 繁')
default: 簡
#網站預設語言,1: 繁體中文, 2: 簡體中文
defaultEncoding: 1
#延遲時間,若不在前, 要設定延遲翻譯時間, 如100表示100ms,預設為0
translateDelay: 0
#當文字是簡體時,按鈕顯示的文字
msgToTraditionalChinese: "繁"
#當文字是繁體時,按鈕顯示的文字
msgToSimplifiedChinese: "簡"
夜間模式
右下角會有夜間模式按鈕
修改主題配置檔案
_config.butterfly.yml
:
darkmode:
enable: true
# dark mode和 light mode切換按鈕
button: true
autoChangeMode: false
閱讀模式
閱讀模式下會去掉除文章外的内容,避免幹擾閱讀。隻會出現在文章頁面,右下角會有閱讀模式按鈕。
修改主題配置檔案
_config.butterfly.yml
:
側邊欄設定
側邊排版
可自行決定哪個項目需要顯示,可決定位置,也可以設定不顯示側邊欄。
修改主題配置檔案
_config.butterfly.yml
:
aside:
enable: true
mobile: true # 手機頁面( 顯示寬度 < 768px )是否顯示aside内容
position: right # left or right
card_author:
enable: true
description:
button:
icon: fab fa-github
text: Github
link: https://github.com/百度127/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: false
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: true
通路人數
通路 busuanzi 的官方網站檢視更多的介紹。
修改主題配置檔案
_config.butterfly.yml
:
busuanzi:
site_uv: true
site_pv: true
page_pv: true
運作時間
網頁已運作時間
修改主題配置檔案
_config.butterfly.yml
:
runtimeshow:
enable: true
publish_date: 6/7/2018 00:00:00
##網頁開通時間
#格式: 月/日/年 時間
#也可以寫成 年/月/日 時間
标簽外挂
Note (Bootstrap Callout)
修改主題配置檔案
_config.butterfly.yml
:
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
light_bg_offset: 0
用法:
{% note [class] [no-icon] %}
Any content (support inline tags too.io).
{% endnote %}
如:
{% note default %}
default 提示塊标籤
{% endnote %}
{% note primary no-icon %}
primary 提示塊标籤
{% endnote %}
{% note success %}
success 提示塊标籤
{% endnote %}
{% note info %}
info 提示塊标籤
{% endnote %}
{% note warning %}
warning 提示塊标籤
{% endnote %}
{% note danger %}
danger 提示塊标籤
{% endnote %}
Gallery 相冊圖庫
一個圖庫集合。
寫法
<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
</div>
- name: 圖庫名字
- description:圖庫描述
- link:連接配接到對應相冊的位址
- img-url:圖庫封面的位址
如:
<div class="gallery-group-main">
{% galleryGroup '桌面' '收藏的一些桌面' '/Gallery/wallpaper' https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png %}
{% galleryGroup '漫威' '關于漫威的圖檔' '/Gallery/marvel' https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg %}
{% galleryGroup 'OH MY GIRL' '關于OH MY GIRL的圖檔' '/Gallery/ohmygirl' https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg %}
</div>
{% galleryGroup '桌面' '收藏的一些桌面' '/Gallery/wallpaper' https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png %} {% galleryGroup '漫威' '關于漫威的圖檔' '/Gallery/marvel' https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg %} {% galleryGroup 'OH MY GIRL' '關于OH MY GIRL的圖檔' '/Gallery/ohmygirl' https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg %}
Gallery 相冊
寫法:
{% gallery %}
markdown 圖檔格式
{% endgallery %}
如:
{% gallery %}
![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg)
![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg)
![](https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg)
![](https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg)
![](https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg)
![](https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg)
![](https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg)
![](https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg)
{% endgallery %}
{% gallery %}
[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-BkzecCS2-1610953858679)(https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg)]
[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-6xARcVox-1610953858681)(https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg)]
[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-uzSy8cR7-1610953858683)(https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg)]
[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-1V5xNn5u-1610953858689)(https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg)]
[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-HDhHEwHg-1610953858690)(https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg)]
[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-H5MkVTP6-1610953858691)(https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg)]
[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-oC7dAUDD-1610953858691)(https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg)]
[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-zJexeQne-1610953858693)(https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg)]
{% endgallery %}
回答問題 tag-hide
如果你想把一些文字、内容隐藏起來,并提供按鈕讓使用者點選顯示。可以使用這個。
{% note success %}
success inline
{% endnote %}
inline 在文本裡面添加按鈕隐藏内容,隻限文字(content不能包含英文逗号,可用
‚
)
{% hideInline content,display,bg,color %}
- content: 文本内容
- display: 按鈕顯示的文字 (可選)
- bg: 按鈕的背景顔色 (可選)
- color: 按鈕文字的顔色 (可選)
哪個英文字母最酷? {% hideInline 因為西裝褲(C裝酷),檢視答案,#FF7242,#fff %}
門裡站着一個人? {% hideInline 閃 %}
哪個英文字母最酷? {% hideInline 因為西裝褲(C裝酷),檢視答案,#FF7242,#fff %}
門裡站着一個人? {% hideInline 閃 %}
繪圖mermaid(餅狀圖、柱狀圖等)
使用 mermaid 标籤可以繪製 Flowchart(流程圖)、Sequence diagram(時序圖 )、Class Diagram(類别圖)、State Diagram(狀态圖)、Gantt(甘特圖)和 Pie Chart(圓形圖),具體可以檢視 mermaid 文檔
修改主題配置檔案
_config.butterfly.yml
:
mermaid:
enable: true
# built-in themes: default/forest/dark/neutral
theme: default
寫法:
{% mermaid %}
内容
{% endmermaid %}
例如:
{% mermaid %}
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
{% endmermaid %}
Tabs标簽頁
使用方法:
{% tabs test1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}
{% tabs test1 %}
This is Tab 1.
This is Tab 2.
This is Tab 3.
{% endtabs %}
圖示:
{% tabs test4 %}
<!-- tab 第一個Tab -->
**tab名字為第一個Tab**
<!-- endtab -->
<!-- tab @fab fa-apple-pay -->
**隻有圖示 沒有Tab名字**
<!-- endtab -->
<!-- tab 炸彈@fas fa-bomb -->
**名字+icon**
<!-- endtab -->
{% endtabs %}
{% tabs test4 %}
tab名字為第一個Tab
隻有圖示 沒有Tab名字
名字+icon
{% endtabs %}
Button
使用方法:
{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}
[url] : 連結
[text] : 按鈕文字
[icon] : [可選] 圖示
[color] : [可選] 按鈕背景顔色(預設style時)
按鈕字型和邊框顔色(outline時)
default/blue/pink/red/purple/orange/green
[style] : [可選] 按鈕樣式 預設實心
outline/留白
[layout] : [可選] 按鈕佈局 預設為line
block/留白
[position] : [可選] 按鈕位置 前提是設定了layout為block 預設為左邊
center/right/留白
[size] : [可選] 按鈕大小
larger/留白
This is my website, click the button {% btn 'http://www.baidu.com',百度 %}
This is my website, click the button {% btn 'http://www.baidu.com',百度,far fa-hand-point-right %}
This is my website, click the button {% btn 'http://www.baidu.com',百度,,outline %}
This is my website, click the button {% btn 'http://www.baidu.com',百度,far fa-hand-point-right,outline %}
This is my website, click the button {% btn 'http://www.baidu.com',百度,far fa-hand-point-right,larger %}
This is my website, click the button {% btn ‘http://www.baidu.com’,百度 %}
This is my website, click the button {% btn ‘http://www.baidu.com’,百度,far fa-hand-point-right %}
This is my website, click the button {% btn ‘http://www.baidu.com’,百度,outline %}
This is my website, click the button {% btn ‘http://www.baidu.com’,百度,far fa-hand-point-right,outline %}
This is my website, click the button {% btn ‘http://www.baidu.com’,百度,far fa-hand-point-right,larger %}
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,block %}
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,block center larger %}
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,block right outline larger %}
{% btn ‘http://www.baidu.com’,百度,far fa-hand-point-right,block %}
{% btn ‘http://www.baidu.com’,百度,far fa-hand-point-right,block center larger %}
{% btn ‘http://www.baidu.com’,百度,far fa-hand-point-right,block right outline larger %}
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,larger %}
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,blue larger %}
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,pink larger %}
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,red larger %}
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,purple larger %}
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,orange larger %}
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,green larger %}
{% btn ‘http://www.baidu.com’,百度,far fa-hand-point-right,larger %}
{% btn ‘http://www.baidu.com’,百度,far fa-hand-point-right,blue larger %}
{% btn ‘http://www.baidu.com’,百度,far fa-hand-point-right,pink larger %}
{% btn ‘http://www.baidu.com’,百度,far fa-hand-point-right,red larger %}
{% btn ‘http://www.baidu.com’,百度,far fa-hand-point-right,purple larger %}
{% btn ‘http://www.baidu.com’,百度,far fa-hand-point-right,orange larger %}
{% btn ‘http://www.baidu.com’,百度,far fa-hand-point-right,green larger %}
<div class="btn-center">
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,outline larger %}
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,outline blue larger %}
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,outline pink larger %}
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,outline red larger %}
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,outline purple larger %}
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,outline orange larger %}
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,outline green larger %}
</div>
{% btn 'http://www.baidu.com',百度,far fa-hand-point-right,outline larger %} {% btn 'http://www.baidu.com',百度,far fa-hand-point-right,outline blue larger %} {% btn 'http://www.baidu.com',百度,far fa-hand-point-right,outline pink larger %} {% btn 'http://www.baidu.com',百度,far fa-hand-point-right,outline red larger %} {% btn 'http://www.baidu.com',百度,far fa-hand-point-right,outline purple larger %} {% btn 'http://www.baidu.com',百度,far fa-hand-point-right,outline orange larger %} {% btn 'http://www.baidu.com',百度,far fa-hand-point-right,outline green larger %}