Argon Theme Docs
本文最后更新于 19 天前,其中的信息可能已经有所发展或是发生改变。如有问题,请联系pu_pua@163.com

前言

因为自己在访问文档的时候偶尔出现访问不到的情况,所以决定将文档的主要内容转载过来。原文档链接-Argon Theme Docs (solstice23.top)

基础

图标

Argon 主题内置了 Font Awesome 4 图标库。

添加图标

使用 <i class="fa fa-xxxx"></i> 添加图标。其中 xxxx 为图标名。

请访问 Font Awesome 4 图标库自行查询对应的图标名。

在菜单中添加图标

在菜单文本前添加 <i class="fa fa-xxxx"></i> 即可添加图标。

文本和图标之间建议添加一个空格来保证美观。

示例

以下代码能实现下图中的效果

<i class="fa fa-home"></i> 首页
<i class="fa fa-link"></i> 友链
<i class="fa fa-rss"></i> RSS

侧栏

Argon 支持单栏、双栏、双栏(反转)、三栏显示,请在 “Argon 主题选项-布局-页面布局” 中选择。

使用单栏时,关于左侧栏的设置将失效。

使用三栏时,请前往 “外观-小工具” 设置页面配置右侧栏内容。

侧栏分为以下五个板块

站点概述

该板块无论如何都会出现。

请在 “Argon 主题选项” 中设置该板块的内容,如作者头像、展示名称等。

站点公告(可选)

该板块会显示在左侧栏的最顶部。

只有在 “Argon 主题选项-博客公告” 中设置公告内容才会显示。

文章目录

该板块在访问文章,且该文章中可以生成目录时会出现。

您可以在 “Argon 主题选项-左侧栏文章目录” 中设置是否在目录中显示序号。

左侧栏 “功能” Tab

在 “Wordpress 后台 – 外观 – 小工具” 里配置该板块的内容。

该板块仅会在设置内容后显示。

右侧栏

在 “Wordpress 后台 – 外观 – 小工具” 里配置该板块的内容。

该板块仅会在设置三栏后显示。

评论表情

想要自定义评论表情,请参见以下步骤。

Filter

使用 argon_emotion_list filter 来应用自定义的评论表情列表。

add_filter('argon_emotion_list' , 'callback_function');

回调函数将被传入一个参数,即表情列表数组。回调函数应该修改这个数组为想要的新表情列表,并返回修改后的数组。

结构

┌-EmotionArray
├-┬-Group
│ ├--groupname
│ ├--description
│ └-┬list
│   ├-┬Emotion
│   │ ├-type: text
│   │ ├-text
│   │ └-title
│   ├-┬Emotion
│   │ ├-type: sticker
│   │ ├-src
│   │ ├-code
│   │ └-title
│   ├-Emotion
│   └-Emotion
├---Group
└---Group

表情数组

表情数组(EmotionArray)的每一项也是一个数组,表示一个表情组(Group)。

表情组

表情组是一个关联数组,每一项的含义如下。

|数组项|类型|含义|是否必须|
|—|—|—|—|
|groupname|字符串|该表情组的名称|必须|
|description|字符串|该表情组的介绍,如存在会显示在该表情组的表情列表的下方|可选|
|list|数组|包含该表情组所有的表情(Emotion)|必须|

表情

表情是一个关联数组,其中的 type 项表示该表情的类型,有两种(字符表情和图片表情),每种表情的格式不同。每一项的含义如下。

1.字符表情 (text)

|数组项|类型|含义|是否必须|
|—|—|—|—|
|type|字符串|值为 text,表示该表情是一个字符表情|是|
|text|字符串|该字符表情的字符串,例如一个颜文字|是|
|title|字符串|该表情的名称,鼠标放在该表情上一段时间后会显示|否|

2.图片表情 (sticker)

| 数组项 | 类型 | 含义 | 是否必须 |
| —– | — | ————————————————– | —- |
| type | 字符串 | 值为 sticker,表示该表情是一个图片表情 | 是 |
| src | 字符串 | 该表情图片的地址 | 是 |
| code | 字符串 | 该表情的代码,例如这里的值为 xxx,则评论里所有的 :xxx: 会被替换为该表情。不带冒号 | 是 |
| title | 字符串 | 该表情的名称,鼠标放在该表情上一段时间后会显示 | 否 |

例子

一个表情数组的例子:

array(
        array(
            'groupname' => '颜文字', 
            'list' => array(
                array('type' => 'text', 'text' => "|´・ω・)ノ"),
                array('type' => 'text', 'text' => "ヾ(≧∇≦*)ゝ"),
                array('type' => 'text', 'text' => "(☆ω☆)")
            )
        ),
        array(
            'groupname' => 'Emoji', 
            'list' => array(
                array('type' => 'text', 'text' => "😂"),
                array('type' => 'text', 'text' => "😀"),
                array('type' => 'text', 'text' => "😅")
            )
        ),
        array(
            'groupname' => '小恐龙', 
            'list' => array(
                array('type' => 'sticker', 'code' => 'dinosaur-shy', 'src' => $GLOBALS['assets_path'] . '/stickers/dinosaur/1.jpg'),
                array('type' => 'sticker', 'code' => 'dinosaur-daze', 'src' => $GLOBALS['assets_path'] . '/stickers/dinosaur/2.jpg'),
                array('type' => 'sticker', 'code' => 'dinosaur-sweat', 'src' => $GLOBALS['assets_path'] . '/stickers/dinosaur/3.jpg'),
            )
        ),
        array(
            'groupname' => '花!', 
            'list' => array(
                array('type' => 'sticker', 'code' => 'flower-flower', 'src' => $GLOBALS['assets_path'] . '/stickers/flower/1.jpg'),
                array('type' => 'sticker', 'code' => 'flower-grass', 'src' => $GLOBALS['assets_path'] . '/stickers/flower/2.jpg'),
                array('type' => 'sticker', 'code' => 'flower-leaf', 'src' => $GLOBALS['assets_path'] . '/stickers/flower/3.jpg'),
            ),
            'description' => 'Source: github.com/k4yt3x/flowerhd'
        )
    );

一个插件的例子,该插件会往表情列表追加一套新的表情:

<?php
/*
Plugin Name: Test
Description: This plugin will add a new emotion group
Version: 1.0
*/
    function add_more_emotions($emotionList){
        array_push(
            $emotionList,
            array(
                'groupname' => '要增加的表情包名', 
                'list' => array(
                    array('type' => 'sticker', 'code' => 'test-1', 'src' => $GLOBALS['assets_path'] . '/stickers/test/1.jpg'),
                    array('type' => 'sticker', 'code' => 'test-2', 'src' => $GLOBALS['assets_path'] . '/stickers/test/2.jpg'),
                    array('type' => 'sticker', 'code' => 'test-3', 'src' => $GLOBALS['assets_path'] . '/stickers/test/3.jpg')
                )
            )
        );
        return $emotionList;
    }
    add_filter('argon_emotion_list' , 'add_more_emotions');
?>

Gutenberg 编辑器

Argon 支持通过 Gutenberg 区块编辑器可视化插入一些区块。例如折叠区块、时间线、Tab 面板、提示、警告等。

对于部分短代码,更推荐使用区块编辑器插入。

插入区块

在区块编辑器中 “插入” 菜单找到 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,意思是在这个短代码生成的提示中会显示一个旗帜图标。

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

开始

本章节将介绍 Argon 主题提供的各个短代码的用法及效果。

TODO 复选框

介绍

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

用法

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

参数

|参数名|可选值|默认值|解释|是否必须|
|—|—|—|—|—|
|checked|true/false|false|是否勾选复选框|否|
|inline|true/false|false|是否行内显示|否|

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

例子

代码

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

效果



标签

介绍

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

用法

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

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

参数

|参数名|可选值|默认值|解释|是否必须|
|—|—|—|—|—|
|color|indigo/green/red/blue/orange|indigo|标签颜色|否|
|shape|square/round|square|标签形状(方形/圆形)|否|

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

例子

代码

方形
[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]

进度条标签内容可以不填写,不填写会隐藏进度条标签

参数

|参数名|可选值|默认值|解释|是否必须|
|—|—|—|—|—|
|progress|0 ~ 100的数字|100|进度百分比|否|
|color|indigo/green/red/blue/orange|indigo|进度条颜色|否|

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

例子

代码

[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|字符串|无|提示的标题|否|
|color|indigo/green/red/blue/orange|indigo|进度条颜色|否|
|icon|Font 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|字符串|无|警告的标题|否|
|color|indigo/green/red/blue/orange|grey|警告的颜色|否|
|icon|Font 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|字符串|无|折叠区块标题|是|
|color|indigo/green/red/blue/orange|indigo|提示的颜色|否|
|icon|Font Awesome 中的图标名称 (不带 fa-)|无|标题前的图标|否|
|collapsed|true/false|true|默认是否折叠|否|

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

例子

代码

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

效果












默认展开的折叠区块
折叠的内容

友情链接列表

介绍

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

自 Argon V0.902 版本开始,友情链接使用 WordPress 自带的链接管理器来管理。旧的友情链接列表更名为 sfriendlinks

用法

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

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

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

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

|名称|解释|是否必须|
|—|—|—|
|名称|友链的标题|是|
|Web 地址|友链的地址|是|
|图像描述|友链的描述|否|
|图像地址|友链图像的地址|否|
|备注|友链的联系方式,一行一个|否|

友链备注的每行为如下格式: fa-xxx|https://example.comfa-xxx 表示 Fontawesome 中的图标名称,https://example.com 表示该联系方式的地址。

参数

|参数名|可选值|默认值|解释|是否必须|
|—|—|—|—|—|
|style|1/1-square/2/2-big|1|友链列表的样式,样式1/样式1-方形头像/样式2/样式2-大头像|否|
|sort|link_id: 按 ID 排序
url: 按链接排序
name: 按名称排序
owner: 按添加友链的用户排序
rating: 按评分排序
visible: 按可见度排序
length: 按长度排序
rand: 随机顺序|link_id|友链排序规则|否|
|order|ASC:升序
DESC:降序|ASC|友链排序方式|否|

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

例子

代码

[friendlinks/]

效果

友情链接列表(旧)

介绍

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

不推荐使用此短代码。

自 Argon V0.902 版本开始,友情链接使用 WordPress 自带的链接管理器来管理。请使用新的友情链接列表短代码来插入友情链接模块。

为保留旧特性,此短代码不会被移除,但不推荐使用。

自 Argon V0.902 版本开始,此短代码更名为 sfriendlinks

用法

[sfriendlinks]
category|分组标题
link|地址|名称|描述|头像
[/sfriendlinks]

每行中用竖线分隔。

第一项为 link,则该行为链接;如果为 category,那么该行为分组标题。

对于每种情况,上方代码给出了解释,你也可以参考底部的例子。

可以没有 category 行,此时链接不会分组

描述和头像可省略

参数

|参数名|可选值|默认值|解释|是否必须|
|—|—|—|—|—|
|shuffle|true/false|false|随机顺序输出友链|否|

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

例子

代码

[sfriendlinks]
category|分组1
link|https://google.com|Google|谷歌|https://xxxx.xxx/xxx.png
link|https://github.com|Github
link|http://codeforces.com|Github|CF
category|分组2
link|https://bilibili.com|Bilibili|哔哩哔哩|
link|https://zhihu.com|知乎|分享你刚编的故事|
[/sfriendlinks]

效果

时间线

介绍

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

用法

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

每行中用竖线分隔。

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

时间中的换行符用 / 代替,例如想在 2020-1-1 和 23: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]

参数

|参数名|可选值|默认值|解释|是否必须|
|—|—|—|—|—|
|type|blur/background|blur|隐藏的形式 (模糊/黑条)|否|
|color|字符串|无|鼠标移上一段时间后显示的话|否|

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

例子

代码

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

效果

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

GitHub 信息卡

介绍

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

用法

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

参数

|参数名|可选值|默认值|解释|是否必须|
|—|—|—|—|—|
|author|字符串|空|欲展示的 Repo 的作者用户名|是|
|color|字符串|空|欲展示的 Repo 名|是|
|size|full/mini|full|尺寸|否|
|getdata|frontend/backend|frontend|前端/后端获取 Github Repo 信息|否|

例子

代码

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

效果

视频

介绍

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

用法

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

内容是必需的

参数

|参数名|可选值|默认值|解释|是否必须|
|—|—|—|—|—|
|url|字符串|无|视频地址|是|
|width|整数|auto|视频宽度|否|
|height|整数|auto|视频高度|否|
|autoplay|true/false|false|是否自动播放|否|

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

例子

代码

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

效果

2024-6-06 18:23:25
2024-6-06 19:25:37
2024/6/6 下午6:23:25

页脚引用 (Ref)

介绍

该短代码可以在文章中插入一个引用。Argon 会在文章中存在引用时将所有引用于页脚生成列表,并在引用处生成引用标记并显示概览,点击可以在页脚和引用标记之间相互跳转。

用法

[ref 参数名="参数值"]引用具体内容[/ref]

内容是必需的,将会在 Hover 时与页脚 References 列表显示

参数

|参数名|可选值|默认值|解释|是否必须|
|—|—|—|—|—|
|id|字符串|无|两个相同 id 的 ref 会被合并在一起,Argon 会自动合并相同内容的 ref,但有时(当某些玄学情况发生时)你可能也需要 id 来手动合并|否|

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

例子

代码

[ref]注释内容[/ref]

让短代码不被解析

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

用法

[noshortcode]内容

[/noshortcode]

例子

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

[/noshortcode]

效果

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

我不会被解析

短代码示例

TODO 复选框

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



标签

方形
[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 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]
[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]
[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 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]












默认展开的折叠区块
折叠的内容

时间线

[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]
[hidden type="background"]黑条隐藏文本[/hidden]
[hidden type="blur"]模糊隐藏文本[/hidden]
[hidden tip="你知道的太多了"]鼠标停留会有提示[/hidden]

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

让短代码不被解析

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

[/noshortcode]


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

后记

转载就是为了方便自己查看。最后,原文档链接:Argon Theme Docs (solstice23.top)

转载请注明:
作者:非童
文章地址:https://pupua.top/docs/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0协议。
暂无评论

发送评论 编辑评论

您的评论将经过审核

博主有权在不通知的情况下,对含有广告信息的评论进行修改或删除

我们承诺保护您的隐私,不会在未经同意的情况下使用或分享您的个人信息。

发表评论即表示您接受以上规则。


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇