Argon主题短代码展示

欢迎使用 Argon

Argon - 轻盈、简洁、美观的 WordPress 主题

特性

• 轻盈美观 - 使用 Argon Design System 前端框架，细节精致，轻盈美观
• 高度可定制化 - 可自定义主题色、布局(双栏/单栏/三栏)、顶栏、侧栏、Banner、背景图、日夜间模式不同背景、背景沉浸、浮动操作按钮等，提供了丰富的自定义选项
• 夜间模式 - 支持日间、夜间、纯黑三种模式，并可以根据时间自动切换或跟随系统夜间模式
• 功能繁多 - Tag 和分类统计、作者链接、额外链接、文章字数和预计阅读时间、文章过时信息显示
• Pjax - 支持 Pjax 无刷新加载，提高浏览体验
• 友情链接 - 支持使用 WordPress 自带的链接管理器进行友链管理，支持多种友链样式
• "说说" 功能 - 随时发表想法，并在专门的 "说说" 页面展示，也支持说说和首页文章穿插
• 评论功能扩展 - Ajax 评论，评论支持 Markdown、验证码、再次编辑、显示 UA、悄悄话模式、回复时邮件通知、查看编辑记录、无限加载等功能
• 诸多功能 - 文章目录、阅读进度、Mathjax 或 Katex 公式解析、图片放大预览、Pangu.js 文本格式化、平滑滚动等
• 丰富的短代码 - 支持通过短代码在文章中插入 TODO、标签、警告、提示、折叠区块、Github 信息卡、时间线、隐藏文本、视频等模块
• 多语言 - 支持中文、英文、俄文等语言
• 其他 - 自适应、精心优化的文章阅读界面 CSS、可切换衬线/非衬线字体、可自定义 CSS 和 JS、支持使用 CDN 加速静态文件访问、SEO 友好、Banner 打字动画、留言板页面等

本文依据Argon主题官方文档的内容修改整理而成，可以直观的展示一些主题自带段代码的实际显示效果，方便

标签

用法

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

效果

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

提示

用法

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

参数

参数名	可选值	默认值	解释	是否必须
title	字符串	无	提示的标题	否
color	indigo/green/red/blue/orange/black	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]

效果

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

[alert color="black"]内容不是必需的，如果不写则只显示标题[/alert]

参数

参数名	可选值	默认值	解释	是否必须
title	字符串	无	警告的标题	否
color	indigo/green/red/blue/orange/black/grey	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]

效果

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

视频

用法

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

参数

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

代码

[video url="https://xxxxx.com/xxxxx.mp4"][/video] 

效果

进度条

用法

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

效果

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

时间线

用法

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

效果

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

折叠区块

用法

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

[admonition title="内容是必需的" color="indigo"][/admonition]

参数

参数名	可选值	默认值	解释	是否必须
title	字符串	无	折叠区块标题	是
color	indigo/green/red/blue/orange/black	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]

效果

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

Github 信息卡

介绍

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

用法

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

参数

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

代码

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

效果

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

TODO 复选框

用法

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

参数

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

代码

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

效果

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

[checkbox checked="false"]还未完成的项目[/checkbox]

参考链接：

首页 - Argon Theme Docs (solstice23.top)

登山亦有道 记录日常，每天进步一点点。 (chenyan98.cn)