Butterfly主题安装文档(二)之主题配置

以你之姓@ 2023-01-08 02:14 172阅读 0赞

# 语言 #

修改项目配置文件 `_config.yml`  
默认语言是 en

language: zh-CN

主题支持三种语言：

1.  default(en)
2.  zh-CN (简体中文)
3.  zh-TW (繁体中文)

# 网站资料 #

修改网站各种资料，例如标题、副标题和邮箱等个人资料，请修改项目根目录的`_config.yml`  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzY1MzY3_size_16_color_FFFFFF_t_70][]

# 导航菜单 #

修改 主题配置文件`_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/`，后面 `||` 分开，然后写图标名[支持的图标网][Link 1]。  
**注意：** 导航的文字可自行更改

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 种代码高亮样式, 自定义主题请查看[自定义主题][Link 2]

*  default
 *  darker
 *  pale night
 *  light
 *  ocean
 *  mac
 *  mac light

修改主题配置文件`_config.butterfly.yml`：

highlight_theme: light

## 代码复制 ##

Butterfly主题支持代码复制功能。  
修改主题配置文件`_config.butterfly.yml`：

highlight_copy: true

## 代码展开/关闭 ##

在默认情况下，代码框自动展开，可设置是否所有代码框都关闭状态，点击 `>` 可展开代码

*  true 全部代码框不展开，需点击 `>` 打开
 *  false 代码狂展开，有 `>` 点击按钮
 *  none 不显示 `>` 按钮  
    修改主题配置文件`_config.butterfly.yml`：

highlight_shrink: true #代码框不展开，需点击 '>' 打开

## 代码换行 ##

在默认情况下，`hexo-highlight` 在编译的时候不会实现代码自动换行。如果你不希望在代码块的区域里有横向滚动条的话，那么你可以考虑开启这个功能。  
修改主题配置文件`_config.butterfly.yml`：

code_word_wrap: true

然后找到 `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:xxxxxx@gmail.com || 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/CDN@latest/cover/default_bg.png
        - https://cdn.jsdelivr.net/gh/百度127/CDN@latest/cover/default_bg2.png
        - https://cdn.jsdelivr.net/gh/百度127/CDN@latest/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 单独设置

从 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`：

anchor: true

## 文章过期提醒 ##

可设置是否显示文章过期提醒，以更新时间为基准。

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`：

custom_text: Hi, welcome to my <a href="https://百度.me/">blog</a>! # 也叫自定义文本

## 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`：

readmode: true

# 侧边栏设置 #

## 侧边排版 ##

可自行决定哪个项目需要显示，可决定位置，也可以设置不显示侧边栏。  
修改主题配置文件`_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 文档][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 %}
    
    **This is Tab 1.**
    
    
    
    **This is Tab 2.**
    
    
    
    **This is Tab 3.**
    
    { % endtabs %}

\{% tabs test1 %\}

**This is Tab 1.**

**This is Tab 2.**

**This is Tab 3.**

\{% endtabs %\}

图标：

{% tabs test4 %}
    
    **tab名字为第一个Tab**
    
    
    
    **只有图标 没有Tab名字**
    
    
    
    **名字+icon**
    
    {% 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 %\}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NzY1MzY3_size_16_color_FFFFFF_t_70]: /images/20221119/caf7d2c9f9014112bec654d5369c3b72.png
[Link 1]: https://fontawesome.com/icons?from=io
[Link 2]: https://demo.xn--wxtr44c.me/posts/4aa8abbe/#%E4%BB%A3%E7%A2%BC%E9%AB%98%E4%BA%AE%E4%B8%BB%E9%A1%8C
[hexo-generator-index-pin-top]: https://github.com/netcan/hexo-generator-index-pin-top
[hexo-generator-indexed]: https://github.com/hexo-next/hexo-generator-indexed
[hexo-hide-posts]: https://github.com/printempw/hexo-hide-posts
[busuanzi]: http://busuanzi.ibruce.info
[mermaid]: https://mermaid-js.github.io/mermaid/#/