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

而要做到这些,你只需要在文中插入例如 [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]

参数

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

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

例子

代码

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

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

效果

标签

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

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

介绍

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

用法

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

效果

进度条

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

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

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

介绍

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

用法

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

效果

提示

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

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

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

介绍

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

用法

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

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

参数

参数名可选值默认值解释是否必须
title字符串提示的标题
colorindigo/green/red/blue/orangeindigo进度条颜色
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]

效果

警告

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

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

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

介绍

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

用法

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

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

参数

参数名可选值默认值解释是否必须
title字符串警告的标题
colorindigo/green/red/blue/orangegrey警告的颜色
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]

效果

折叠区块

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

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

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

介绍

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

用法

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

内容是必需的

参数

参数名可选值默认值解释是否必须
title字符串折叠区块标题
colorindigo/green/red/blue/orangeindigo提示的颜色
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]

效果

友情链接列表

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

贡献指南

欢迎以 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

链接

评论