Hexo搭建博客教程（六）标签外挂

本教程参考安知鱼的主题，详见 文档 | anzhiyu

行内文本

• 样式预览
• 示例源码

1. 带 下划线 的文本
2. 带 着重号 的文本
3. 带 波浪线 的文本
4. 带 删除线 的文本
5. 键盘样式的文本 command + D
6. 密码样式的文本：这里没有验证码

1. 带 {% u 下划线 %} 的文本
2. 带 {% emp 着重号 %} 的文本
3. 带 {% wavy 波浪线 %} 的文本
4. 带 {% del 删除线 %} 的文本
5. 键盘样式的文本 {% kbd command %} + {% kbd D %}
6. 密码样式的文本：{% psw 这里没有验证码 %}

---

分栏 tab

• 样式预览
• 示例源码

• 标题1
• 标题2

内容1

内容2

{% tabs 名称（名称不能重复） %}

<!-- tab 标题1 -->

内容1

<!-- endtab -->


<!-- tab 标题2 -->

内容2

<!-- endtab -->

{% endtabs %}

---

文字按钮

• 1.按钮样式
• 2. 按钮位置
• 3. 按钮颜色
• 4. 按钮颜色

样式预览:

This is my website, click the button Zayck
This is my website, click the button Zayck
This is my website, click the button Zayck
This is my website, click the button Zayck
This is my website, click the button Zayck

示例源码:

This is my website, click the button {% btn 'https://zayck.gitee.io',Zayck %}
This is my website, click the button {% btn 'https://zayck.gitee.io',Zayck,anzhiyufont anzhiyu-icon-circle-arrow-right %}
This is my website, click the button {% btn 'https://zayck.gitee.io',Zayck,,outline %}
This is my website, click the button {% btn 'https://zayck.gitee.io',Zayck,anzhiyufont anzhiyu-icon-circle-arrow-right,outline %}
This is my website, click the button {% btn 'https://zayck.gitee.io',Zayck,anzhiyufont anzhiyu-icon-circle-arrow-right,larger %}

样式预览:

Zayck
Zayck
Zayck

示例源码:

{% btn 'https://zayck.gitee.io',Zayck,anzhiyufont anzhiyu-icon-circle-arrow-right,block %}
{% btn 'https://zayck.gitee.io',Zayck,anzhiyufont anzhiyu-icon-circle-arrow-right,block center larger %}
{% btn 'https://zayck.gitee.io',Zayck,anzhiyufont anzhiyu-icon-circle-arrow-right,block right outline larger %}

样式预览:

Zayck Zayck Zayck Zayck Zayck Zayck Zayck

示例源码:

<div class="btn-center">
{% btn 'https://zayck.gitee.io',Zayck,anzhiyufont anzhiyu-icon-circle-arrow-right,larger %}
{% btn 'https://zayck.gitee.io',Zayck,anzhiyufont anzhiyu-icon-circle-arrow-right,blue larger %}
{% btn 'https://zayck.gitee.io',Zayck,anzhiyufont anzhiyu-icon-circle-arrow-right,pink larger %}
{% btn 'https://zayck.gitee.io',Zayck,anzhiyufont anzhiyu-icon-circle-arrow-right,red larger %}
{% btn 'https://zayck.gitee.io',Zayck,anzhiyufont anzhiyu-icon-circle-arrow-right,purple larger %}
{% btn 'https://zayck.gitee.io',Zayck,anzhiyufont anzhiyu-icon-circle-arrow-right,orange larger %}
{% btn 'https://zayck.gitee.io',Zayck,anzhiyufont anzhiyu-icon-circle-arrow-right,green larger %}
</div>

样式预览:

Zayck Zayck Zayck Zayck Zayck Zayck Zayck

示例源码:

<div class="btn-center">
{% btn 'https://zayck.gitee.io',Zayck,anzhiyufont anzhiyu-icon-circle-arrow-right,outline larger %}
{% btn 'https://zayck.gitee.io',Zayck,anzhiyufont anzhiyu-icon-circle-arrow-right,outline blue larger %}
{% btn 'https://zayck.gitee.io',Zayck,anzhiyufont anzhiyu-icon-circle-arrow-right,outline pink larger %}
{% btn 'https://zayck.gitee.io',Zayck,anzhiyufont anzhiyu-icon-circle-arrow-right,outline red larger %}
{% btn 'https://zayck.gitee.io',Zayck,anzhiyufont anzhiyu-icon-circle-arrow-right,outline purple larger %}
{% btn 'https://zayck.gitee.io',Zayck,anzhiyufont anzhiyu-icon-circle-arrow-right,outline orange larger %}
{% btn 'https://zayck.gitee.io',Zayck,anzhiyufont anzhiyu-icon-circle-arrow-right,outline green larger %}
</div>

---

图标按钮

• 样式预览
• 示例源码

启示录 玩易

{% btns rounded grid5 %}
{% cell 启示录, /tags/启示录/, anzhiyufont anzhiyu-icon-bolt %}
{% cell 玩易, /tags/易经/, anzhiyufont anzhiyu-icon-book %}
{% endbtns %}

---

列表样式

• 单选列表
• 复选列表

样式预览:

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

示例源码:

{% radio 纯文本测试 %}
{% radio checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% radio red, 支持自定义颜色 %}
{% radio green, 绿色 %}
{% radio yellow, 黄色 %}
{% radio cyan, 青色 %}
{% radio blue, 蓝色 %}

样式预览:

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

示例源码:

{% checkbox 纯文本测试 %}
{% checkbox checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% checkbox red, 支持自定义颜色 %}
{% checkbox green checked, 绿色 + 默认选中 %}
{% checkbox yellow checked, 黄色 + 默认选中 %}
{% checkbox cyan checked, 青色 + 默认选中 %}
{% checkbox blue checked, 蓝色 + 默认选中 %}
{% checkbox plus green checked, 增加 %}
{% checkbox minus yellow checked, 减少 %}
{% checkbox times red checked, 叉 %}

---

上标标签

• 样式预览
• 示例源码

default

info

success

error

warning

bolt

ban

home

sync

cogs

key

bell

自定义 font awesome 图标

{% tip %}default{% endtip %}
{% tip info %}info{% endtip %}
{% tip success %}success{% endtip %}
{% tip error %}error{% endtip %}
{% tip warning %}warning{% endtip %}
{% tip bolt %}bolt{% endtip %}
{% tip ban %}ban{% endtip %}
{% tip home %}home{% endtip %}
{% tip sync %}sync{% endtip %}
{% tip cogs %}cogs{% endtip %}
{% tip key %}key{% endtip %}
{% tip bell %}bell{% endtip %}
{% tip fa-atom %}自定义 font awesome 图标{% endtip %}

---

提示块

• simple样式
• modern样式
• flat样式
• disabled样式
• no-icon样式
• 阿里simple
• 阿里modern
• 阿里flat
• 阿里disabled
• 阿里no-icon

样式预览:

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

示例源码:

{% note simple %}默认 提示块标签{% endnote %}
{% note default simple %}default 提示块标签{% endnote %}
{% note primary simple %}primary 提示块标签{% endnote %}
{% note success simple %}success 提示块标签{% endnote %}
{% note info simple %}info 提示块标签{% endnote %}
{% note warning simple %}warning 提示块标签{% endnote %}
{% note danger simple %}danger 提示块标签{% endnote %}

样式预览:

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

示例源码:

{% note modern %}默认 提示块标签{% endnote %}
{% note default modern %}default 提示块标签{% endnote %}
{% note primary modern %}primary 提示块标签{% endnote %}
{% note success modern %}success 提示块标签{% endnote %}
{% note info modern %}info 提示块标签{% endnote %}
{% note warning modern %}warning 提示块标签{% endnote %}
{% note danger modern %}danger 提示块标签{% endnote %}

样式预览:

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

示例源码:

{% note flat %}默认 提示块标签{% endnote %}
{% note default flat %}default 提示块标签{% endnote %}
{% note primary flat %}primary 提示块标签{% endnote %}
{% note success flat %}success 提示块标签{% endnote %}
{% note info flat %}info 提示块标签{% endnote %}
{% note warning flat %}warning 提示块标签{% endnote %}
{% note danger flat %}danger 提示块标签{% endnote %}

样式预览:

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

示例源码:

{% note disabled %}默认 提示块标签{% endnote %}
{% note default disabled %}default 提示块标签{% endnote %}
{% note primary disabled %}primary 提示块标签{% endnote %}
{% note success disabled %}success 提示块标签{% endnote %}
{% note info disabled %}info 提示块标签{% endnote %}
{% note warning disabled %}warning 提示块标签{% endnote %}
{% note danger disabled %}danger 提示块标签{% endnote %}

样式预览:

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

示例源码:

{% note no-icon %}默认 提示块标签{% endnote %}
{% note default no-icon %}default 提示块标签{% endnote %}
{% note primary no-icon %}primary 提示块标签{% endnote %}
{% note success no-icon %}success 提示块标签{% endnote %}
{% note info no-icon %}info 提示块标签{% endnote %}
{% note warning no-icon %}warning 提示块标签{% endnote %}
{% note danger no-icon %}danger 提示块标签{% endnote %}

样式预览:

你是刷 Visa 还是 UnionPay

2022 年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

示例源码:

{% note 'anzhiyufont anzhiyu-icon-rocket' simple %}你是刷 Visa 还是 UnionPay{% endnote %}
{% note blue 'anzhiyufont anzhiyu-icon-bullhorn' simple %}2022 年快到了....{% endnote %}
{% note pink 'anzhiyufont anzhiyu-icon-instagram' simple %}小心开车 安全至上{% endnote %}
{% note red 'anzhiyufont anzhiyu-icon-fan' simple%}这是三片呢？还是四片？{% endnote %}
{% note orange 'anzhiyufont anzhiyu-icon-dengpao' simple %}你是刷 Visa 还是 UnionPay{% endnote %}
{% note purple 'anzhiyufont anzhiyu-icon-sanmingzhi' simple %}剪刀石头布{% endnote %}
{% note green 'anzhiyufont anzhiyu-icon-ic_train' simple %}前端最讨厌的浏览器{% endnote %}

样式预览:

你是刷 Visa 还是 UnionPay

2022 年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

示例源码:

{% note 'anzhiyufont anzhiyu-icon-rocket' modern %}你是刷 Visa 还是 UnionPay{% endnote %}
{% note blue 'anzhiyufont anzhiyu-icon-bullhorn' modern %}2022 年快到了....{% endnote %}
{% note pink 'anzhiyufont anzhiyu-icon-instagram' modern %}小心开车 安全至上{% endnote %}
{% note red 'anzhiyufont anzhiyu-icon-fan' modern%}这是三片呢？还是四片？{% endnote %}
{% note orange 'anzhiyufont anzhiyu-icon-dengpao' modern %}你是刷 Visa 还是 UnionPay{% endnote %}
{% note purple 'anzhiyufont anzhiyu-icon-sanmingzhi' modern %}剪刀石头布{% endnote %}
{% note green 'anzhiyufont anzhiyu-icon-ic_train' modern %}前端最讨厌的浏览器{% endnote %}

样式预览:

你是刷 Visa 还是 UnionPay

2022 年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

示例源码:

{% note 'anzhiyufont anzhiyu-icon-rocket' flat %}你是刷 Visa 还是 UnionPay{% endnote %}
{% note blue 'anzhiyufont anzhiyu-icon-bullhorn' flat %}2022 年快到了....{% endnote %}
{% note pink 'anzhiyufont anzhiyu-icon-instagram' flat %}小心开车 安全至上{% endnote %}
{% note red 'anzhiyufont anzhiyu-icon-fan' flat%}这是三片呢？还是四片？{% endnote %}
{% note orange 'anzhiyufont anzhiyu-icon-dengpao' flat %}你是刷 Visa 还是 UnionPay{% endnote %}
{% note purple 'anzhiyufont anzhiyu-icon-sanmingzhi' flat %}剪刀石头布{% endnote %}
{% note green 'anzhiyufont anzhiyu-icon-ic_train' flat %}前端最讨厌的浏览器{% endnote %}

样式预览:

你是刷 Visa 还是 UnionPay

2022 年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

示例源码:

{% note 'anzhiyufont anzhiyu-icon-rocket' disabled %}你是刷 Visa 还是 UnionPay{% endnote %}
{% note blue 'anzhiyufont anzhiyu-icon-bullhorn' disabled %}2022 年快到了....{% endnote %}
{% note pink 'anzhiyufont anzhiyu-icon-instagram' disabled %}小心开车 安全至上{% endnote %}
{% note red 'anzhiyufont anzhiyu-icon-fan' disabled%}这是三片呢？还是四片？{% endnote %}
{% note orange 'anzhiyufont anzhiyu-icon-dengpao' disabled %}你是刷 Visa 还是 UnionPay{% endnote %}
{% note purple 'anzhiyufont anzhiyu-icon-sanmingzhi' disabled %}剪刀石头布{% endnote %}
{% note green 'anzhiyufont anzhiyu-icon-ic_train' disabled %}前端最讨厌的浏览器{% endnote %}

样式预览:

你是刷 Visa 还是 UnionPay

2021 年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

示例源码:

{% note no-icon %}你是刷 Visa 还是 UnionPay{% endnote %}
{% note blue no-icon %}2021 年快到了....{% endnote %}
{% note pink no-icon %}小心开车 安全至上{% endnote %}
{% note red no-icon %}这是三片呢？还是四片？{% endnote %}
{% note orange no-icon %}你是刷 Visa 还是 UnionPay{% endnote %}
{% note purple no-icon %}剪刀石头布{% endnote %}
{% note green no-icon %}前端最讨厌的浏览器{% endnote %}

---

折叠框

• 默认样式
• 默认打开

样式预览:

点击查看内容

这是一条隐藏内容。

示例源码:

{% folding 点击查看内容 %}

这是一条隐藏内容。

{% endfolding %}

样式预览:

默认打开的折叠框

这是一个默认打开的折叠框。

示例源码:

{% folding cyan open, 查看默认打开的折叠框 %}

这是一个默认打开的折叠框。

{% endfolding %}

---

时间轴

• 默认颜色
• 变更颜色

样式预览:

2022

01-02

这是测试页面

示例源码:

{% timeline 2022 %}
<!-- timeline 01-02 -->

这是测试页面
<!-- endtimeline -->

{% endtimeline %}

支持颜色：blue 、purple 、pink 、red 、orange 、green

样式预览:

2022

01-02

这是测试页面

示例源码:

{% timeline 2022,purple %}
<!-- timeline 01-02 -->

这是测试页面
<!-- endtimeline -->

{% endtimeline %}

---

图片样式

• 指定宽度

样式预览:

示例源码:

{% image https://f.pz.al/pzal/2023/08/25/7118fd2f2153e.png, width=400px %}

---

网站卡片

• 样式预览
• 示例源码

网站

值得推荐的网站

Weibo

中国最大社交分享平台

少阳研究所

bilibili

{% flink %}
- class_name: 网站
  class_desc: 值得推荐的网站
  flink_style: anzhiyu
  link_list:
    - name: Weibo
      link: https://weibo.com/u/2675532694
      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
      descr: 中国最大社交分享平台
    - name: 少阳研究所
      link: https://space.bilibili.com/341981702
      avatar: https://f.pz.al/pzal/2023/08/31/099d5f3cf1204.png
      descr: bilibili      
{% endflink %}

---

音频胶囊

• 样式预览
• 示例源码

{% audio https://npm.elemecdn.com/anzhiyu-music@1.0.4/%E9%9D%92%E8%8A%B1%E7%93%B7/%E9%9D%92%E8%8A%B1%E7%93%B7.mp3 %}