?使用 Argon

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

特性

• 使用 Argon Design System 前端框架，轻盈美观
• 丰富的自定义选项 （顶栏，侧栏，头图等）
• 顶栏、侧栏完全自定义 （自定义链接，图标，博客名，二级菜单等）
• 丰富的可自定义侧栏内容 （作者名称，格言，作者信息，作者链接，友情链接，分类目录，所有标签等）
• 可设置主题色
• 支持在侧栏添加小工具
• 良好的阅读体验
• 侧栏浮动文章目录
• 自动计算字数和阅读时间
• Pjax 无刷新加载
• Ajax 评论
• 内置多种小工具（进度条，TODO 复选框，标签等）
• 内置 Mathjax、平滑滚动等
• 支持自定义 CSS 和 JS
• 适配小屏幕设备
• 夜间模式支持

?快速开始

Argon Theme 仅支持 Wordpress 4.4 及以上的版本。

安装主题

在 Github Release 页面下载 .zip 文件，在 WordPress 后台 "主题" 页面上传并安装。

[sfriendlinks]
category|主题下载地址
link|https://github.com/solstice23/argon-theme/releases|Argon|轻盈、简洁、美观的 WordPress 主题|https://cdn.jsdelivr.net/gh/solstice23/cdn/avatar_very_big_500.png
[/sfriendlinks]

安装后的配置

安装后，你需要进行菜单的配置，配置文档在下一章节，请前往下一章节查看。

?配置

配置 Argon 主题

菜单

安装后由于没有设置菜单，顶栏和侧栏显示会不正常，您需要首先配置菜单。

如果您不想显示某个菜单 (例如"作者链接")，不指定这个菜单即可，该菜单将不会显示。

菜单在 WordPress 后台 "外观 - 菜单" 页面 中配置。在这个页面可以新建菜单并指定它的显示位置。

下面是每个位置的单独说明。

顶部导航

顶部导航位于页面的顶栏，横向显示。

顶部导航支持二级菜单，鼠标移上后会显示。

左侧栏菜单

左侧栏菜单位于左侧栏上半部分，纵向显示。

建议在该菜单中添加图标。参见 "图标" 章节图标/configuration/icon

​

左侧栏作者链接

左侧栏作者链接位于左侧栏下半部分 "站点概览" Tab 中，纵向多行显示，每行 2 个链接。

建议在该菜单中添加图标。参见 "图标" 章节

图标

向页面中添加图标

使用 Font Awesome 向网页中添加图标

添加图标

使用 添加图标。其中 xxxx 为图标名。

在菜单中添加图标

在菜单文本前添加 即可添加图标。

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

示例

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

 首页 友链 RSS

​

左侧栏

自定义左侧栏内容

左侧栏分为三个板块。

文章目录

该板块在访问文章，且该文章中有标题时会出现

站点概览

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

在 "Argon 设置" 中可以设置该板块的内容。

要自定义该板块中的菜单，请阅读 "菜单" 一章。

功能

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

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

?短代码

向文章/页面中添加短代码，让文章的表达形式更加丰富

Argon 主题提供了多种短代码的支持，这些短代码可以给文章中增加特殊的内容，让文章的表达形式更加丰富。

介绍

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

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

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

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

例如，[alert]foobar[/alert] 就是一个最简单的的短代码。alert 是短代码的标签名称，foobar 是这个短代码的内容。这个短代码没有参数。

另一个例子，[alert icon="flag"]foobar[/alert]，这个短代码给有一个参数 icon，参数值为 flag，意思是在这个短代码生成的提示中会显示一个旗帜图标。

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

开始

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

例子

通过短代码，您可以很轻松地向文中插入一个折叠区块，或者插入一个 TODO-List、进度条、标签、提示、警告、隐藏文本、一个友情链接列表、时间轴、 Github Repo 信息卡等。

而要做到这些，你只需要在文中插入例如 [alert]foobar[/alert] 的短代码。Wordpress 和 Argon 主题会自动解析这些短代码并呈现在文章中。

TODO 复选框

短代码

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

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

介绍

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

用法

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

参数

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

例子

代码

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

效果

标签

短代码

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

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

介绍

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

用法

[label 参数名="参数值"]内容[/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]

效果

进度条

短代码

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

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

介绍

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

用法

[progressbar 参数名="参数值"]进度条标签内容[/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]

效果

提示

短代码

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

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

介绍

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

用法

[alert 参数名="参数值"]内容[/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]

效果

警告

短代码

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

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

介绍

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

用法

[admonition 参数名="参数值"]内容[/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]

效果

折叠区块

短代码

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

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

介绍

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

用法

    

       
      ==>  展开 / 收缩
    

    
    
内容
    

内容是必需的

参数

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

例子

代码

    

       
    默认折叠区块  ==>  展开 / 收缩
    

    
    
折叠的内容
    

    

       
    靛蓝折叠区块  ==>  展开 / 收缩
    

    
    
折叠的内容
    

    

       
    绿色折叠区块  ==>  展开 / 收缩
    

    
    
折叠的内容
    

    

       
    红色折叠区块  ==>  展开 / 收缩
    

    
    
折叠的内容
    

    

       
    蓝色折叠区块  ==>  展开 / 收缩
    

    
    
折叠的内容
    

    

       
    橙色折叠区块  ==>  展开 / 收缩
    

    
    
折叠的内容
    

    

       
    黑色折叠区块  ==>  展开 / 收缩
    

    
    
折叠的内容
    

    

       
    灰色折叠区块  ==>  展开 / 收缩
    

    
    
折叠的内容
    

    

       
    无色折叠区块  ==>  展开 / 收缩
    

    
    
折叠的内容
    

    

       
    显示左边框的折叠区块  ==>  展开 / 收缩
    

    
    
折叠的内容
    

    

       
    带图标的折叠区块  ==>  展开 / 收缩
    

    
    
折叠的内容
    

    

       
    默认展开的折叠区块  ==>  展开 / 收缩
    

    
    
折叠的内容
    

效果

友情链接列表

短代码

该页面暂时未编写完成

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

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

介绍

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

友情链接从 Wordpress 自带的链接管理器中读取。请在 "Wordpress 后台 - 链接" 菜单中管理链接。

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

用法

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

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

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

参数

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

例子

代码

[friendlinks/]

友情链接列表 (旧)

短代码

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

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

介绍

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

不推荐使用此短代码。

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

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

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

用法

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

每行中用竖线分隔。

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

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

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

描述和头像可省略

参数

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

例子

代码

[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 提供了一些短代码的支持。

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

介绍

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

用法

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

参数

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

例子

代码

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

效果

Github 信息卡

短代码

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

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

介绍

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

用法

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

参数

例子

代码

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

效果

视频

短代码

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

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

介绍

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

用法

内容是必需的

参数

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

例子

代码

发布时间/编辑时间

短代码

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

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

介绍

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

用法

[post_time 参数名="参数值"][/post_time][post_modified_time 参数名="参数值"][/post_modified_time]

参数

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

例子

代码

[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

让短代码不被解析

短代码

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

用法

[noshortcode]内容[/noshortcode]

例子

代码

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

效果

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

[alert]我不会被解析[/alert]

​?页面模板

说说

Argon 主题提供了说说功能。

安装 Argon 主题后，Wordpress 管理后台左侧栏增加了一个栏目"说说"，即为"说说"的管理入口。

使用

开始

新建一个页面，将其页面模板设为 "说说" 即可。

发表、编辑和删除说说

在 Wordpress 管理后台左侧栏"说说"栏目来发表、编辑和删除说说。

可能的问题

Q: 进入说说详情，提示 404 或自动跳转到其他页面

A: 可能是 Wordpress 伪静态缓存未及时更新。请到 "Wordpress 管理后台-设置-固定链接" 页面中直接点击 "保存更改" 来刷新缓存。

留言板

页面模板

使用

新建一个页面，将其页面模板设为 "留言板"，并开启这个页面的评论功能，即可让这个页面成为留言板。

?更新

检测更新

Argon 主题接入了 Wordpress 更新机制，在 Wordpress 更新页面更新即可。

自动更新仅在 Argon v0.55 及以上版本有效，低于此版本的无法自动更新或者会出现错误，请手动更新

手动更新

在 Github Release 页面下载 .zip 文件，解压后覆盖 /wp-content/themes/argon。

?插件推荐

因为使用者众多，所以WordPress社区非常活跃，有丰富的插件模板资源。使用WordPress可以快速搭建独立的博客网站。
WordPress 不仅仅是一个博客程序，也是一款CMS，很多非博客网站也是用WordPress搭建的。

WordPress博客有哪些插件使用非常方便呢？下面就由站长为大家推荐一些WordPress好用的插件，仅供参考！

1、Disable Google Fonts插件

这款插件是禁用谷歌字体的，因为谷歌退出中国的原因，国内访问谷歌官网是打不开的。wp博客打开满也有一部分原因就是因为在加载谷歌字体的时候反应很慢。所以把谷歌字体禁用后，对访问加载速度是有提升的。

2、Wordfence Security

Wordfence保护你的网站安全，相当于WordPress的安全卫士，可能防止爆破和检测网站有没有被人挂马之类的。这个我推荐网wp博客必须安装。

3、经典编辑器

这个是WordPress的热门插件，因为wp新版本编辑器已经默认的是Gutenberg 古腾堡编辑器了，很多人都不习惯这个编辑器。所以如果你也不习惯现在默认的编辑器，那么就换回以前好用的经典编辑器吧。

4、WP-SMTP

有的主机由于种种原因，导致了网站无法发送邮件，那么用WP-SMTP配置就很简单好用了，方便邮件找回密码等。

5、easy2hide

如果你文章里有些内容需要回复才能看到，那么这是一个很好的插件。

6、WP Database Backup

备份插件有好几个，但是我推荐这个备份插件，这个只备份数据库，然后以邮件方式发送到你邮箱，对个人博客来说，这个比较适合，不用备份整站。因为像主题那些平时都很少改动，可以手动备份整站。

7、CodeColorer

代码高亮，在文章里插入的时候有个代码框，更方便一些。

8、Widget logic

Widget logic 是最有用的wordpress插件之一。通过设置，Widget logic能够让博客的不同页面显示不同的侧边栏。这个功能非常有用，当你打算在侧边栏显示广告或其它内容时，不必再费事地修改模板。可以指定在哪些页面显示。非常实用。有人说安装后找不到设置，在仪表盘-外观-小工具。如果你点外观没看到小工具那说明你现在使用的主题把小工具禁用了。

9.Protected wp-login

Protected wp-login是改后台登录地址的工具，启用隐藏功能后，除非输入正确的后台地址，不然既然输入正确的管理员密码也无法登录。

?欢迎反馈问题

教程是我花了差不多两天时间完成，可能仍然有不足之处或者错误，欢迎大家反馈指正，同时也欢迎大家留言提交比较好的wordpress sakura主题使用|美化教程，让更多人能看到各位的作品。后续有好的教程我会继续补充。