CatBro's Blog

Volar con el viento

Hexo-NexT Tag 插件的使用

发表于 更新于 分类于 阅读次数： 评论数：
繁/简： 繁體
本文字数： 2.5k 阅读时长 ≈ 2 分钟

Tag Plugin 是一种使 Hexo 支持特殊样式内容的方法。例如，我们无法在标准 Markdown 中显示具有自定义尺寸的图像。然后我们可以使用标签插件来解决它。 Hexo 有很多可以帮助用户的标签。 Hexo 还具有主题接口，使主题能够创建自己的标签。

文本居中引用 - Centered Quote

使用方式：

1
{% cq %}因为我渺小的心灵里，容不下一个谜，一点悬而未决的东西{% endcq %}

效果展示：

因为我渺小的心灵里，容不下一个谜，一点悬而未决的东西

提示块 - Note

使用方式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% note default %}
default 提示块标签
{% endnote %}

{% note primary %}
primary 提示块标签
{% endnote %}

{% note success %}
success 提示块标签
{% endnote %}

{% note info %}
info 提示块标签
{% endnote %}

{% note warning %}
warning 提示块标签
{% endnote %}

{% note danger %}
danger 提示块标签
{% endnote %}

效果展示：

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

可在主题配置文件中修改风格：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Note tag (bs-callout)
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: flat
  icons: true
  # 圆角
  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

标签 - Label

使用方式：

1
2
{% label default@默认 %} {% label primary@主要 %} {% label info@信息 %} {% label warning@警告 %} {% label danger@危险 %} 
{% label success@成功%}

效果展示：

默认 主要 信息 警告 危险 成功

选项卡 - Tabs

使用方式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{% tabs tab, 2 %} 名字为tab，默认显示第1个选项卡，如果是-1则隐藏
<!-- tab 魏国-->
**曹操**

司马懿 郭嘉 荀彧 荀攸 程昱 杨修 

典韦 许褚 夏侯渊 夏侯惇 曹仁 于禁 张辽 徐晃

<!-- endtab -->
<!-- tab 蜀国-->
**刘备**

诸葛亮 庞统 徐庶 姜维 法正 马良

关羽 张飞 赵云 马超 黄忠 魏延 关兴 张苞

<!-- endtab -->
<!-- tab 吴国 -->
**孙权**

周瑜 张昭 鲁肃 诸葛瑾 陆逊

甘宁 太史慈 吕蒙 韩当 黄盖 程普  

<!-- endtab -->
{% endtabs %}

效果展示：

曹操

司马懿 郭嘉 荀彧 荀攸 程昱 杨修

典韦 许褚 夏侯渊 夏侯惇 曹仁 于禁 张辽 徐晃

刘备

诸葛亮 庞统 徐庶 姜维 法正 马良

关羽 张飞 赵云 马超 黄忠 魏延 关兴 张苞

孙权

周瑜 张昭 鲁肃 诸葛瑾 陆逊

甘宁 太史慈 吕蒙 韩当 黄盖 程普

可在主题配置文件中修改

1
2
3
4
5
6
# Tabs tag
tabs:
  transition:
    tabs: true
    labels: true
  border_radius: 3

按钮 - Button

使用方式：

1
{% button url, text, icon [class], [title] %}
  • url: 本地或外部url
  • text: 显示的文本，文本和图标至少指定一个
  • icon: 显示的图标， FontAwesome 图标名称（开头没有’fa-‘）
  • [class]: FontAwesome 类，可以取如下值fa-fw | fa-lg | fa-2x | fa-3x | fa-4x | fa-5X
  • title: 鼠标悬停时的提示信息

注意：最好添加 <div> 标签，测试时没加 div，下面显示不完全，加上非常美观。

一个示例：

1
<div>{% button https://catbro666.github.io/ ,首页,home fa-fw,这是我的博客首页%}</div>

效果展示：

多个按钮的时候可以套两层div。

1
<div class="text-center"><div>{% button https://catbro666.github.io/ ,首页,home fa-fw,这是我的博客首页%}{% button https://catbro666.github.io/archives ,归档, archive fa-lg}</div></div>
-------------本文结束感谢您的阅读-------------

欢迎关注我的其它发布渠道