[转载]WordPress Argon Theme Docs – Argon主题文档
由于国内网络问题,源站经常无法访问,故本站转载此文章。
手动搬运整理排版,再次转载请标注本站该页面链接谢谢!
转载自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

主题效果预览

本站就是该主题喔!!

solstice23.top

argon-demo.solstice23.top

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 信息卡等。

而要做到这些,你只需要在文中插入例如 

foobar
 的短代码。Wordpress 和 Argon 主题会自动解析这些短代码并呈现在文章中。

介绍

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

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

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

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

例如,

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

另一个例子,

foobar
,这个短代码给有一个参数 icon,参数值为 flag,意思是在这个短代码生成的提示中会显示一个旗帜图标。

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

开始

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

TODO 复选框

Argon 提供了一些短代码的支持。

在文章中插入短代码即可让其被解析。

该短代码适配了 Gutenberg 编辑器区块,更推荐使用 Gutenberg 编辑器可视化插入。

介绍

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

用法

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

参数

参数名可选值默认值解释是否必须
checkedtrue/falsefalse是否勾选复选框
inlinetrue/falsefalse是否行内显示

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

例子

代码

[checkbox]默认复选框[/checkbox]

效果

标签

Argon 提供了一些短代码的支持。

在文章中插入短代码即可让其被解析。

介绍

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

用法

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

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

参数

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

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

例子

代码

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

橙色标签 圆形

靛蓝标签 绿色标签 红色标签

蓝色标签 橙色标签

效果

进度条

Argon 提供了一些短代码的支持。

在文章中插入短代码即可让其被解析。

该短代码适配了 Gutenberg 编辑器区块,更推荐使用 Gutenberg 编辑器可视化插入。

介绍

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

用法

[progressbar 参数名="参数值"]进度条标签内容[/progressbar]

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

参数

参数名可选值默认值解释是否必须
progress0 ~ 100的数字100进度百分比
colorindigo/green/red/blue/orangeindigo进度条颜色

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

例子

代码

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

效果

提示

Argon 提供了一些短代码的支持。

在文章中插入短代码即可让其被解析。

该短代码适配了 Gutenberg 编辑器区块,更推荐使用 Gutenberg 编辑器可视化插入。

介绍

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

用法

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

内容不是必写的,如果不写则只显示标题(如果有标题)

参数

参数名可选值默认值解释是否必须
title字符串提示的标题
colorindigo/green/red/blue/orangeindigo进度条颜色
iconFont Awesome 中的图标名称 (不带 fa-)标题前的图标

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

例子

代码

[alert]默认提示[/alert]
靛蓝提示
绿色提示
红色提示
蓝色提示
橙色提示
黑色提示
我是标题 带标题的提示

带图标的提示
我是标题 带标题和图标的提示

效果

警告

Argon 提供了一些短代码的支持。

在文章中插入短代码即可让其被解析。

该短代码适配了 Gutenberg 编辑器区块,更推荐使用 Gutenberg 编辑器可视化插入。

介绍

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

用法

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

内容不是必写的,如果不写则只显示标题(如果有标题)

参数

参数名可选值默认值解释是否必须
title字符串警告的标题
colorindigo/green/red/blue/orangegrey警告的颜色
iconFont Awesome 中的图标名称 (不带 fa-)标题前的图标 (如果有标题)

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

例子

代码

[admonition]默认警告[/admonition]
我是标题
靛蓝警告
我是标题
绿色警告
我是标题
红色警告
我是标题
蓝色警告
我是标题
橙色警告
我是标题
黑色警告
我是标题
灰色警告
我是标题
带标题和图标的警告
不带标题的警告

只有标题的警告
只有标题和图标的警告

效果

折叠区块

Argon 提供了一些短代码的支持。

在文章中插入短代码即可让其被解析。

该短代码适配了 Gutenberg 编辑器区块,更推荐使用 Gutenberg 编辑器可视化插入。

介绍

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

用法

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

内容是必需的

参数

参数名可选值默认值解释是否必须
title字符串折叠区块标题
colorindigo/green/red/blue/orangeindigo提示的颜色
iconFont Awesome 中的图标名称 (不带 fa-)标题前的图标
collapsedtrue/falsetrue默认是否折叠

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

例子

代码

[collapse title="默认折叠区块"]折叠的内容[/collapse]

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

效果

友情链接列表

Argon 提供了一些短代码的支持。

在文章中插入短代码即可让其被解析。

介绍

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

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

用法

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

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

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

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

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

友链备注的每行为如下格式: fa-xxx|https://example.comfa-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/]

效果

友情链接列表 (旧)

Argon 提供了一些短代码的支持。

在文章中插入短代码即可让其被解析。

介绍

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

不推荐使用此短代码。

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

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

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

用法

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

每行中用竖线分隔。

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

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

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

描述和头像可省略

参数

参数名可选值默认值解释是否必须
shuffletrue/falsefalse随机顺序输出友链

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

例子

代码

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

参数

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

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

例子

代码

[hidden]一段隐藏的文本[/hidden]
黑条隐藏文本

模糊隐藏文本 鼠标停留会有提示

效果

Github 信息卡

Argon 提供了一些短代码的支持。

在文章中插入短代码即可让其被解析。

该短代码适配了 Gutenberg 编辑器区块,更推荐使用 Gutenberg 编辑器可视化插入。

介绍

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

用法

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

参数

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

例子

代码

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

效果

视频

Argon 提供了一些短代码的支持。

在文章中插入短代码即可让其被解析。

介绍

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

用法

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

发布时间/编辑时间

Argon 提供了一些短代码的支持。

在文章中插入短代码即可让其被解析。

介绍

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

用法

[post_time 参数名="参数值"][/post_time]
[post_modified_time 参数名="参数值"][/post_modified_time]
参数名可选值默认值解释是否必须
format字符串Y-n-d G:i:s时间格式

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

例子

代码

[post_time][/post_time]
2025-11-18 11:28:16 2025/11/18 上午10:16:19

效果

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]
这段内容中的短代码将不会被解析
[alert]我不会被解析[/alert]
[/noshortcode]

效果

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

我不会被解析

页面模板

友情链接

想添加一个友情链接页面,请参见以下的步骤


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: 欢迎通过以下方式向我反馈

贡献指南

欢迎以 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 协议开源,请遵守此协议进行二次开发等。

感谢

所有 Github Contributors

所有 BUG 、意见和建议的反馈者和提出者

所有 Argon 使用到的开源项目

所有 Argon 主题的使用者

@yzxoi (文档移植/完善), @AMSing (图标及 Banner 构思)

开源相关

Argon 使用了以下的开源项目

Argon Design System

Jquery

Jquery-Lazyload

jquery-pjax

jquery-pjax-plus

highlight.js

highlightjs-line-numbers.js

SmoothScroll

SVG-Loaders

Zoomify

Share.js

iziToast

jquery_headindex

nprogress

plugin-update-checker

PhpUserAgent

pickr

Clamp.js

pangu.js

链接

暂无评论

发送评论 编辑评论


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