常用的外挂标签样式

引用自

糖果屋教程贴

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

[1]
Akilarの糖果屋群聊简介
[2]
Butterfly文档

注释

正文气泡注释

这是正文,这是气泡注释提示标注文本这是气泡注释内容

这是源码最原始程序的代码 ,在, {} 里第一段表示标注第二段表示注释 第三段表示注释颜色,使用,隔开

1
这是{% bubble 源码,最原始程序的代码 %} ,在, {% bubble {} 里第一段表示标注,第二段表示注释  第三段表示注释颜色,"##00fb86" %},使用,隔开

这是顶部居中注释

1
2
{% nota 这是文本 ,这是注释  可以改气泡颜色 ,##00fb86 %}

超链接

link网页卡片

糖果屋教程贴

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

1
{% link 网页描述, 网址, 头像地址 %}

引用 用于文献引用

店长大佬的原教程
1
{% referfrom ,'店长大佬的原教程','https://akilar.top/posts/615e2dec/' %}

网站卡片 (不知道为什么点图片不行只能点文字)

而且不知道为啥就是引用不到 店长大佬的图

店长大佬的原教程店长大佬的他的站图我获取不到就...
1
2
3
4
{% sitegroup %}
{% site 店长大佬的原教程, url=https://akilar.top/posts/615e2dec/#referfrom_[6], screenshot=https://akilar.top/img/siteicon/favicon.ico
,  description=店长大佬的他的站图我获取不到就... %}
{% endsitegroup %}

带头像的按钮(我愿称之为网站卡片min版)

店长大佬的原教程

也可以使用图标作为显示图像 因为我不会用使用就不放式例例了

1
2
3
4
5
6
7
8
{% btns circle grid5 %}
{% cell 店长大佬的原教程, https://akilar.top/posts/615e2dec/#referfrom_[6], https://s2.loli.net/2022/10/11/TplNU79RMSv1wAZ.jpg %}
{% endbtns %}

{% btns rounded grid5 %}
{% cell 下载源码, /, fas fa-download %}
{% cell 描述, 网址, 图像或图标链接 %}
{% endbtns %}

文字效果

行内文本样式

文本内容
文本内容
文本内容
文本内容
Ctrl + C + V
文本内容

1
2
3
4
5
6
{% u 文本内容 %}
{% emp 文本内容 %}
{% wavy 文本内容 %}
{% del 文本内容 %}
{% kbd Ctrl %} + {% kbd C %} + {% kbd V %}
{% psw 文本内容 %}

时间轴 ()

时间线标题（可选）[

时间节点（标题）

正文内容

时间节点（标题）

正文内容

1
2
3
4
5
6
7
8
{% timeline 时间线标题（可选）[,color] %}
<!-- timeline 时间节点（标题） -->
正文内容
<!-- endtimeline -->
<!-- timeline 时间节点（标题） -->
正文内容
<!-- endtimeline -->
{% endtimeline %}

列表(单/复选)

支持MD语法 {% checkbox 这是复选框

支持自定义颜色 默认选中

加号

减号

删除

1
2
3
4
5
6
### {% checkbox checked, 支持MD语法 %}
{% checkbox 这是复选框 %}
{% checkbox red checked,支持自定义颜色 默认选中 %}
{% checkbox plus green checked, 加号 %}
{% checkbox minus yellow checked, 减号 %}
{% checkbox times red checked, 删除 %}

支持MD语法

纯文本测试

支持自定义颜色

1
2
{% radio 纯文本测试 %}
{% radio red, 支持自定义颜色 %}

内容

副标题文字并且两个都居中

1
2
3
{% p center 样式参数(参数以空格划分), 内容 %}
{% p center logo large, 超大号文字 %}
{% p center small, 副标题文字并且全部都居中(不然难注意到) %}

字体: logo, code
颜色: red,yellow,green,cyan,blue,gray
大小: small, h4, h3, h2, h1, large, huge, ultra
对齐方向: left, center, right

文字提示标签

default

info

success

error

warning

bolt

ban

home

sync

cogs

key

bell

自定义font awesome图标

1
2
3
4
5
6
7
8
9
10
11
12
13
{% 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 %}

页面载入开始

warning

ban

### 鼠标悬停开始

warning

ban

faa-wrench
faa-ring
faa-horizontal
faa-vertical
faa-flash
faa-bounce
faa-spin
faa-tada
faa-pulse
faa-shake
faa-tada
faa-passing
faa-passing-reverse
faa-burst
faa-falling
faa-rising
#### 区别: 页面加载:

图标链接 animated

鼠标悬停:

图标链接 animated-hover

鼠标停靠父容器

图标链接

引用 not flat样式 [color] [icon] [style]

默认

default 默认

primary 默认

success 默认

info 默认

warning 默认

danger 默认

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

{% 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 %}

框 栏 图 等块级标签

Tab栏

tab栏里可以使用正常的md语法
比如 # ## ### 等标题

1
2
3
Class Test{
    
}

也可以使用外挂标签

啊对对对

店长大佬的原教程
1
2
3
4
5
6
7
------------------------------------------------
{% tabs test4 %}
<!--tab 第一个tab -->
内容
<!-- endtab -->
{% endtabs %}
------------------------------------------------

折叠栏

这是折叠栏

颜色仅支持：blue, cyan, red…格式

标签名称后加open 表示默认打开

里面也支持外挂标签和md语法

店长大佬的原教程
1
2
3
4
5
6
7
8
9
10
11
12
{% folding cyan, 这是折叠栏 %}

颜色仅支持：blue, cyan, red...格式

标签名称后加open 表示默认打开

里面也支持外挂标签和md语法

{% referfrom ,'店长大佬的原教程','https://akilar.top/posts/615e2dec/' %}


{% endfolding %}

图库



1
2
3
{% gallery %}
![](地址)
{% endgallery %}

本文章所有代码均来自于

糖果屋教程贴

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

本文章只为自用更多更详细的使用方法及教程请转到 ↑↑↑↑↑