前言
本站使用的主题来自wordperss@Argon，感谢相关小伙伴的贡献。Argon是一个轻盈、简介、美观的 WordPress & Hexo 主题，自定义选项非常多，不用增加太多的附加模块即可轻松使用，并创建一个美观的站点。
顶部导航栏的设计
初次安装Argon主题，顶部导航栏显示为空，需要增加页面和分类以此显示导航栏选项。
增加归档页
在wordperss的后台选择页面-添加页面，将标题输入为归档时间轴，然后发布。
保存退出后继续来到页面选项，鼠标悬停在刚刚新建的页面会有文字显示，选择快速编辑，将模板改为“归档时间轴”，更新即可得到归档页面。
增加留言板
增加留言板的步骤和上述增加归档页一致，同时请打开评论功能。
增加友链页
增加友链页和上述增加归档页一致。不同的是友链页需要增加函数，函数格式为：
[friendlinks 参数名="参数值"/]参数说明如下：
| 参数名 | 可选值 | 默认值 | 解释 | 是否必须 |
|---|---|---|---|---|
| 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 style="1-square" sort="url" order="ASC"/]效果自测。
做完该工作后只需要在wordperss后台的链接中加入链接即可。
编辑菜单
新建页面完成后在wordperss后台的外观-菜单里面，新建菜单，并将相关页面添加至该菜单，保存即可。
如果修改被拦截
如果修改被拦截，请检查服务器防火墙是否拦截web端设备ip，如果是，请放行该ip，注意仔细核对ip
添加图标
Argon内置Font Awesome 4图标库，可以通过在文字前加入代码增加美观性；
<i class="fa fa-xxxx"></i>页面标题添加图标可以在wordperss后台-页面-鼠标悬停在需要修改的页面上，选择快速修改，修改标题的内容即可，顶部状态栏同步更新。
页尾美化
添加css代码
在wordperss后台-外观-自定义-额外css内添加css代码：
/* 自定义页脚容器 */
.custom-footer-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-top: 20px;
}
/* 徽章核心样式 */
.github-badge {
display: inline-block;
border-radius: 4px;
text-shadow: none;
font-size: 13.1px;
color: #fff;
line-height: 15px;
margin-bottom: 5px;
font-family: "Open Sans", sans-serif;
}
.github-badge .badge-subject {
display: inline-block;
background-color: #4d4d4d;
padding: 4px 4px 4px 6px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
font-family: "Open Sans", sans-serif;
}
.github-badge .badge-value {
display: inline-block;
padding: 4px 6px 4px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
font-family: "Open Sans", sans-serif;
}
.github-badge-big {
display: inline-block;
border-radius: 6px;
text-shadow: none;
font-size: 14.1px;
color: #fff;
line-height: 18px;
margin-bottom: 7px;
}
.github-badge-big .badge-subject {
display: inline-block;
background-color: #4d4d4d;
padding: 4px 4px 4px 6px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.github-badge-big .badge-value {
display: inline-block;
padding: 4px 6px 4px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
/* 背景颜色 */
.bg-orange {
background-color: #ec8a64 !important;
}
.bg-red {
background-color: #cb7574 !important;
}
.bg-apricots {
background-color: #f7c280 !important;
}
.bg-casein {
background-color: #dfe291 !important;
}
.bg-shallots {
background-color: #97c3c6 !important;
}
.bg-ogling {
background-color: #95c7e0 !important;
}
.bg-haze {
background-color: #9aaec7 !important;
}
.bg-mountain-terrier {
background-color: #99a5cd !important;
}添加页脚内容
在wordperss后台的Argon主题设置支持编辑并加入页尾内容，在相应对话框内输入：
<div class="custom-footer-container mt-4">
<div class="github-badge-big">
<span class="badge-subject"><i class="fa fa-id-card"></i> 备案号 </span>
<span class="badge-value bg-orange">
<a href="https://beian.miit.gov.cn/" target="_blank" one-link-mark="yes">苏ICP备2022020194号</a>
|
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=32072202010255" target="_blank" one-link-mark="yes">苏公网安备 32072202010255号</a>
</span>
</div>
<div class="github-badge-big">
<span class="badge-subject">Copyright </span>
<span class="badge-value bg-red">
2026-2026 <i class="fa fa-copyright"></i> Echo
</span>
</div>
<div class="github-badge">
<span class="badge-subject"><i class="fa fa-wordpress"></i> Powered</span>
<span class="badge-value bg-green">
<a href="https://cn.wordpress.org/" target="_blank" one-link-mark="yes">WordPress</a>
</span>
</div>
<div class="github-badge-big">
<span class="badge-subject"><i class="fa fa-clock-o"></i> Running Time</span>
<span class="badge-value bg-apricots">
<span id="blog_running_days" class="odometer odometer-auto-theme"></span> days
<span id="blog_running_hours" class="odometer odometer-auto-theme"></span> H
<span id="blog_running_mins" class="odometer odometer-auto-theme"></span> M
<span id="blog_running_secs" class="odometer odometer-auto-theme"></span> S
</span>
</div>
</div>添加js脚本
同样的，在Agron主题设置里也支持页脚脚本的支持，添加代码；
<pre><code>
// 确保DOM完全加载后执行
document.addEventListener('DOMContentLoaded', function() {
var blog_running_days = document.getElementById("blog_running_days");
var blog_running_hours = document.getElementById("blog_running_hours");
var blog_running_mins = document.getElementById("blog_running_mins");
var blog_running_secs = document.getElementById("blog_running_secs");
if (blog_running_days && blog_running_hours && blog_running_mins && blog_running_secs) {
function refresh_blog_running_time() {
// 修改为您的实际建站时间（注意：月份从0开始，0=1月）
var createDate = new Date(2026, 7, 25, 0, 0, 0);
var now = new Date();
var time = now - createDate;
var d = Math.floor(time / (1000 * 60 * 60 * 24));
var h = Math.floor((time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var m = Math.floor((time % (1000 * 60 * 60)) / (1000 * 60));
var s = Math.floor((time % (1000 * 60)) / 1000);
blog_running_days.textContent = d;
blog_running_hours.textContent = h;
blog_running_mins.textContent = m;
blog_running_secs.textContent = s;
}
refresh_blog_running_time();
// 设置定时器，每秒更新一次
setInterval(refresh_blog_running_time, 1000);
}
});
</code></pre>