天天看點

Butterfly主題安裝文檔(二)之主題配置語言網站資料導航菜單代碼社交圖示頂部圖文章置頂文章封面文章頁相關配置頭像複制相關配置Footer 設定右下角按鈕側邊欄設定标簽外挂Gallery 相冊圖庫Gallery 相冊回答問題 tag-hide繪圖mermaid(餅狀圖、柱狀圖等)Tabs标簽頁Button

語言

修改項目配置檔案

_config.yml

預設語言是 en

language: zh-CN
           

主題支援三種語言:

  1. default(en)
  2. zh-CN (簡體中文)
  3. zh-TW (繁體中文)

網站資料

修改網站各種資料,例如标題、副标題和郵箱等個人資料,請修改項目根目錄的

_config.yml

Butterfly主題安裝文檔(二)之主題配置語言網站資料導航菜單代碼社交圖示頂部圖文章置頂文章封面文章頁相關配置頭像複制相關配置Footer 設定右下角按鈕側邊欄設定标簽外挂Gallery 相冊圖庫Gallery 相冊回答問題 tag-hide繪圖mermaid(餅狀圖、柱狀圖等)Tabs标簽頁Button

導航菜單

修改 主題配置檔案

_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

    , 需要先解除安裝掉

    hexo-generator-index

    ,然後在文章的 front-matter 區域裡添加

    top: true

    屬性來把這篇文章置頂
  • 如果使用

    hexo-generator-indexed

    , 需要先解除安裝掉

    hexo-generator-index

    ,然後在文章的 front-matter 區域裡添加

    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不能包含英文逗号,可用

&sbquo;

)

{% 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 %}

繼續閱讀