Note

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
27
28
29
30
{% note primary no-icon %}
primary 提示块标籤
{% endnote %}

{% note default %}
default 提示块标籤
{% endnote %}

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

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

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

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

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

//或者使用html
<div class="note success no-icon"><p>success no-icon 提示块标签</p></div>

primary 提示块标籤

default 提示块标籤

primary 提示块标籤

success 提示块标籤

info 提示块标籤

warning 提示块标籤

danger 提示块标籤

success no-icon 提示块标签

GalleryGroup

1
2
3
4
5
<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
</div>
1
2
3
{% gallery %}
markdown 图片格式
{% endgallery %}

Tag-hide

Inline

1
{% hideInline content,display,bg,color %}
1
2
哪个英文字母最酷? {% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %}
门里站着一个人? {% hideInline 闪 %}

哪个英文字母最酷? 因为西装裤(C装酷)

门里站着一个人?

点击后不消失

1
2
3
.hide-block>a.hide-button.open, .hide-inline>a.hide-button.open {
display: inline-block;
}

Block

1
2
3
{% hideBlock display,bg,color %}
content
{% endhideBlock %}

查看答案

🍭怎么可能有答案

Tabs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}

Unique name : Unique name of tabs block tag without comma.
Will be used in #id's as prefix for each tab with their index numbers.
If there are whitespaces in name, for generate #id all whitespaces will replaced by dashes.
Only for current url of post/page must be unique!
[index] : Index number of active tab.
If not specified, first tab (1) will be selected.
If index is -1, no tab will be selected. It's will be something like spoiler.
Optional parameter.
[Tab caption] : Caption of current tab.
If not caption specified, unique name with tab index suffix will be used as caption of tab.
If not caption specified, but specified icon, caption will empty.
Optional parameter.
[@icon] : FontAwesome icon name (full-name, look like 'fas fa-font')
Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'.
Optional parameter.
  • 示列:
1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs test4 %}
<!-- tab 第一个Tab -->
**tab名字为第一个Tab**
<!-- endtab -->

<!-- tab @fab fa-apple-pay -->
**只有图标 没有Tab名字**
<!-- endtab -->

<!-- tab 炸弹@fas fa-bomb -->
**名字+icon**
<!-- endtab -->
{% endtabs %}

tab名字为第一个Tab

只有图标 没有Tab名字

名字+icon

Button

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}

[url] : 链接
[text] : 按钮文字
[icon] : [可选] 图标
[color] : [可选] 按钮背景顔色(默认style时)
按钮字体和边框顔色(outline时)
default/blue/pink/red/purple/orange/green
[style] : [可选] 按钮样式 默认实心
outline/留空
[layout] : [可选] 按钮佈局 默认为line
block/留空
[position] : [可选] 按钮位置 前提是设置了layout为block 默认为左边
center/right/留空
[size] : [可选] 按钮大小
larger/留空
  • 示例:
1
2
3
4
5
6
7
8
9
10
{% btn 'https://blog.justlovesmile.top',Justlovesmile %}
{% btn 'https://blog.justlovesmile.top',Justlovesmile,far fa-hand-point-right %}
{% btn 'https://blog.justlovesmile.top',Justlovesmile,,outline %}
{% btn 'https://blog.justlovesmile.top',Justlovesmile,far fa-hand-point-right,outline %}
{% btn 'https://blog.justlovesmile.top',Justlovesmile,far fa-hand-point-right,larger %}
{% btn 'https://blog.justlovesmile.top',Justlovesmile,far fa-hand-point-right,block %}
{% btn 'https://blog.justlovesmile.top',Justlovesmile,far fa-hand-point-right,block larger %}
{% btn 'https://blog.justlovesmile.top',Justlovesmile,far fa-hand-point-right,block right outline larger %}
{% btn 'https://blog.justlovesmile.top',Justlovesmile,far fa-hand-point-right,blue larger %}
{% btn 'https://blog.justlovesmile.top',Justlovesmile,far fa-hand-point-right,outline pink larger %}
Justlovesmile Justlovesmile Justlovesmile Justlovesmile Justlovesmile Justlovesmile Justlovesmile Justlovesmile Justlovesmile Justlovesmile

Span

1
2
3
4
5
6
7
8
9
10
11
12
13
/* note语法示例 */
<p class='div-border green'>绿色</p>
<p class='div-border red'>红色</p>
<p class='div-border yellow'>黄色</p>
<p class='div-border grey'>灰色</p>
<p class='div-border blue'>蓝色</p>
/* 小tag标签语法示例 */
<span class="inline-tag red">红色小标签</span>
<span class="inline-tag green">绿色小标签</span>
<span class="inline-tag blue">蓝色小标签</span>
<span class="inline-tag yellow">黄色小标签</span>
<span class="inline-tag grey">灰色小标签</span>
<span class="inline-tag orange"></span>

绿色

红色

黄色

灰色

蓝色

红色小标签
绿色小标签
蓝色小标签
黄色小标签
灰色小标签

自定义Checkbox

  • css样式
1
.checkbox{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.checkbox input{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;position:relative;height:16px;width:16px;transition:all .15s ease-out 0s;cursor:pointer;display:inline-block;outline:0;border-radius:2px;-ms-flex-negative:0;flex-shrink:0;margin-right:8px}.checkbox input[type=checkbox]:after,.checkbox input[type=checkbox]:before{position:absolute;content:"";background:#fff}.checkbox input[type=checkbox]:before{left:1px;top:5px;width:0;height:2px;transition:all .2s ease-in;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg)}.checkbox input[type=checkbox]:after{right:7px;bottom:3px;width:2px;height:0;transition:all .2s ease-out;transform:rotate(40deg);-webkit-transform:rotate(40deg);-moz-transform:rotate(40deg);-ms-transform:rotate(40deg);-o-transform:rotate(40deg);transition-delay:.25s}.checkbox input[type=checkbox]:checked:before{left:0;top:7px;width:6px;height:2px}.checkbox input[type=checkbox]:checked:after{right:3px;bottom:1px;width:2px;height:10px}.checkbox.minus input[type=checkbox]:before{transform:rotate(0);left:1px;top:5px;width:0;height:2px}.checkbox.minus input[type=checkbox]:after{transform:rotate(0);left:1px;top:5px;width:0;height:2px}.checkbox.minus input[type=checkbox]:checked:before{left:1px;top:5px;width:10px;height:2px}.checkbox.minus input[type=checkbox]:checked:after{left:1px;top:5px;width:10px;height:2px}.checkbox.plus input[type=checkbox]:before{transform:rotate(0);left:1px;top:5px;width:0;height:2px}.checkbox.plus input[type=checkbox]:after{transform:rotate(0);left:5px;top:1px;width:2px;height:0}.checkbox.plus input[type=checkbox]:checked:before{left:1px;top:5px;width:10px;height:2px}.checkbox.plus input[type=checkbox]:checked:after{left:5px;top:1px;width:2px;height:10px}.checkbox.times input[type=checkbox]:before{transform:rotate(45deg);left:3px;top:1px;width:0;height:2px}.checkbox.times input[type=checkbox]:after{transform:rotate(135deg);right:3px;top:1px;width:0;height:2px}.checkbox.times input[type=checkbox]:checked:before{left:1px;top:5px;width:10px;height:2px}.checkbox.times input[type=checkbox]:checked:after{right:1px;top:5px;width:10px;height:2px}.checkbox input[type=radio]{border-radius:50%}.checkbox input[type=radio]:before{content:"";display:block;width:8px;height:8px;border-radius:50%;margin:2px;transform:scale(0);transition:all .25s ease-out}.checkbox input[type=radio]:checked:before{transform:scale(1)}.checkbox input{border:2px solid #2196f3}.checkbox input[type=checkbox]:checked{background:#2196f3}.checkbox input[type=radio]:checked:before{background:#2196f3}.checkbox.red input{border-color:#fe5f58}.checkbox.red input[type=checkbox]:checked{background:#fe5f58}.checkbox.red input[type=radio]:checked:before{background:#fe5f58}.checkbox.green input{border-color:#3dc550}.checkbox.green input[type=checkbox]:checked{background:#3dc550}.checkbox.green input[type=radio]:checked:before{background:#3dc550}.checkbox.yellow input{border-color:#ffbd2b}.checkbox.yellow input[type=checkbox]:checked{background:#ffbd2b}.checkbox.yellow input[type=radio]:checked:before{background:#ffbd2b}.checkbox.cyan input{border-color:#1bcdfc}.checkbox.cyan input[type=checkbox]:checked{background:#1bcdfc}.checkbox.cyan input[type=radio]:checked:before{background:#1bcdfc}.checkbox.blue input{border-color:#2196f3}.checkbox.blue input[type=checkbox]:checked{background:#2196f3}.checkbox.blue input[type=radio]:checked:before{background:#2196f3}.checkbox p{display:inline-block;margin-top:2px!important;margin-bottom:0!important}
  • 使用示例
1
2
3
4
5
<div class="checkbox green checked"><input type="checkbox" checked=""><p>对此博客有任何疑问欢迎留言</p></div>
<div class="checkbox minus checked"><input type="checkbox" checked=""><p>valine 昵称处填写 QQ 号可以快速填写 QQ 昵称与 QQ 邮箱哦!</p></div>
<div class="checkbox times red checked"><input type="checkbox" checked=""><p>请不要恶意评论,感谢配合🎁</p></div>
<div class="checkbox plus yellow checked"><input type="checkbox" checked=""><p>Justlovesmile</p></div>
<div class="checkbox cyan checked"><input type="checkbox" checked=""><p>醒亦念卿,梦亦念卿</p></div>

对此博客有任何疑问欢迎留言

valine 昵称处填写 QQ 号可以快速填写 QQ 昵称与 QQ 邮箱哦!

请不要恶意评论,感谢配合🎁

Justlovesmile

醒亦念卿,梦亦念卿