ZhenXing Blog

看山是山，看山不是山，看山还是山

0%

HexTag标签插件使用

发表于 更新于 分类于 阅读次数：
本文字数： 2.2k 阅读时长 ≈ 2 分钟

Tag Plugin是一种支持Hexo以标签插件形式来标准Markdown中显示具有自定义尺寸的图像。

1.文本居中引用- Centered Quote

代码

1
{% cq %}世间所有的相遇，都是久别重逢{% endcq %}

效果

世间所有的相遇，都是久别重逢

2.提示块 - Note

配置 主题配置文件_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 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

代码

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 提示块标签

3.标签 - Label

代码

1
2
3
4
5
6
7
{% label default@默认 %} 
{% label primary@主要 %} 
{% label success@成功 %} 
{% label info@信息 %} 
{% label warning@警告 %} 
{% label danger@危险 %} 
{% label success@这是成功的信息%}

效果

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

4.选项卡 - Tabs

修改主题配置文件

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

代码

1
2
3
4
5
6
7
8
9
10
11
{% tabs tab,1 %} 名字为tab，默认在第1个选项卡，如果是-1则隐藏
<!-- tab -->
**选项卡 1** 
<!-- endtab -->
<!-- tab -->
**选项卡 2**
<!-- endtab -->
<!-- tab A -->
**选项卡 3** 名字为A
<!-- endtab -->
{% endtabs %}

效果

选项卡 1

选项卡 2

选项卡 3 名字为A

5.按钮 - Button

代码

1
{% button url, text, icon [class], [title] %}

描述

  • url : 绝对或相对 URL
  • icon : FontAwesome 图标名称（开头没有’fa-‘）。如果未指定文本，则为必需
  • [class] : FontAwesome 类：fa-fw | fa-lg | fa-2x | fa-3x | fa-4x | fa-5X ，可选参数。
  • [title] : 鼠标悬停时的工具提示，可选参数。

Example

代码:

1
<div class="text-center"><div>{% button https://zhenxingblog.site/ ,首页,home fa-fw,这是ZhenXing的个人博客首页%} {% button https://www.iqiyi.com/ ,观影,film fa-fw,爱奇艺%} {% button https://www.cnki.net/,阅读,book fa-fw,中国知网%}</div></div>

效果: