Argon短代码文档(摘抄)

Argon 主题提供了多种短代码的支持,这些短代码可以给文章中增加特殊的内容,让文章的表达形式更加丰富。

通过短代码,您可以很轻松地向文中插入一个折叠区块,或者插入一个 TODO-List、进度条、标签、提示、警告、隐藏文本、一个友情链接列表、时间轴、 Github Repo 信息卡等。

而要做到这些,你只需要在文中插入例如[alert]foobar[/alert]的短代码。Wordpress 和 Argon 主题会自动解析这些短代码并呈现在文章中。

介绍

一个短代码由标签、内容、和参数组成,和 HTML 有些类似。下面是一个短代码的结构。

[标签名 参数名1="参数值1" 参数名2="参数值2"]内容[/标签名]

在一个短代码中,标签是必须的,而参数和内容是不必须的。Wordpress 根据标签来识别短代码。不同标签名的短代码会被解析成不同的形式。

参数是对短代码中的附加内容,例如,你可以在一个提示短代码中,设置它的颜色、它的标题、图标等。接下来的文档中,对于某个短代码,会将其所有支持的参数列在一张表格中。

例如,[alert]foobar[/alert] 就是一个最简单的的短代码。alert 是短代码的标签名称,foobar 是这个短代码的内容。这个短代码没有参数。

另一个例子,[alert icon="flag"]foobar[/alert],这个短代码给有一个参数 icon,参数值为 flag,意思是在这个短代码生成的提示中会显示一个旗帜图标。

本文档会详细地对每一个短代码举例。

TODO 复选框

介绍

该短代码可以插入一个复选框(不可互动)

用法

[checkbox 参数名="参数值"]内容[/checkbox]

参数

参数名可选值默认值解释是否必须
checkedtrue/falsefalse是否勾选复选框
inlinetrue/falsefalse是否行内显示
有些参数不是必需的,如果不写某个参数则会使用默认值

例子

代码

[checkbox]默认复选框[/checkbox]
[checkbox checked="true"]已经完成的项目[/checkbox]
[checkbox checked="false"]还未完成的项目[/checkbox]

效果



标签

介绍

该短代码可以插入一个标签

用法

[label 参数名="参数值"]内容[/label]

标签是行内元素,可在行内插入,不会独占一行

参数

参数名可选值默认值解释是否必须
colorindigo/green/red/blue/orangeindigo标签颜色
shapesquare/roundsquare标签形状(方形/圆形)

有些参数不是必需的,如果不写某个参数则会使用默认值

例子

代码

方形
[label]默认标签[/label]
[label color="indigo"]靛蓝标签[/label]
[label color="green"]绿色标签[/label]
[label color="red"]红色标签[/label]
[label color="blue"]蓝色标签[/label]
[label color="orange"]橙色标签[/label]
圆形
[label color="indigo" shape="round"]靛蓝标签[/label]
[label color="green" shape="round"]绿色标签[/label]
[label color="red" shape="round"]红色标签[/label]
[label color="blue" shape="round"]蓝色标签[/label]
[label color="orange" shape="round"]橙色标签[/label]

效果

方形
默认标签
靛蓝标签
绿色标签
红色标签
蓝色标签
橙色标签
圆形
靛蓝标签
绿色标签
红色标签
蓝色标签
橙色标签

进度条

介绍

该短代码可以插入一个进度条

用法

[progressbar 参数名="参数值"]进度条标签内容[/progressbar]
进度条标签内容可以不填写,不填写会隐藏进度条标签

参数

参数名可选值默认值解释是否必须
progress0 ~ 100的数字100进度百分比
colorindigo/green/red/blue/orangeindigo进度条颜色
参数不是必需的,如果不写某个参数则会使用默认值

例子

代码

[progressbar progress="20"]默认进度条[/progressbar]
[progressbar progress="30" color="indigo"]靛蓝进度条[/progressbar]
[progressbar progress="40" color="green"]绿色进度条[/progressbar]
[progressbar progress="66" color="red"]红色进度条[/progressbar]
[progressbar progress="80" color="blue"]蓝色进度条[/progressbar]
[progressbar progress="100" color="orange"]橙色进度条[/progressbar] 
[progressbar progress="23"][/progressbar]
[progressbar]没有指明参数的进度条[/progressbar]
[progressbar progress="66.66"]小数进度条[/progressbar]

效果

默认进度条
20%

靛蓝进度条
30%

绿色进度条
40%

红色进度条
66%

蓝色进度条
80%

橙色进度条
100%

23%

没有指明参数的进度条
100%

小数进度条
66.66%

提示

介绍

该短代码可以插入一个提示条

用法

[alert 参数名="参数值"]内容[/alert]
内容不是必写的,如果不写则只显示标题(如果有标题)

参数

参数名可选值默认值解释是否必须
title字符串提示的标题
colorindigo/green/red/blue/orange/blackindigo提示的颜色
iconFont Awesome 中的图标名称 (不带 fa-)标题前的图标
参数不是必需的,如果不写某个参数则会使用默认值

例子

代码

[alert]默认提示[/alert]
[alert color="indigo"]靛蓝提示[/alert]
[alert color="green"]绿色提示[/alert]
[alert color="red"]红色提示[/alert]
[alert color="blue"]蓝色提示[/alert]
[alert color="orange"]橙色提示[/alert]
[alert color="black"]黑色提示[/alert]
[alert title="我是标题" color="indigo"]带标题的提示[/alert]
[alert icon="flag" color="indigo"]带图标的提示[/alert]
[alert title="我是标题" icon="flag" color="indigo"]带标题和图标的提示[/alert]

效果

默认提示

靛蓝提示

绿色提示

红色提示

蓝色提示

橙色提示

黑色提示

我是标题 带标题的提示

带图标的提示

警告

介绍

该短代码可以插入一个警告

用法

[admonition 参数名="参数值"]内容[/admonition]
内容不是必需的,如果不写则只显示标题

参数

参数名可选值默认值解释是否必须
title字符串警告的标题
colorindigo/green/red/blue/orange/black/greygrey警告的颜色
iconFont Awesome 中的图标名称 (不带 fa-)标题前的图标 (如果有标题)
有些参数不是必需的,如果不写某个参数则会使用默认值

例子

代码

[admonition]默认警告[/admonition]
[admonition title="我是标题" color="indigo"]靛蓝警告[/admonition]
[admonition title="我是标题" color="green"]绿色警告[/admonition]
[admonition title="我是标题" color="red"]红色警告[/admonition]
[admonition title="我是标题" color="blue"]蓝色警告[/admonition]
[admonition title="我是标题" color="orange"]橙色警告[/admonition]
[admonition title="我是标题" color="black"]黑色警告[/admonition]
[admonition title="我是标题" color="grey"]灰色警告[/admonition]
[admonition title="我是标题" icon="flag" color="indigo"]带标题和图标的警告[/admonition]
[admonition color="indigo"]不带标题的警告[/admonition]
[admonition title="只有标题的警告" color="indigo"][/admonition]
[admonition title="只有标题和图标的警告" icon="flag" color="indigo"][/admonition]

效果

默认警告

我是标题
靛蓝警告

我是标题
绿色警告

我是标题
红色警告

我是标题
蓝色警告

我是标题
橙色警告

我是标题
黑色警告

我是标题
灰色警告

我是标题
带标题和图标的警告

不带标题的警告

只有标题的警告

折叠区块

介绍

该短代码可以插入一个折叠区块,点击该折叠区块可以展开或收缩

用法

[collapse 参数名="参数值"]内容[/collapse]
内容是必需的

参数

参数名可选值默认值解释是否必须
title字符串折叠区块标题
colorindigo/green/red/blue/orange/blackindigo提示的颜色
iconFont Awesome 中的图标名称 (不带 fa-)标题前的图标
collapsedtrue/falsetrue默认是否折叠
一些参数不是必需的,如果不写某个参数则会使用默认值

例子

代码

[collapse title="默认折叠区块"]折叠的内容[/collapse]
[collapse title="靛蓝折叠区块" color="indigo"]折叠的内容[/collapse]
[collapse title="绿色折叠区块" color="green"]折叠的内容[/collapse]
[collapse title="红色折叠区块" color="red"]折叠的内容[/collapse]
[collapse title="蓝色折叠区块" color="blue"]折叠的内容[/collapse]
[collapse title="橙色折叠区块" color="orange"]折叠的内容[/collapse]
[collapse title="黑色折叠区块" color="black"]折叠的内容[/collapse]
[collapse title="灰色折叠区块" color="grey"]折叠的内容[/collapse]
[collapse title="无色折叠区块" color="none"]折叠的内容[/collapse]
[collapse title="显示左边框的折叠区块" showleftborder="true"]折叠的内容[/collapse]
[collapse title="带图标的折叠区块" icon="flag"]折叠的内容[/collapse]
[collapse title="默认展开的折叠区块" collapsed="false"]折叠的内容[/collapse]

效果











友情链接列表

介绍

该短代码可以插入一个友情链接模块

友情链接从 WordPress 自带的链接管理器中读取。请在 “WordPress 后台 – 链接” 菜单中管理链接

用法

[friendlinks 参数名="参数值"/]

Argon 将从 WordPress 的链接管理器中读取友链。

下面是链接管理器中几个参数的解释:

名称解释是否必须
名称友链的标题
Web 地址友链的地址
图像描述友链的描述
图像地址友链图像的地址
备注友链的联系方式,一行一个,每行为如下格式: “fa-xxx|https://example.com”。fa-xxx 表示 Fontawesome 中的图标名称,https://example.com 表示该联系方式的地址。

参数

参数名可选值默认值解释是否必须
style1/1-square/2/2-big1友链列表的样式,样式1/样式1-方形头像/样式2/样式2-大头像
sortlink_id:按 ID 排序url:按链接排序name:按名称排序owner:按添加友链的用户排序rating:按评分排序visible:按可见度排序length:按长度排序rand:随机顺序link_id友链排序规则
orderASC:升序DESC:降序ASC友链排序方式
参数不是必需的,如果不写某个参数则会使用默认值

例子

代码

[friendlinks/]

效果

时间线

介绍

该短代码可以插入一个时间线模块

用法

[timeline]
时间|标题|内容第一行|内容第二行|…|内容第 x 行
[/timeline]

每行中用竖线分隔。

时间显示在时间轴左侧,会按照输入原样显示。

时间中的换行符用 / 代替,例如想在 2020-1-123:33 中加一个换行,则需写 2020-1-1/23:33

内容如果有多行,只需在后面继续用竖线分隔

参数

例子

代码

[timeline]
2000-1-1|这是标题|这是内容
2010-1-1|这是标题|我是内容|我是第二行内容
2019-12-31/23:59|左边的时间是换行的|在时间中,用 / 号表示一个换行符
[/timeline]

效果

2000-1-1
这是标题
这是内容
2010-1-1
这是标题
我是内容
我是第二行内容
2019-12-31
23:59
左边的时间是换行的
在时间中,用 / 号表示一个换行符

隐藏文本

介绍

该短代码可以插入一段隐藏文本

隐藏文本是一段无法直接看到的文本(模糊或者黑条),当鼠标移上后才会可见

用法

[hidden 参数名="参数值"]内容[/hidden]

参数

参数名可选值默认值解释是否必须
typeblur/backgroundblur隐藏的形式 (模糊/黑条)
tip字符串鼠标移上一段时间后显示的话
有些参数不是必需的,如果不写某个参数则会使用默认值

例子

代码

[hidden]一段隐藏的文本[/hidden]
[hidden type="background"]黑条隐藏文本[/hidden]
[hidden type="blur"]模糊隐藏文本[/hidden]
[hidden tip="你知道的太多了"]鼠标停留会有提示[/hidden]

效果

一段隐藏的文本
黑条隐藏文本
模糊隐藏文本
鼠标停留会有提示

Github 信息卡

介绍

该短代码可以插入一个 Github Repo 信息卡,可以跳转到相应的 Github Repo 地址,显示介绍、Star数、Fork 数预览

用法

[github 参数名="参数值"][/github]

参数

参数名可选值默认值解释是否必须
author字符串欲展示的 Repo 的作者用户名
project字符串欲展示的 Repo 名
sizefull/minifull尺寸
getdatafrontend/backendfrontend前端/后端获取 Github Repo 信息

例子

代码

 [github author="solstice23" project="argon-theme"][/github]

效果

视频

介绍

该短代码可以插入一个视频

用法

[video 参数名="参数值"][/video]
内容是必需的

参数

参数名可选值默认值解释是否必须
url字符串视频地址
width整数auto视频宽度
height整数auto视频高度
autoplaytrue/falsefalse是否自动播放
一些参数不是必需的,如果不写某个参数则会使用默认值

例子

代码

[video url="https://xxxxx.com/xxxxx.mp4"][/video]
[video url="https://xxxxx.com/xxxxx.mp4" height="240" width="320"][/video]
[video url="https://xxxxx.com/xxxxx.mp4" autoplay="true"][/video]

发布时间/编辑时间

介绍

这两个短代码分别可以插入文章的发布时间和最后编辑时间

用法

[post_time 参数名="参数值"][/post_time]
[post_modified_time 参数名="参数值"][/post_modified_time]

参数

参数名可选值默认值解释是否必须
format字符串Y-n-d G:i:s时间格式
一些参数不是必需的,如果不写某个参数则会使用默认值

例子

代码

[post_time][/post_time]
[post_modified_time][/post_modified_time]
[post_time format="Y/n/j ag:i:s"][/post_time]

效果

2020-10-03 12:56:58
2020-10-03 17:41:31
2020/10/3 下午12:56:58

让短代码不被解析

如果你不想让某段内容中的短代码被解析,想原样输出这段内容,只需要将这段内容用

[noshortcode][/noshortcode]

包裹即可

用法

[noshortcode]内容[/noshortcode]

例子

代码

[noshortcode]
这段内容中的短代码将不会被解析
[alert]我不会被解析[/alert]
[/noshortcode]

效果

这段内容中的段代码将不会被解析

[alert]我不会被解析[/alert]

评论

  1. CHINQ 博主
    Windows Edge 85.0.564.63
    3周前
    2020-10-03 13:15:28

发送评论 编辑评论

|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
这个CHINQ她就是逊辣~
nmsl
WDNMD
可可爱爱,没有脑袋
哇O7I2我爱你~
啊西巴!
23333~
66666~
(ಥ_ಥ)是在下输了
(๑•ัω•็๑)迷の感动
我从未见过如此厚颜无耻之人(´இ皿இ`)
这么可爱一定是蓝孩纸!╰ひ╯
好无聊,我看了300遍就关了(。•ˇ‸ˇ•。)
bilibili- ( ゜- ゜)つロ 乾杯~
高产似母猪(ˉ(∞)ˉ)
闲的蛋痛的CHINQ用一小时肝出了这个鬼东西
Source: gitee.com/PassionPenguin/ARU
Source: t.me/addstickers/CoronaEmoji
Source: t.me/addstickers/frightened
颜文字
Emoji
小恐龙
花!
弹幕!
aru
Corona Emoji
吓得我都...
上一篇
下一篇