前言

  • 在安装了店长的Tag Plugins Plus标签插件之后，想逐个测试一下各个标签的写法，以便以后自己回顾，因此有了这篇博客（不是想水一篇博文）。
  • 插件的出处，安装，和完整的使用教程请看店长的原文,这里就不赘述了。

    Tag Plugins Plus

    https://akilar.top/posts/615e2dec/

  • 因为是方便我个人使用，所以各个标签的测试并不会遵循一定的顺序
  • 一些标签组件的组件的样式，我小幅度魔改过，所以可能按照教程写出来标签样式跟我不太一样，但功能是相同的
  • 然后学业繁忙，本博文长期更新

分栏 tab

1
2
3
4
5
{% tabs Unique name,[index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}
  1. Unique name :
    • 选项卡块标签的唯一名称，不带逗号。
    • 将在 #id 中用作每个标签及其索引号的前缀。
    • 如果名称中包含空格，则对于生成 #id，所有空格将由破折号代替。
    • 仅当前帖子 / 页面的 URL 必须是唯一的！
  2. [index]:
    • 活动选项卡的索引号。
    • 如果未指定，将选择第一个标签（1）。
    • 如果 index 为 - 1，则不会选择任何选项卡。
    • 可选参数。
  3. [Tab caption]:
    • 当前选项卡的标题。
    • 如果未指定标题，则带有制表符索引后缀的唯一名称将用作制表符的标题。
    • 如果未指定标题，但指定了图标，则标题将为空。
    • 可选参数。
  4. [@icon]:
    • FontAwesome 图标名称（全名，看起来像 “fas fa-font”）
    • 可以指定带空格或不带空格；
    • 例如’Tab caption @icon’ 和 ‘Tab caption@icon’.
    • 可选参数。

不填index，预设默认选择第一个

不填index，预设默认选择第一个

不填index，预设默认第一个

填写index，预设选择index值,这里index是2

填写index，预设选择index值,这里index是2

填写index，预设选择index值,这里index是2

index值为-1，没有预设值

填写index，没有预设值

填写index，没有预设值

只有tab名

只有icon

有tab名和icon

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test_1 %}
<!-- tab -->
不填index，预设默认选择第一个
<!-- endtab -->

<!-- tab -->
不填index，预设默认选择第一个
<!-- endtab -->

<!-- tab -->
不填index，预设默认第一个
<!-- endtab -->
{% endtabs %}
1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test_2,2 %}
<!-- tab -->
填写index，预设选择index值,这里index是2
<!-- endtab -->

<!-- tab -->
填写index，预设选择index值,这里index是2
<!-- endtab -->

<!-- tab -->
填写index，预设选择index值,这里index是2
<!-- endtab -->
{% endtabs %}
1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test_3, -1 %}
<!-- tab -->
index值为-1，没有预设值
<!-- endtab -->

<!-- tab -->
填写index，没有预设值
<!-- endtab -->

<!-- tab -->
填写index，没有预设值
<!-- endtab -->
{% endtabs %}
1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test_4 %}
<!-- tab 只有tab名 -->
只有tab名
<!-- endtab-->

<!-- tab 只有icon@fas fa-bomb -->
只有icon
<!-- endtab-->

<!-- tab 有tab名和icon@fas fa-bomb -->
有tab名和icon
<!-- endtab-->
{% endtabs %}

网站卡片 sitegroup

1
2
3
4
{% sitegroup %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}
{% endsitegroup %}
gallifrey's bolg我的技术归档，我的生活，我的梦
Akilarの糖果屋期待您的光临！
 
1
2
3
4
5
6
7
{% sitegroup %}

{% site gallifrey's bolg, url=https://gallifrey.asia/posts/8b793eb7376b/, screenshot=https://gallifrey.asia/img/sitehostIMG.webp, avatar=https://gallifrey.asia/images/shizi.png, description=Tag Plugins Plus标签插件的使用测试 %}

{% site Akilarの糖果屋, url=https://gallifrey.asia/posts/8b793eb7376b/, screenshot=https://cdn.jsdelivr.net/gh/Akilarlxh/ScreenShot@gh-pages/akilar.top.jpg, avatar=https://npm.elemecdn.com/akilar-candyassets/image/siteicon/favicon.png, description=期待您的光临！%}

{% endsitegroup %}

上标标签

1
{% tip [参数，可选] %}文本内容{% endtip %}
  1. 样式: success,error,warning,bolt,ban,home,sync,cogs,key,bell
  2. 自定义图标: 支持fontawesome。
  3. 自定图标有bug，没有提权值，只能等店长更新插件了（1.016版本之后把这个bug修复了），不过这里还是放个fontawesome的链接：Icons | Font Awesome

默认情况

success

error

warning

bolt

ban

home

sync

cogs

key

bell

自定义font awesome图标

1
2
3
4
5
6
7
8
9
10
11
12
{% tip %}默认情况{% 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 %}

动态标签 anima


1
{% tip [参数，可选] %}文本内容{% endtip %}

更多详情请参看font-awesome-animation文档

  1. 将所需的CSS类添加到图标（或DOM中的任何元素）。
  2. 对于父级悬停样式，需要给目标元素添加指定CSS类，同时还要给目标元素的父级元素添加CSS类faa-parent animated-hover。（详情见示例及示例源码）
    You can regulate the speed of the animation by adding the CSS class or . faa-fastfaa-slow
  3. 可以通过给目标元素添加CSS类faa-fast或faa-slow来控制动画快慢。
On DOM load 当页面加载时 显示动画 On hover 当鼠标悬停时 显示动画 On parent hover 当鼠标悬停 在父级元素时 显示动画
faa-wrench animated faa-wrench animated-hover  faa-wrenchfaa-wrench
faa-ring animated faa-ring animated-hover  faa-ringfaa-ring
faa-horizontal animated faa-horizontal animated-hover  faa-horizontal
faa-vertical animated faa-vertical animated-hover  faa-vertical
faa-flash animated faa-flash animated-hover  faa-flash
faa-bounce animated faa-bounce animated-hover  faa-bounce
faa-spin animated faa-spin animated-hover  faa-spin
faa-tada animated faa-tada animated-hover  faa-tada
faa-pulse animated faa-pulse animated-hover  faa-pulse
faa-shake animated faa-shake animated-hover  faa-shake
faa-tada animated faa-tada animated-hover  faa-tada
faa-passing animated faa-passing animated-hover  faa-passing
faa-passing-reverse animated faa-passing-reverse animated-hover  faa-passing-reverse
faa-burst animated faa-burst animated-hover  faa-burst
faa-falling animated faa-falling animated-hover  faa-falling
faa-rising animated faa-rising animated-hover  faa-rising
  1. On DOM load（当页面加载时显示动画）

warning

ban

  1. 调整动画速度

warning

ban

  1. On hover（当鼠标悬停时显示动画）

warning

ban

  1. On parent hover（当鼠标悬停在父级元素时显示动画）

warning

ban

  1. On DOM load（当页面加载时显示动画）

    1
    2
    {% tip warning faa-horizontal animated %}warning{% endtip %}
    {% tip ban faa-flash animated %}ban{% endtip %}

  2. 调整动画速度

    1
    2
    {% tip warning faa-horizontal animated faa-fast %}warning{% endtip %}
    {% tip ban faa-flash animated faa-slow %}ban{% endtip %}

  3. On hover（当鼠标悬停时显示动画）

    1
    2
    {% tip warning faa-horizontal animated-hover %}warning{% endtip %}
    {% tip ban faa-flash animated-hover %}ban{% endtip %}

  4. On parent hover（当鼠标悬停在父级元素时显示动画）

    1
    2
    {% tip warning faa-parent animated-hover %}<p class="faa-horizontal">warning</p>{% endtip %}
    {% tip ban faa-parent animated-hover %}<p class="faa-flash">ban</p>{% endtip %}

5.示例中的表格是html+