第一篇文章：Argon主题美化
|
771
|
0
|
未分类

2182 字
|
18 分钟

一、前言

作为一位纯小白，一头扎进技术的海洋里，学习前、后端知识后再动手，显然会使建站的周期大幅增加。既然是美化，以效果为驱动，遇到问题解决问题才是良策。况且，随着AI技术呈现出“勃勃生机万物竞发的境界就在眼前”，对于“美化”而言，有一个好的想法要比技术实现重要一丢丢。

首先是一个链接，Argon文档链接：Argon Theme Docs

通过这个文档可以实现大部分基础功能，比如说说、时间线、TODO list、留言板等功能。但对于视觉效果的美化而言，还需要做一些其他的工作。

先从Argon Theme Docs文档中的基础功能的实现开始吧！

二、安装Argon主题

Argon主题是一款开源免费的主题：Argon – 一个轻盈、简洁的 WordPress 主题 · GitHub，在GitHub上下载该主题，你将得到一个.zip的压缩包。如下图，在wordpress后台主题页上传该压缩包即可。上传成功后，启用该主题即可。

二、基础功能实现

1.说说

根据Argon文档中所述，在WordPress后台侧栏的“说说”栏目来发表、编辑和删除说说。基础功能可以实现，但可能是我没太搞明白，有一些影响效果的问题，比如，合适的图片大小不好调整、居中按钮失效。

2.时间线

根据Argon文档中所述，在WordPress后台侧栏的“页面”，选择增加新的页面，进入页面编辑界面，在右侧菜单栏选择“时间线”作为页面模板，主标题就是时间线的标题。时间线里的内容自动生成，无需设置。

3.留言板

根据Argon文档中所述，在WordPress后台侧栏的“页面”，选择增加新的页面，进入页面编辑界面，选择“留言板”作为页面模板。操作过程与“时间线”类似。

4.菜单栏及其图标

菜单栏设置在WordPress后台侧栏 外观--->菜单，第一步，选择要编辑的菜单为“顶部菜单栏”；第二步，在添加菜单项中，选择你要添加的页面，打勾；第三步，添加至菜单；第四步，在右侧可以看到刚添加的菜单项；第五步，打开详情，去编辑。

菜单项汉字前的图标，需要在详情页的菜单项汉字前，增加图标的HTML标签。Argon主题自带了Font图标库，去Font Awesome Icons选就可以啦。

5.左侧栏作者头像

在wordpress后台左侧栏 Argon主题选项--->左侧栏--->左侧栏作者头像地址添加头像的url就可以了。

三、其他美化

1.背景美化

固定Argon主题的背景。在“Argon主题选项”中，设置“页面背景”，即WordPress后台侧栏 Argon主题选项--->页面背景。有个问题是，开启后，页面背景会多两个白色的半透明圆装饰，如下图所示，没找到怎么去掉，有点子丑。

2.页脚美化

网站底部信息美化，参考wordpress-argon主题 – 阿雷的小窝，大佬给出了配置，把配置复制，粘贴到WordPress后台侧栏的“Argon主题选项”里面的“页脚”下的“页脚内容”中，Argon主题选项--->页脚--->页脚内容。大佬的配置里有链接和时间占位符，复制给豆包、元宝等AI工具，增加运算具体时间的JavaScript代码即可。

在大佬的代码上，给出我配置的具体代码，包括动态时间：

<!-- 引入Odometer插件（CDN方式，无需本地下载） -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/odometer.js/0.4.8/themes/odometer-theme-default.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/odometer.js/0.4.8/odometer.min.js"></script>

<!-- 备案号徽章 -->
<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备202X0XXXXXX号-X</a>
        <img src="https://your/img/root/备案图标.png" alt="备案国徽" style="width: 16px; height: 16px; vertical-align: middle; margin: 0 4px 0 8px;">
        <a href="https://beian.mps.gov.cn/#/query/webSearch?code=XXXXXXXXXX" rel="noreferrer" target="_blank">晋公网安备XXXXXXXXXX号</a>
    </span>
</div>

<!-- 版权信息徽章（修复语法错误） -->
<div class="github-badge-big">
    <span class="badge-subject"><i class="fa fa-copyright" aria-hidden="true"></i>Copyright </span>
    <span class="badge-value bg-red">
        2026 - 现在 
        <a href="https://www.yourblog.com" target="_blank" one-link-mark="yes">yourblog.com</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-green">
        <span id="blog_running_days" class="odometer odometer-auto-theme"></span> 天
        <span id="blog_running_hours" class="odometer odometer-auto-theme"></span> 小时
        <span id="blog_running_mins" class="odometer odometer-auto-theme"></span> 分钟
        <span id="blog_running_secs" class="odometer odometer-auto-theme"></span> 秒
    </span>
</div>

<style>
/* 核心样式 */
.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-green { /* 补充绿色样式（原代码漏了） */
    background-color: #75cb85 !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;
}
</style>

<!-- 运行时间计算逻辑 -->
<script>
// 1. 定义网站上线时间（修改为你的实际上线时间）
const startTime = new Date("202X-XX-XX 18:00:00").getTime();

// 2. 初始化Odometer（数字滚动效果）
function initOdometer(id) {
    return new Odometer({
        el: document.getElementById(id),
        value: 0,
        format: '(,ddd)', // 数字格式（千分位）
        theme: 'default'
    });
}

// 3. 创建各时间维度的Odometer实例
const daysOdo = initOdometer('blog_running_days');
const hoursOdo = initOdometer('blog_running_hours');
const minsOdo = initOdometer('blog_running_mins');
const secsOdo = initOdometer('blog_running_secs');

// 4. 实时计算并更新运行时间
function updateRunningTime() {
    const now = new Date().getTime();
    const diff = now - startTime; // 时间差（毫秒）

    // 分解时间差为天、时、分、秒
    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((diff % (1000 * 60)) / 1000);

    // 更新Odometer数值
    daysOdo.update(days);
    hoursOdo.update(hours);
    minsOdo.update(minutes);
    secsOdo.update(seconds);
}

// 5. 初始化执行+每秒更新
updateRunningTime();
setInterval(updateRunningTime, 1000);

</script>

3.网站访问数据统计

依旧参考阿雷大佬的设置，网站访问数据的读取需要在WordPress后台侧栏的插件中，下载插件wp-statistic。官方是有汉化的，支持30种语言，但下载后的插件却是英语。汉化需要在官网下载mo和po后缀的两个文件，汉化过程参考wp-statistics 汉化-CSDN博客。官方汉化率貌似不高，甚至有大佬利用翻译软件全部汉化，这里以够用为主，就不折腾了，感兴趣的参考大佬博客wp-statistic插件以及汉化-半入烟云的小站。

4.优化阅读体验

在 Argon主题选项 --> 脚本 --> 页尾脚本 加入下面代码

通过调整 op1、op2、op3、op4 来调整透明度

<script>
 
function hexToRgb(hex,op){
let str = hex.slice(1);
let arr;
if (str.length === 3) arr = str.split('').map(d => parseInt(d.repeat(2), 16));
else arr = [parseInt(str.slice(0, 2), 16), parseInt(str.slice(2, 4), 16), parseInt(str.slice(4, 6), 16)];
return `rgb(${arr.join(', ')}, ${op})`;
};
 
let themeColorHex = getComputedStyle(document.documentElement).getPropertyValue('--themecolor').trim();
let op1 = 0.8
let themeColorRgb = hexToRgb(themeColorHex,op1);
let themecolorGradient = getComputedStyle(document.documentElement).getPropertyValue('--themecolor-gradient')
 
document.documentElement.style.setProperty('--themecolor-gradient',themeColorRgb)
let op2 = 0.8
let colorTint92 = getComputedStyle(document.documentElement).getPropertyValue('--color-tint-92').trim();
colorTint92 += ', '+op2;
document.documentElement.style.setProperty('--color-tint-92',colorTint92)
 
let op3 = 0.8
let colorShade90 = getComputedStyle(document.documentElement).getPropertyValue('--color-shade-90').trim();
colorShade90 += ', ' + op3;
document.documentElement.style.setProperty('--color-shade-90',colorShade90)
 
let op4 = 0.8
let colorShade86 = getComputedStyle(document.documentElement).getPropertyValue('--color-shade-86').trim();
colorShade86 += ', ' + op4;
document.documentElement.style.setProperty('--color-shade-86',colorShade86)
 
</script>

然后在额外CSS 中加入以下代码:

/* 在不改变主题色的前提下，将卡片等事物的背景透明化 */
#leftbar_announcement {
background: var(--themecolor-gradient) !important;
}
#footer{
background: var(--themecolor-gradient) !important
}

总之，站在各位大佬的肩膀上，少走弯路(●’◡’●)！

至此，Argon主题的基础设施美化差不多了，如果对网站音乐播放器、动态背景、动态鼠标、网站桌面看板娘等功能有追求，参考我列出的各位大佬博客上的分享就好，定会有事半功倍的效果呢。

四、OK！

那么，是时候写下自己博客的第一篇文章了，就像本文的标题一样~

最后一句碎碎念。开始写博文前，一定要先购买域名、做DNS解析、申请并配置SSL证书。不要像笔者一样，一心只想着开始，顶着个大IP地址就开写，后来才去处理域名这些事情……会变得不幸(;´༎ຶД༎ຶ`)。

碎碎念：

写博文时免不了需要插入图片，然而wordpress后台的媒体库（也就是存照片的地方），是用网站地址+图片名称的url地址的形式进行管理。如果你的网站还没有申请SSL证书，那么所有的图片url索引都是http开头的。如果在这个阶段，往博文中插入了大量图片，在申请SSL证书并配置在自己的网站之后，你会发现已经发表的博文里的所有图片都无法正常显示，需要一张一张的手动替换成新https开头的url。

网上有帖子会推荐一个wordpress插件，really simple ssl，现在叫really simple security。该插件据说可以一键把所有的http替换为https，但可能是笔者打开方式不对，wordpress内的确实都替换掉了，但已发表的博文内的图片，必须手动替换。所以，开始写博文前，一定要先购买域名、做DNS解析、申请并配置SSL证书！

参考：

阿雷的小窝

解决wordpress上传安装主题或者插件时需要FTP登录验证的问题_wordpree安装主题面登录-CSDN博客

wp-statistics 汉化 （设置中文）_wp statistics 设置中文-CSDN博客

WordPress网站安装wp-statistic插件以及汉化 – 半入烟云的小站

博客Argon主题美化 – pidanxia’ s Blog

Font Awesome Icons

argon主题wordpress建站
下一篇