我的博客美化与自定义记录（Argon 主题进阶玩法）

日志

• 2026-08-08：修复 Markdown 渲染（安装 Githuber MD 插件）；正文标题改为自动编号。
• 2026-08-08：新增留言板评论增强、日历美化。
• 2026-08-07：文章创建。记录博客美化全过程（页脚徽章、音乐播放器、字体、侧边栏、特效等）。

博客搭好后，参考"阿雷的小窝"（blog.leihub.cn）的风格做了一系列美化：页脚徽章、音乐播放器、全局字体、侧边栏重构、各类特效……本文完整记录每个自定义项的配置方法与效果。

---

自定义入口

Argon 主题的所有自定义内容都集中在 后台 → 外观 → Argon 主题选项 里，核心是这几个字段：

设置项	用途	存储选项名
页脚内容	页脚自定义 HTML（徽章、运行时间）	argon_footer_html
自定义 CSS	全局样式覆盖	argon_custom_html_head（<style>）
自定义 HTML（head）	head 区域脚本/样式（字体、播放器）	argon_custom_html_head
自定义 HTML（footer）	页面底部脚本（特效）	argon_custom_html_foot

💡 这些值存在 wp_options 表。由于本博客用的是 SQLite，我写了个 PHP 脚本直接读写，改完记得清 Redis 缓存。

页脚徽章 + 运行时间

参考阿雷博客，在页脚加了三个徽章：备案号、版权、运行时间。

配置代码（argon_footer_html）

<div class="footer-badges" style="text-align:center;">
  <span class="github-badge-big">
    <span class="badge-subject">备案</span>
    <span class="badge-value bg-orange">
      <a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备XXXXXXX号</a>
    </span>
  </span>
  <span class="github-badge-big">
    <span class="badge-subject">版权</span>
    <span class="badge-value bg-red">2026 @ 莫桑的小屋</span>
  </span>
  <span class="github-badge-big">
    <span class="badge-subject">运行时间</span>
    <span class="badge-value bg-green">
      <span id="blog_running_days">0</span> 天
      <span id="blog_running_hours">0</span> 小时
      <span id="blog_running_mins">0</span> 分
      <span id="blog_running_secs">0</span> 秒
    </span>
  </span>
</div>
<script>
// 运行时间实时跳动
(function(){
  var start = new Date('2026-08-07T20:00:00+08:00');
  function tick(){
    var now = new Date();
    var diff = Math.floor((now - start) / 1000);
    document.getElementById('blog_running_days').textContent = Math.floor(diff / 86400);
    document.getElementById('blog_running_hours').textContent = Math.floor(diff % 86400 / 3600);
    document.getElementById('blog_running_mins').textContent = Math.floor(diff % 3600 / 60);
    document.getElementById('blog_running_secs').textContent = diff % 60;
  }
  tick(); setInterval(tick, 1000);
})();
</script>

徽章样式（CSS）

.github-badge-big {
  display: inline-block;
  border-radius: 6px;
  font-size: 14.1px;
  color: #fff;
  line-height: 18px;
  margin-bottom: 7px;
}
.github-badge-big .badge-subject {
  background-color: #4d4d4d;
  padding: 4px 4px 4px 6px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.github-badge-big .badge-value {
  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: #7fb87f !important; }

网易云音乐播放器（吸底）

在左下角加了一个网易云歌单的迷你播放器，用 APlayer + MetingJS 实现，支持随机播放、折叠列表。

配置代码（argon_custom_html_head）

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
<meting-js
  server="netease"
  type="playlist"
  id="2031660996"
  fixed="true"
  mini="true"
  order="random"
  loop="all"
  preload="auto"
  list-folded="false"
  autoplay="false">
</meting-js>

⚠️ 浏览器策略限制，首次进入不会自动播放，需要用户点击。歌单 ID 是网易云歌单链接里的数字。

全局字体：汉仪唐美人

默认的 Comfortaa 字体偏英文手写风格，中文显示一般。换成了汉仪唐美人（HYTangMeiRen），一款优雅的中文手写字体。

上传字体文件

字体 woff2 文件（3.6MB，9893 个字形，中英文全覆盖）放到：

/var/www/html/wp-content/uploads/hytangmeiren.woff2

定义 @font-face + 全局应用

@font-face {
  font-family: "HYTangMeiRen-55W";
  src: url("/wp-content/uploads/hytangmeiren.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body, p, h1, h2, h3, h4, h5, h6, div, span, a, li, td, th,
input, button, textarea, blockquote, code, pre {
  font-family: "HYTangMeiRen-55W", "Comfortaa", "Open Sans",
    -apple-system, system-ui, "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

圆角卡片 + 胶囊按钮

.card, .card-body, .widget, .site-footer, .banner {
  border-radius: 16px !important;
}
.btn, .btn-primary, .btn-outline-primary {
  border-radius: 999px !important;
}

⚠️ 踩坑：字体规则千万不要写成 * { font-family: ... !important; }，会无差别覆盖 Font Awesome 图标字体（图标本质是字体符号），导致全站图标变方块！要用具体元素选择器，并显式保护图标：

i.fa, .fa, .fab, .fas, .far, i[class*="fa-"] {
  font-family: "FontAwesome" !important;
}

字体子集化建议

3.6MB 的 woff2 首次加载稍慢。后续可用 fontTools 做子集化，只保留文章用到的汉字，能压到 1MB 以内：

from fontTools.subset import Subsetter, Options
from fontTools.ttLib import TTFont
# 保留常用 3500 字 + 标点 + 英数

侧边栏重构（参考阿雷博客）

原版 Argon 左侧栏比较朴素，参考阿雷博客重构为 三个 Tab：

┌─────────────────────────────┐
│  Banner: 每日一言 (hitokoto) │
│  菜单: 首页/说说/留言板/归档   │
│  搜索框                      │
├─────────────────────────────┤
│  [站点概览] [统计] [功能]     │
├─────────────────────────────┤
│  ① 站点概览 Tab              │
│    头像 + 名字 + 简介(含邮箱)  │
│    文章/分类/标签 统计三格     │
│    作者链接排(导航/云盘/代码/  │
│    GitHub/邮箱)              │
│  ② 统计 Tab                  │
│    WP Statistics 站点统计    │
│  ③ 功能 Tab                  │
│    年度进度条 + 日历          │
└─────────────────────────────┘

关键点

1. Argon 的侧边栏区域（不是 WordPress 默认 sidebar-1/2）：

区域	用途
leftbar-tools	功能 Tab 内容
leftbar-siteinfo-extra-tools	站点概览下方附加内容

2. 每日一言：Banner 副标题填 --hitokoto-- 即自动调用一言 API：

// 设置项
argon_sidebar_banner_title    = 每日一言
argon_sidebar_banner_subtitle = --hitokoto--

3. 作者链接排：创建名为"作者链接"的导航菜单，注册到 leftbar_author_links 菜单位置，添加自定义链接（GitHub/云盘/代码/邮箱等）。

4. 统计独立 Tab：修改 sidebar.php，把 leftbar-siteinfo-extra-tools 从站点概览移到独立的"统计" Tab（修改前先备份 sidebar.php.bak）。

5. 年度进度条：一个 text widget，JavaScript 实时计算当年进度：

<script>
function yearprogress_refresh() {
  let year = new Date().getFullYear();
  let from = new Date(year, 0, 1);
  let to = new Date(year, 11, 31, 23, 59, 59);
  let now = new Date();
  let progress = (((now - from) / (to - from + 1)) * 100).toFixed(2);
  $("#yearprogress_progresstext").text(progress + "%");
  $("#yearprogress_progressbar").css("width", progress + "%");
}
yearprogress_refresh();
setInterval(yearprogress_refresh, 500);
</script>

站点统计（WP Statistics）

安装了 WP Statistics 插件（SQLite 兼容），提供完整的访问统计：

• 在线访客数
• 今日/昨日浏览量、访客数
• 近 7 天 / 近 30 天访问量

配置为独立 Tab 展示，不挤占站点概览空间。数据库表 wp_statistics_* 自动创建，无需额外配置。

页面与导航

创建页面

用 Argon 自带模板创建了三个页面：

页面	模板	路径
说说	说说（shuoshuo.php）	/shuoshuo/
留言板	留言板（msgboard.php）	/msgboard/
归档	归档时间轴（timeline.php）	/archives/

顶部导航菜单

创建"顶部导航"菜单，注册到 toolbar_menu 菜单位置：首页 / 说说 / 留言板 / 归档。

💡 创建页面时注意 comment_status 要设为 open，否则留言板模板不会显示评论表单（comments_open() 判断）。

留言板增强

参考阿雷博客，留言板开了完整的评论增强功能：

功能	设置项	值
Markdown 评论	argon_comment_allow_markdown	true
表情键盘	argon_comment_emotion_keyboard	true
私密评论	argon_comment_allow_privatemode	true
邮件通知	argon_comment_allow_mailnotice	true
评论可编辑	argon_comment_allow_editing	true
QQ 头像	argon_comment_enable_qq_avatar	true
显示设备/浏览器	argon_comment_show_ua	platform/browser/version
评论点赞	argon_comment_upvoted	true
验证码	argon_comment_need_captcha	false（关闭，体验好）

页面特效

在 argon_custom_html_foot 添加了三个轻量特效（仅 PC 端生效，移动端自动跳过）：

鼠标仙女棒

鼠标移动拖出彩色星光轨迹：

<script>
(function(){
  if (window.innerWidth < 768) return;
  var s = document.createElement('script');
  s.src = 'https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/mouse/halo-dream/fairyDustCursor.min.js';
  document.head.appendChild(s);
})();
</script>

鼠标点击飘字

点击页面任意位置，飘出祝福文字：

<script>
var a_idx = 0;
jQuery(document).ready(function($) {
  $("body").click(function(e) {
    var a = ["❤身体健康❤","❤万事如意❤","❤心想事成❤","❤笑口常开❤"];
    var $i = $("<span/>").text(a[a_idx]);
    a_idx = (a_idx + 1) % a.length;
    $i.css({
      "z-index": 9999999999999,
      "top": e.pageY - 20, "left": e.pageX,
      "position": "absolute", "font-weight": "bold", "color": "#ff6651"
    });
    $("body").append($i);
    $i.animate({ "top": e.pageY - 180, "opacity": 0 }, 1500, function() { $i.remove(); });
  });
});
</script>

⚠️ 小缺点：可能影响双击选中文字。嫌烦可以关掉。

文字输入撒花

在输入框打字时撒出彩色粒子：

<script src="https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/input-with-fire.js"></script>

卡片 3D 倾斜

鼠标悬停文章卡片时轻微 3D 倾斜（vanilla-tilt）：

<script>
(function(){
  if (window.innerWidth < 768) return;
  var s = document.createElement('script');
  s.src = 'https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/vanilla3D/vanilla-tilt_v1.7.3.js';
  s.onload = function(){
    VanillaTilt.init(document.querySelectorAll('article.post, .card'), {
      reverse: true, max: 6, perspective: 1000, scale: 1.01, speed: 500, reset: true
    });
  };
  document.head.appendChild(s);
})();
</script>

耗时 / 查询数 / 内存（页脚）

修改 footer.php，在 </footer> 前插入 PHP 统计：

<?php printf(
  '耗时 %.3f 秒 | 查询 %d 次 | 内存 %.2f MB',
  timer_stop(0, 3),
  get_num_queries(),
  memory_get_peak_usage() / 1024 / 1024
); ?>

实测效果：耗时 0.081 秒 | 查询 13 次 | 内存 6.86 MB

日历美化

WordPress 默认日历在侧边栏很突兀，重写了一套 CSS 让它融入 Argon 卡片风格：

• 星期表头：紫蓝渐变 + 白色文字 + 圆角胶囊
• 今天：渐变圆形高亮 + 阴影
• 有文章的日期：淡紫圆底，悬停变实心
• 上下月导航：胶囊小按钮

#wp-calendar thead th {
  background: linear-gradient(135deg, #5e72e4, #825ee4);
  color: #fff;
  border-radius: 6px;
}
#wp-calendar tbody td#today::before {
  content: '';
  position: absolute;
  width: 24px; height: 24px;
  background: linear-gradient(135deg, #5e72e4, #825ee4);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(94,114,228,.4);
}

维护脚本汇总

所有配置脚本保存在服务器 /opt/blog/scripts/：

脚本	用途
wp_argon_config.php	页脚徽章 + 音乐播放器 + 字体 CSS
wp_sidebar_config.php	年度进度条 widget
wp_stats_widget.php	WP Statistics 统计 widget
wp_effects.php / wp_effects2.php	页面特效
wp_patch_footer.php	footer.php 耗时/内存
wp_leftbar_config.php	左侧栏每日一言/描述
wp_pages_menu.php	页面创建 + 顶部菜单
wp_author_links.php	作者链接排
wp_comment_config.php	留言板评论增强
wp_calendar_css.php	日历美化
wp_font_config.php	汉仪唐美人字体
wp_upload_shots.php	截图上传

统一操作流程：改数据库 → 清 Redis → 验证页面。

效果一览

---

本文持续更新，后续补充新的美化项。