手动搬运整理排版,再次转载请标注本站该页面链接谢谢!
转载自https://argon-docs.solstice23.top/
引入
欢迎使用 Argon
Argon - 一个轻盈、简介、美观的 Wordpress & Hexo 主题
在使用 Argon 主题前,请务必阅读 Argon 主题文档
特性
- 轻盈美观 - 使用 Argon Design System 前端框架,细节精致,轻盈美观
- 高度可定制化 - 可自定义主题色、布局(双栏/单栏/三栏)、顶栏、侧栏、Banner、背景图、日夜间模式不同背景、背景沉浸、浮动操作按钮等,提供了丰富的自定义选项
- 夜间模式 - 支持日间、夜间、纯黑三种模式,并可以根据时间自动切换或跟随系统夜间模式
- 功能繁多 - Tag 和分类统计、作者链接、额外链接、文章字数和预计阅读时间、文章过时信息显示
- Pjax - 支持 Pjax 无刷新加载,提高浏览体验
- 友情链接 - 支持使用 Wordpress 自带的链接管理器进行友链管理,支持多种友链样式
- "说说" 功能 - 随时发表想法,并在专门的 "说说" 页面展示,也支持说说和首页文章穿插
- 评论功能扩展 - Ajax 评论,评论支持 Markdown、验证码、再次编辑、显示 UA、悄悄话模式、回复时邮件通知、查看编辑记录、无限加载等功能
- 诸多功能 - 文章目录、阅读进度、Mathjax 或 Katex 公式解析、图片放大预览、Pangu.js 文本格式化、平滑滚动等
- 丰富的短代码 - 支持通过短代码在文章中插入 TODO、标签、警告、提示、折叠区块、Github 信息卡、时间线、隐藏文本、视频等模块
- 多语言 - 支持中文、英文、俄文等语言
- 其他 - 自适应、精心优化的文章阅读界面 CSS、可切换衬线/非衬线字体、可自定义 CSS 和 JS、支持使用 CDN 加速静态文件访问、SEO 友好、Banner 打字动画、留言板页面等轻盈美观 - 使用 Argon Design System 前端框架,细节精致,轻盈美观
Demo
主题效果预览
本站就是该主题喔!!
argon-demo 站点可在线自定义 Argon 的各种设置,预览 Argon 的所有特性。
关于
本主题项目地址:argon-theme
本文档项目地址:argon-theme-docs
欢迎提 PR & Issues!
渲染
以下渲染图均为 Argon 早期版本,仅供参考。




快速开始
Argon Theme 仅支持 Wordpress 5.0 及以上的版本。
安装主题
在 Github Release 页面下载 argon.zip 文件,在 WordPress 后台 "主题" 页面上传、安装并启用。
更新
自动更新
自动更新仅在 Argon v0.55 及以上版本有效,低于此版本的无法自动更新或者会出现错误,请手动更新
Argon 主题接入了 Wordpress 更新机制,直接在 Wordpress 更新页面更新即可。
如果您的服务器所在区域访问 Github 速度较慢,可以在 "Argon 主题选项-杂项-检测更新源" 选项更改成其他更新源。
手动更新
在 Github Release 页面下载 argon.zip 文件,解压后覆盖 /wp-content/themes/argon。
菜单
安装后由于没有设置菜单,顶栏和侧栏显示会不正常,您需要首先配置菜单。
如果您不想显示某个菜单 (例如"作者链接"),不指定这个菜单即可,该菜单将不会显示。
菜单在 WordPress 后台 "外观 - 菜单" 页面 中配置。在这个页面可以新建菜单并指定它的显示位置。
菜单自定义


下面是每个位置菜单的单独说明。
顶部导航
顶部导航位于页面的顶栏,横向显示。
顶部导航支持二级菜单,鼠标移上后会显示。

左侧栏菜单
左侧栏菜单位于左侧栏上半部分,纵向显示。
建议在该菜单中添加图标。参见 图标 章节

左侧栏作者链接
左侧栏作者链接位于左侧栏下半部分 "站点概览" Tab 中,纵向多行显示,每行 2 个链接。
建议在该菜单中添加图标。参见 图标 章节

左侧栏友情链接
左侧栏作者链接位于左侧栏下半部分 "站点概览" Tab 中,纵向居中显示。

图标
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 复选框
Argon 提供了一些短代码的支持。
在文章中插入短代码即可让其被解析。
该短代码适配了 Gutenberg 编辑器区块,更推荐使用 Gutenberg 编辑器可视化插入。
介绍
该短代码可以插入一个复选框(不可互动)。
用法
[checkbox 参数名="参数值"]内容[/checkbox]
参数
| 参数名 | 可选值 | 默认值 | 解释 | 是否必须 |
|---|---|---|---|---|
| checked | true/false | false | 是否勾选复选框 | 否 |
| inline | true/false | false | 是否行内显示 | 否 |
有些参数不是必需的,如果不写某个参数则会使用默认值
例子
代码
[checkbox]默认复选框[/checkbox]
[checkbox checked="true"]已经完成的项目[/checkbox]
[checkbox checked="false"]还未完成的项目[/checkbox]
效果

标签
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]
效果

进度条
Argon 提供了一些短代码的支持。
在文章中插入短代码即可让其被解析。
该短代码适配了 Gutenberg 编辑器区块,更推荐使用 Gutenberg 编辑器可视化插入。
介绍
该短代码可以插入一个进度条。
用法
[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]
效果

提示
Argon 提供了一些短代码的支持。
在文章中插入短代码即可让其被解析。
该短代码适配了 Gutenberg 编辑器区块,更推荐使用 Gutenberg 编辑器可视化插入。
介绍
该短代码可以插入一个提示条。
用法
[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]
效果

警告
Argon 提供了一些短代码的支持。
在文章中插入短代码即可让其被解析。
该短代码适配了 Gutenberg 编辑器区块,更推荐使用 Gutenberg 编辑器可视化插入。
介绍
该短代码可以插入一个警告。
用法
[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]
效果

折叠区块
Argon 提供了一些短代码的支持。
在文章中插入短代码即可让其被解析。
该短代码适配了 Gutenberg 编辑器区块,更推荐使用 Gutenberg 编辑器可视化插入。
介绍
该短代码可以插入一个折叠区块,点击该折叠区块可以展开或收缩。
用法
[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 提供了一些短代码的支持。
在文章中插入短代码即可让其被解析。
介绍
该短代码可以插入一个友情链接模块。
自 Argon V0.902 版本开始,友情链接使用 Wordpress 自带的链接管理器来管理。旧的友情链接列表更名为 sfriendlinks
用法
友情链接从 Wordpress 自带的链接管理器中读取。请在 "Wordpress 后台 - 链接" 菜单中管理链接。
[friendlinks 参数名="参数值"/]
Argon 将从 Wordpress 的链接管理器中读取友链。
下面是链接管理器中几个参数的解释:
| 名称 | 解释 | 是否必须 |
|---|---|---|
| 名称 | 友链的标题 | 是 |
| Web 地址 | 友链的地址 | 是 |
| 图像描述 | 友链的描述 | 否 |
| 图像地址 | 友链图像的地址 | 否 |
| 备注 | 友链的联系方式,一行一个 | 否 |
友链备注的每行为如下格式:
fa-xxx|https://example.com。fa-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 提供了一些短代码的支持。
在文章中插入短代码即可让其被解析。
介绍
该短代码可以插入一个友情链接模块。
不推荐使用此短代码。
自 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]
效果

时间线
Argon 提供了一些短代码的支持。
在文章中插入短代码即可让其被解析。
该短代码适配了 Gutenberg 编辑器区块,更推荐使用 Gutenberg 编辑器可视化插入。
介绍
该短代码可以插入一个时间线模块。
用法
[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]
效果

隐藏文本
Argon 提供了一些短代码的支持。
在文章中插入短代码即可让其被解析。
介绍
该短代码可以插入一段隐藏文本。
隐藏文本是一段无法直接看到的文本(模糊或者黑条),当鼠标移上后才会可见。
用法
[hidden 参数名="参数值"]内容[/hidden]
参数
| 参数名 | 可选值 | 默认值 | 解释 | 是否必须 |
|---|---|---|---|---|
| type | blur/background | blur | 隐藏的形式 (模糊/黑条) | 否 |
| color | 字符串 | 无 | 鼠标移上一段时间后显示的话 | 否 |
参数不是必需的,如果不写某个参数则会使用默认值
例子
代码
[hidden]一段隐藏的文本[/hidden]
[hidden type="background"]黑条隐藏文本[/hidden]
[hidden type="blur"]模糊隐藏文本[/hidden] [hidden tip="你知道的太多了"]鼠标停留会有提示[/hidden]
效果

Github 信息卡
Argon 提供了一些短代码的支持。
在文章中插入短代码即可让其被解析。
该短代码适配了 Gutenberg 编辑器区块,更推荐使用 Gutenberg 编辑器可视化插入。
介绍
该短代码可以插入一个 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]
效果

视频
Argon 提供了一些短代码的支持。
在文章中插入短代码即可让其被解析。
介绍
该短代码可以插入一个视频。
用法
[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]
发布时间/编辑时间
Argon 提供了一些短代码的支持。
在文章中插入短代码即可让其被解析。
介绍
这两个短代码分别可以插入文章的发布时间和最后编辑时间。
用法
[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-1-01 08:00:00
2020-1-02 08:00:00
2020/1/1 上午8:00:00
页脚引用 (Ref)
Argon 提供了一些短代码的支持。
在文章中插入短代码即可让其被解析。
介绍
该短代码可以在文章中插入一个引用。Argon 会在文章中存在引用时将所有引用于页脚生成列表,并在引用处生成引用标记并显示概览,点击可以在页脚和引用标记之间相互跳转。
用法
[ref 参数名="参数值"]引用具体内容[/ref]
内容是必需的,将会在 Hover 时与页脚 References 列表显示
参数
| 参数名 | 可选值 | 默认值 | 解释 | 是否必须 |
|---|---|---|---|---|
| id | 字符串 | 无 | 两个相同 id 的 ref 会被合并在一起,Argon 会自动合并相同内容的 ref,但有时(当某些玄学情况发生时)你可能也需要 id 来手动合并 | 否 |
参数不是必需的,如果不写某个参数则会使用默认值
例子
代码
[ref]注释内容[/ref]
让短代码不被解析
如果你不想让某段内容中的短代码被解析,想原样输出这段内容,只需要将这段内容用 [noshortcode][/noshortcode] 包裹即可。
用法
[noshortcode]内容[/noshortcode]
例子
代码
[noshortcode]
这段内容中的短代码将不会被解析
[alert]我不会被解析[/alert]
[/noshortcode]
效果
这段内容中的短代码将不会被解析
[alert]我不会被解析[/alert]
页面模板
友情链接
想添加一个友情链接页面,请参见以下的步骤
1. 添加链接
安装 Argon 主题后,Wordpress 后台管理左侧栏会多出一个 "链接" 菜单,进入该菜单即可添加友情链接。
2. 创建友情链接页面
新建一个页面,设定好页面地址和样式后,只需向页面中添加 friendlinks 短代码,即可将这个页面变成友链页面。
关于该短代码的详细介绍,参见 短代码-友情链接列表 章节:
说说
Argon 主题提供了说说功能。
安装 Argon 主题后,Wordpress 管理后台左侧栏增加了一个栏目"说说",即为"说说"的管理入口。
使用
开始
新建一个页面,将其页面模板设为 "说说" 即可。
发表、编辑和删除说说
在 Wordpress 管理后台左侧栏"说说"栏目来发表、编辑和删除说说。
可能的问题
Q: 进入说说详情,提示 404 或自动跳转到其他页面
A: 可能是 Wordpress 伪静态缓存未及时更新。请到 "Wordpress 管理后台-设置-固定链接" 页面中直接点击 "保存更改" 来刷新缓存。
留言板
使用
新建一个页面,将其页面模板设为 "留言板",并开启这个页面的评论功能,即可让这个页面成为留言板。
归档时间轴
使用
新建一个页面,将其页面模板设为 "归档时间轴",即可让这个页面成为归档时间轴。
高级
Filters
Filter 是 Wordpress 提供的特性,允许使用插件/子主题来对主题中一些值进行过滤。
欲添加一个 Filter,可以使用 add_filter 函数,该函数接受两个参数,第一个为 filter 的名称,第二个为过滤函数。Wordpress 将待过滤的内容传参传入过滤函数,过滤函数返回过滤后的结果。详见 Wordpress 文档。
Argon 主题提供以下 Filters。
| 名称 | 含义 |
|---|---|
| argon_post_thumbnail | 文章头图 URL |
| argon_comment_ua_icon | 评论区 UA 图标 HTML |
| argon_comment_mail_notification_content | 评论被回复时通知邮件的 HTML 内容 |
| argon_emotion_list | 评论表情数组,详见 评论表情 章节 |
| argon_darkmode_time_check | 夜间模式切换为 "根据时间切换" 时的 Javascript 判断表达式 |
| argon_comment_title | 评论卡片标题 (默认为 "发送评论") |
| argon_comment_title_editing | 评论卡片编辑时的标题 (默认为 "编辑评论") |
| argon_comment_textarea_placeholder | 评论输入框 Placeholder 的内容 (默认为 "评论内容") |
| argon_comment_extra_info | 插入评论额外信息,位于评论者昵称后 |
| argon_page_background_url | 博客背景图 |
| argon_page_background_dark_url | 博客背景图 (夜间模式下) |
| argon_html_before_wordcount | 用于字数统计计算的 HTML 文章源码 |
欢迎通过 Issue / PR 来增加有必要的 Filter。
例子
要将评论输入框 Placeholder 从默认的 "评论内容" 更换为自定义内容。
在 /wp-content/plugins 目录下新建文件夹(名字任意),注册插件。在文件夹中新建 main.php。
$ mkdir custom-placeholder
$ cd custom-placeholder
$ touch main.php
main.php 内容:
<?php
/*
Plugin Name: Custom Placeholder
Description: Just an example
Version: 1.0
*/
function replace_placeholder(){
return "说点什么...";
}
add_filter('argon_comment_textarea_placeholder' , 'replace_placeholder');
?>
前往 Wordpress 插件管理页面启用这个插件,即可看到评论框 Placeholder 变成了自定义的文本。
其他
页脚信息
您必须在页脚保留 Argon 主题的名称及其链接,否则请不要使用 Argon 主题。
您可以删除页脚的作者信息,但是不能删除 Argon 主题的名称和链接。
FAQ
常见问题解答
Q: 检测不到更新/检测到了但更新失败
A: 在 Argon 设置中切换更新源,国外主机选择 Github,国内的主机一般选择 jsdelivr。
Q: 依旧更新失败或页面顶部出现 Warning?
A: 检查 /wp-content/themes 下的主题目录名称是否为 argon。
Q: 安装了某个插件,初次进入某个页面可以工作,但是从别的页面跳转进入工作不正常
A: 请将该插件的初始化代码写入 Pjax 回调中或关闭 Pjax。Argon 设置页中有 Pjax 回调的说明。
Q: 错误 Parse error: syntax error, unexpected '?' in xxx
A: 请升级 PHP 版本至 7.0 及以上。
Q: 评论失败
A: 请检查 Wordpress 是否安装在子目录,如果是,请在 Argon 设置中设置子目录的路径。
如果仍旧评论失败,请检查是否是相关插件导致。
如果仍旧评论失败,请查看 Chrome Developer Tool 中 Network 菜单的 admin-ajax.php 请求,发 Issue 或在评论区反馈。
Q: 安装了 Editor.md 插件,Console 报错
A: 请打开 Editor.md 插件的兼容模式。
Q: 邮件无法发送/开启了评论邮件提醒却收不到邮件
A: 需要安装邮件相关的插件,例如 WP Mail SMTP。
Q: 说说页面/邮件退订页面 404
A: 可能是 Wordpress 伪静态缓存未及时更新。请到 "Wordpress 管理后台-设置-固定链接" 页面中直接点击 "保存更改" 来刷新缓存。
如果使用的是 Nginx,可能需要添加伪静态:
rewrite /unsubscribe-comment-mailnotice/?(.*)$ /wp-content/themes/argon/unsubscribe-comment-mailnotice.php$1;
Q: 我编辑了主题的文件,但是主题更新后编辑的内容消失了
A: 如果你希望修改主题,不建议直接修改主题文件,更新主题时会被替换。
如果你想增加新的 CSS,可以在 Wordpress 后台 - 外观 - 自定义 - 额外CSS 中添加。
如果你想添加 JS,可以在 Argon 设置 - 页头/页尾脚本 中添加。
如果你想在 function.php 中添加新的方法,或者修改主题的某几个文件,推荐使用子主题方式。
Q: 有部分链接没有 HTTPS,浏览器显示 "与此网站建立的链接并非完全安全"
A: 请检查 "Wordpress 设置 - 常规" 中的 "WordPress地址(URL)" 和 "站点地址(URL)" 两项是否为 HTTPS。
Q: 是否会移植到 XXX 博客框架
A: 没有计划也没有精力移植,不过欢迎 Fork 子项目移植到不同框架
Q: 有 BUG/我想要新功能
A: 欢迎通过以下方式向我反馈
- Github Issue
- 在主题博客的评论区发送评论
- Telegram @solstice233
贡献指南
欢迎以 Pull Request 的形式对 Argon 作出贡献。下面是贡献指南和一些需要注意的地方。
代码风格
变量命名
名字不要太随意即可 (例如 OI 中的命名很大一部分是不被接受的)
PHP 函数名、HTML ID 名: 下划线命名
PHP 变量名、JS 变量名、CSS 类名: 驼峰命名
缩进
使用 Tab 缩进
测试
新功能需要不影响以前的 UI,不会使 UI 出现显示问题(例如在工具栏增加了一个图标,但是工具栏高度变化了),除非本身是针对 UI 的改进。
新功能的 UI 应该与主题统一。
新功能对于不同的情况,应该不出现错误。
本地化指南
PHP
因为 Argon 中字符串的语言是中文,所以对语言做了归一处理,对尚未本地化的语言,默认使用英文翻译。
要增加一种语言,请在 function.php 中的 argon_locate_filter 函数中增加相应语言的处理逻辑。
翻译文件位于 languages 目录中,使用 Poedit (或其他 .po 编辑软件) 进行编辑并编译。
从代码中提取待翻译字符串时需要排除的路径:
assets\
languages\
theme-update-checker\
gutenberg\
argontheme.js
Javascript
翻译字符串位于 /assets/src/js/i18n 目录中,新建相应语言的翻译 .js 文件,再在 /assets/src/js/i18n.js 中引入 translation 数组,构建即可。
Gutenberg 编辑器
翻译字符串位于 gutenberg/src/i18n 目录中,新建相应语言的翻译 .js 文件,再在 i18n.js 中引入 translation 数组,构建即可。
完善文档
格式
使用 Markdown 格式编写文档。新建相应的 .md 文件,并在 _sidebar.md 中添加该文件即可。
第一行使用一个一级标题,写出该页面的名称,文档会自动将其设为页面的大标题。其余标题使用二级及以下。
感谢 / 开源相关
Argon 使用 GPL V3.0 协议开源,请遵守此协议进行二次开发等。
感谢
所有 BUG 、意见和建议的反馈者和提出者
所有 Argon 使用到的开源项目
所有 Argon 主题的使用者
@yzxoi (文档移植/完善), @AMSing (图标及 Banner 构思)
开源相关
Argon 使用了以下的开源项目
