标签外挂

原生式标签

AtomのBlog

{% blockquote %}
文本内容
{% endblockquote %}

原生默认

语法格式

{% note 样式参数 %}
文本内容
{% endnote %}

默认灰色

{% note default %}
文本内容
{% endnote %}

紫色

{% note primary %}
文本内容
{% endnote %}

绿色

{% note success %}
文本内容
{% endnote %}

红色

{% note danger %}
文本内容
{% endnote %}

蓝色

{% note info %}
文本内容
{% endnote %}

黄色

{% note warning %}
文本内容
{% endnote %}

原生透明

语法格式

{% note 样式参数 标签主题参数 %}
文本内容
{% endnote %}

灰色

{% note default simple %}
文本内容
{% endnote %}

紫色

{% note primary simple %}
文本内容
{% endnote %}

绿色

{% note success simple %}
文本内容
{% endnote %}

红色

{% note danger simple %}
文本内容
{% endnote %}

蓝色

{% note info simple %}
文本内容
{% endnote %}

黄色

{% note warning simple %}
文本内容
{% endnote %}

原生纯背景

语法格式

{% note 样式参数 标签主题参数 %}
文本内容
{% endnote %}

灰色

{% note default modern %}
文本内容
{% endnote %}

紫色

{% note primary modern %}
文本内容
{% endnote %}

绿色

{% note success modern %}
文本内容
{% endnote %}

红色

{% note danger modern %}
文本内容
{% endnote %}

蓝色

{% note info modern %}
文本内容
{% endnote %}

黄色

{% note warning modern %}
文本内容
{% endnote %}

原生无背景

语法格式

{% note 样式参数 标签主题参数 %}
文本内容
{% endnote %}

灰色

{% note default disabled %}
文本内容
{% endnote %}

紫色

{% note primary disabled %}
文本内容
{% endnote %}

绿色

{% note success disabled %}
文本内容
{% endnote %}

红色

{% note danger disabled %}
文本内容
{% endnote %}

蓝色

{% note info disabled %}
文本内容
{% endnote %}

黄色

{% note warning disabled %}
文本内容
{% endnote %}

原生无图标

语法格式

{% note 样式参数 标签主题参数 %}
文本内容
{% endnote %}

灰色

{% note default no-icon %}
文本内容
{% endnote %}

紫色

{% note primary no-icon %}
文本内容
{% endnote %}

绿色

{% note success no-icon %}
文本内容
{% endnote %}

红色

{% note danger no-icon %}
文本内容
{% endnote %}

蓝色

{% note info no-icon %}
文本内容
{% endnote %}

黄色

{% note warning no-icon %}
文本内容
{% endnote %}

原生自定义图标

语法格式

{% note 颜色 图标 标签主题参数 %}
文本内容
{% endnote %}

灰色

{% note 'fab fa-cc-visa' simple %}
文本内容
{% endnote %}

蓝色

{% note blue 'fas fa-bullhorn' simple %}
文本内容
{% endnote %}

粉色

{% note pink 'fas fa-car-crash' simple %}
文本内容
{% endnote %}

红色

{% note red 'fas fa-fan' simple %}
文本内容
{% endnote %}

橙色

{% note orange 'fas fa-battery-half' simple %}
文本内容
{% endnote %}

紫色

{% note purple 'far fa-hand-scissors' simple %}
文本内容
{% endnote %}

绿色

{% note green 'fab fa-internet-explorer' simple %}
文本内容
{% endnote %}

上标渐变式标签

语法格式

<div class="tip 可加参数">
<p>文本内容</p>
</div>

蓝色渐变

<div class="tip">
<p>文本内容</p>
</div>

绿色渐变

<div class="tip success">
<p>文本内容</p>
</div>

红色渐变

<div class="tip error">
<p>文本内容</p>
</div>

橙色渐变

<div class="tip warning">
<p>文本内容</p>
</div>

青色渐变

<div class="tip home">
<p>文本内容</p>
</div>

紫色渐变

<div class="tip ffa">
<p>文本内容</p>
</div>

自定义标签

语法格式

<div class='snote 可加参数'>
文本内容
</div>
右箭头-红色
<div class='snote red'>
文本内容
</div>
引号-蓝色
<div class='snote quote'>
文本内容
</div>
核能-灰色
<div class='snote radiation'>
文本内容
</div>
bug-灰色
<div class='snote bug'>
文本内容
</div>
灯泡-灰色
<div class='snote idea'>
文本内容
</div>
<div class='snote link'>
文本内容
</div>
别针-灰色
<div class='snote paperclip'>
文本内容
</div>
列表-灰色
<div class='snote todo'>
文本内容
</div>
箭头向右-青色
<div class='snote msg cyan'>
文本内容
</div>
路标-灰色
<div class='snote guide'>
文本内容
</div>
下载-灰色
<div class='snote download'>
文本内容
</div>
向上-灰色
<div class='snote up'>
文本内容
</div>
刷新-灰色
<div class='snote undo'>
文本内容
</div>

半透明式note和tag小标签

透明式note

语法格式

<p class='div-border 可加参数'>
文本内容
</p>

绿色

<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>

粉色

<p class='div-border pink'>
文本内容
</p>

紫色

<p class='div-border people'>
文本内容
</p>

边框可以左右加粗

<p class='div-border right left yellow'>
文本内容
</p>

也可以上下加粗

<p class='div-border top bottom people'>
文本内容
</p>

当然也可以全部加粗

<p class='div-border right left top bottom blue'>
文本内容
</p>

tag小标签

语法格式

<span class="inline-tag 可加参数">
文本内容
</span>
这是一个测试
<span class="inline-tag red">
文本内容
</span>
这是一个测试
<span class="inline-tag green">
文本内容
</span>
这是一个测试
<span class="inline-tag blue">
文本内容
</span>
这是一个测试
<span class="inline-tag pink">
文本内容
</span>
这是一个测试
<span class="inline-tag yellow">
文本内容
</span>
这是一个测试
<span class="inline-tag grey">
文本内容
</span>
这是一个测试
<span class="inline-tag people">
文本内容
</span>

折叠框

语法格式

{% folding 参数(可选), 标题 %}

内容

{% endfolding %}
查看图片测试

{% folding 标题文本 %}

![](自定义url)

{% endfolding %}
默认打开的折叠框

这是一个默认打开的折叠框

{% folding cyan open, 标题 %}

文本内容

{% endfolding %}
查看代码测试
Atom
Goku
查看列表测试
  • Atom
  • Goku
{% folding yellow, 查看列表测试%}

- Atom
- Goku

{% endfolding %}
查看嵌套测试
查看嵌套测试2
查看嵌套测试3

Atom

{% folding red, 标题 %}

{% folding blue, 标题2 %}

{% folding 标题3 %}

内容

{% endfolding %}

{% endfolding %}

{% endfolding %}

tab容器

这里面写内容,支持的语法格式有限,请尽量不要写太过复杂的东西

{% tabs tab-id %}
<!-- tab 标题 -->
文本内容
<!-- endtab -->
{% endtabs %}

tab-id

必填,如果一个页面有多个 tabs 时,tab-id 不能重复。

tab-name

标签文本


复选框

样式 写法

这是一个测试

{% checkbox 替换文本 %}

支持简单的 markdown 语法

{% checkbox checked, 支持简单的 [替换文本](替换链接) %}

支持自定义颜色

{% checkbox red, 替换文本 %}

绿色 + 默认选中

{% checkbox green checked, 替换文本 %}

黄色 + 默认选中

{% checkbox yellow checked, 替换文本 %}

青色 + 默认选中

{% checkbox cyan checked, 替换文本 %}

蓝色 + 默认选中

{% checkbox blue checked, 替换文本 %}

增加

{% checkbox plus green checked, 替换文本 %}

减少

{% checkbox minus yellow checked, 替换文本 %}

{% checkbox times red checked, 替换文本 %}

这是一个测试

{% radio 替换文本 %}

支持简单的 markdown 语法

{% radio checked, 支持简单的 [替换文本](替换链接) 语法 %}

支持自定义颜色

{% radio red, 替换文本 %}

绿色

{% radio green, 替换文本 %}

黄色

{% radio yellow, 替换文本 %}

青色

{% radio cyan, 替换文本 %}

蓝色

{% radio blue, 替换文本 %}

按钮

原生

样式 写法
Atom {% btn '替换链接',替换文本 %}
Atom {% btn '替换链接',替换文本,outline %}
Atom {% btn '替换链接',替换文本,far fa-hand-point-right,larger %}
Atom {% btn '替换链接',替换文本,far fa-hand-point-right,blue larger %}
Atom {% btn '替换链接',替换文本,far fa-hand-point-right,pink larger %}
Atom {% btn '替换链接',替换文本,far fa-hand-point-right,red larger %}
Atom {% btn '替换链接',替换文本,far fa-hand-point-right,purple larger %}
Atom {% btn '替换链接',替换文本,far fa-hand-point-right,orange larger %}
Atom {% btn '替换链接',替换文本,far fa-hand-point-right,green larger %}
Atom {% btn '替换链接',替换文本,far fa-hand-point-right,outline %}
Atom {% btn '替换链接',替换文本,far fa-hand-point-right,outline blue %}
Atom {% btn '替换链接',替换文本,far fa-hand-point-right,outline pink %}
Atom {% btn '替换链接',替换文本,far fa-hand-point-right,outline red %}
Atom {% btn '替换链接',替换文本,far fa-hand-point-right,outline purple %}
Atom {% btn '替换链接',替换文本,far fa-hand-point-right,outline orange %}
Atom {% btn '替换链接',替换文本,far fa-hand-point-right,outline green %}

ElementUI

<div>
<div class="el-row" align="center">
<button type="button" class="el-button el-button--default">
<span>默认按钮</span>
</button>
<button type="button" class="el-button el-button--primary">
<span>主要按钮</span>
</button>
<button type="button" class="el-button el-button--success">
<span>成功按钮</span>
</button>
<button type="button" class="el-button el-button--info">
<span>信息按钮</span>
</button>
<button type="button" class="el-button el-button--warning">
<span>警告按钮</span>
</button>
<button type="button" class="el-button el-button--danger">
<span>危险按钮</span>
</button>
</div>
<div class="el-row" align="center">
<button type="button" class="el-button el-button--default is-plain">
<span>朴素按钮</span>
</button>
<button type="button" class="el-button el-button--primary is-plain">
<span>主要按钮</span>
</button>
<button type="button" class="el-button el-button--success is-plain">
<span>成功按钮</span>
</button>
<button type="button" class="el-button el-button--info is-plain">
<span>信息按钮</span>
</button>
<button type="button" class="el-button el-button--warning is-plain">
<span>警告按钮</span>
</button>
<button type="button" class="el-button el-button--danger is-plain">
<span>危险按钮</span>
</button>
</div>
<div class="el-row" align="center">
<button type="button" class="el-button el-button--default is-round">
<span>圆角按钮</span>
</button>
<button type="button" class="el-button el-button--primary is-round">
<span>主要按钮</span>
</button>
<button type="button" class="el-button el-button--success is-round">
<span>成功按钮</span>
</button>
<button type="button" class="el-button el-button--info is-round">
<span>信息按钮</span>
</button> <button type="button" class="el-button el-button--warning is-round">
<span>警告按钮</span></button>
<button type="button" class="el-button el-button--danger is-round">
<span>危险按钮</span>
</button>
</div>
<div class="el-row" align="center">
<button type="button" class="el-button el-button--default is-circle">
<i class="el-icon-search">
</i>
</button>
<button type="button" class="el-button el-button--primary is-circle">
<i class="el-icon-edit">
</i>
</button>
<button type="button" class="el-button el-button--success is-circle">
<i class="el-icon-check">
</i>
</button>
<button type="button" class="el-button el-button--info is-circle">
<i class="el-icon-message">
</i>
</button>
<button type="button" class="el-button el-button--warning is-circle">
<i class="el-icon-star-off">
</i>
</button>
<button type="button" class="el-button el-button--danger is-circle">
<i class="el-icon-delete">
</i>
</button>
</div>
</div>
<div align="center">
<div class="el-button-group">
<button type="button" class="el-button el-button--primary">
<i class="el-icon-arrow-left"></i>
<span>上一页</span>
</button>
<button type="button" class="el-button el-button--primary">
<span>下一页</span>
<i class="el-icon-arrow-right el-icon--right"></i>
</button>
</div>
<div class="el-button-group">
<button type="button" class="el-button el-button--primary">
<i class="el-icon-edit"></i>
</button>
<button type="button" class="el-button el-button--primary">
<i class="el-icon-share"></i>
</button>
<button type="button" class="el-button el-button--primary">
<i class="el-icon-delete"></i>
</button>
</div>
</div>

附文本按钮

{% btns circle grid5 %}
{% cell 文本内容, 前往地址, 图片链接 %}
{% endbtns %}
{% btns rounded grid5 %}
{% cell 文本内容, /, 图标名 %}
{% endbtns %}
{% btns circle center grid5 %}
<a href='前往地址'>
<i class='图标名'></i>
<b>文本内容</b>
{% p red, 描述 %}
<img src='图片地址'>
</a>
{% endbtns %}

点击显示答案按钮

示例 写法
你觉得我帅不帅? 当然帅啊 问题文本? {% hideInline 答案文本,按钮文本,#e967de,#ffffff %}
你觉得我帅不帅? 当然帅啊 问题文本 {% hideInline 答案文本 %}

文字效果

文字大小和对齐

AtomのBlog

行内文本

{% span 样式参数, 文本内容 %}

独立段落

{% p 样式参数, 文本内容 %}

样式参数位置可以写颜色、大小和对齐方向,多个样式参数用空格隔开

字体

logo, code

颜色

red, yellow, green, cyan, blue, pink, people, gray

大小

small, h4, h3, h2, h1, large, huge, ultra

对齐方向

left, center, right

文字颜色

样式 写法
红色 {% span red, 自定义文本 %}
黄色 {% span yellow, 自定义文本 %}
绿色 {% span green, 自定义文本 %}
青色 {% span cyan, 自定义文本 %}
蓝色 {% span blue, 自定义文本 %}
粉色 {% span pink, 自定义文本 %}
紫色 {% span people, 自定义文本 %}
灰色 {% span gray, 自定义文本 %}

密码样式的文本

效果 写法
AtomのBlog <psw>文本内容</psw>

文字打印机

普通

<script src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/js/typed.js"></script>
<strong id="typedjs1"></strong>
<script>
var typed = new Typed("#typedjs1", {
strings: ['文本内容'],
startDelay: 0,
typeSpeed: 200,
backSpeed: 100,
loop: true,
showCursor: true,
shuffle: false
});
</script>

彩色

<p><strong id="colortap1"></strong></p>
<script>
var colortap = function (r) {
function t() {return b[Math.floor(Math.random() * b.length)]}
function e() {return String.fromCharCode(94 * Math.random() + 33)}
function n(r) {
for(var n=document.createDocumentFragment(),i=0;r>i;i++){
var l=document.createElement("span");
l.textContent=e(),l.style.color=t(),n.appendChild(l)
}
return n;
}
function i() {
var t = o[c.skillI];
c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")),
r.textContent = c.text,
r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))),
setTimeout(i, d)
}
var l = "",
o = ["文本内容"].map(function (r) {return r + ""}),
a = 2,g = 1,s = 5,d = 75,
b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"],
c = {text: "",prefixP: -s,skillI: 0,skillP: 0,direction: "forward",delay: a,step: g};i()
};
colortap(document.getElementById('colortap1'));
</script>

多媒体引用

音乐

直接引用

🎙️【2018拜年祭单品】与你同行~B With U~ 🎵

🎧【2018拜年祭单品】与你同行~B With U~ 伴奏 🎶

{% audio 音乐链接 %}

MetingJS

{% meting "auto:https://music.163.com/#/song?id=1438500079" %}

参数:

配置项 默认 描述
id 必须 音乐 id,第一个参数
server 必须 音乐平台,第二个参数,可选: netease , tencent , kugou , xiami , baidu
type 必须 音乐类型,第三个参数,可选: song , playlist , album search , artist
auto 有 auto 选项时前面参数不需要填写,否则为必填,见示例 2
autoplay false 自动播放,带有此参数表示 true ,不带表示 false
fixed false 吸底模式,带有此参数表示 true ,不带表示 false
mini false 迷你模式,带有此参数表示 true ,不带表示 false
listfolded false 默认折叠列表,带有此参数表示 true ,不带表示 false
mutex true 互斥,如不需互斥 "mutex:false"
theme #2980b9 主题颜色
loop all 循环模式 ,可选值 all , one , none
order list 播放顺序,可选值 list , random
preload auto 预加载模式 ,可选 none , metadata , auto
volume 0.7 默认音量,可选 0-1
lrctype 0 歌词类型
listmaxheight 340px 播放器最大高度
storagename metingjs

Aplayer

{% aplayer "歌曲名" "歌手" "歌曲位置" "封面" "lrc:歌词位置" %}

参数:

配置项 默认 描述
title 必须 曲目标题,第一个参数
author 必须 曲目作者,第二个参数
url 必须 音乐文件地址
picture_url 音乐对应的图片地址
narrow false 袖珍风格,带有此参数表示 true ,不带表示 false
autoplay false 自动播放,带有此参数表示 true ,不带表示 false
width:xxx 100% 播放器宽度
lrc 歌词地址

视频

哔哩哔哩视频AV号和BV号获取 直接按F12进入控制台输入 aid是AV号 bvid是BV号

直接引用

单个视频

{% video 视频链接 %}

多个视频

{% videos 对齐方向, 列数 %}
{% video 视频链接 %}
{% video 视频链接 %}
{% video 视频链接 %}
{% endvideos %}

对齐方向

left, center, right

列数

逗号后面直接写列数,支持 1 ~ 4 列


Atom

Dplayer

{% dplayer "url:视频地址" "pic:视频封面" %}

参数:

配置项 默认 描述
url 必填 视频地址
pic 封面
thumbnails 缩略图
type auto 视频格式,可选 auto hls dash shakaDash flv webtorrent
id 弹幕 id,建议使用视频的 CRC 或 MD5,再或使用 UUID
api 弹幕 api
token
maximum 10000 最大弹幕数
user DIYgod 弹幕发送用户名
bottom 15% 弹幕底端距离
unlimited true
addition 额外弹幕,可重叠加多个
suburl 字幕地址
subtype webvtt 字幕类型,可选 webvtt ass
subbottom 40px 字幕底端距离
subfontSize 20px 字幕字体大小
subcolor #fff 字幕字体颜色
autoplay false 自动播放,带有此参数表示 true,不带表示 false
loop false 循环,带有此参数表示 true,不带表示 false
screenshot false 截屏按钮,带有此参数表示 true,不带表示 false,此参数会造成跨域
hotkey true 热键控制
mutex true 互斥
theme #b7daff 主题颜色
lang 语言,不指定会根据浏览器环境自动识别
preload auto 预加载,可选 none metadata auto
logo logo 地址
volume 0.7 默认音量 0-1
contextmenu 右键菜单,可叠加
highlight 高光点,可叠加多个,例如 "highlight:{time: 20, text: '这是第 20 秒'}"
code 额外代码,不懂不要填,需要写的请参考源码

bilibili

{% bilibili "aid:视频AV号或BV号" "quality:清晰度" "danmaku" "弹幕开或关" %}

参数:

配置项 默认 描述
bvid 视频 bv 号,bvid、aid 和 av 必填一项,推荐使用 bvid
aid 视频 av 号
av 视频链接地址,不要带分 P 信息,与 aid 同时填写会被覆盖,不推荐使用
page 1 分 P,填写 av 时才会生效
quality low 视频质量,可选 high low
danmaku false 开启弹幕,带有此参数表示 true,不带表示 false
allowfullscreen true 是否允许全屏
width 100% 宽度
max_width 800px 最大宽度
margin auto 位置,css 属性,例: "margin:auto" "margin:0 0 0 auto"

相册

相册

{% gallery %}
markdown 图片链接
{% endgallery %}

图库

<div class="gallery-group-main">
{% galleryGroup '图库名字' '图库描述' '图库位置' 图库封面 %}
</div>