常言道：“工欲善其事，必先利其器。” 搭建好博客后，一个舒适、顺手的写作与阅读环境，确实能激励我们更好地创作。但我也时刻提醒自己，好的内容才是博客的灵魂，一切美化都应以不妨碍阅读、不喧宾夺主为前提。

这篇文章是我长期使用 Argon 主题过程中，不断调整和筛选出的美化方案汇总。它可能不是最炫酷的，但每一项调整都基于“实用”和“美观”的平衡。希望能给正在折腾主题的你一些参考。

---

让侧边栏更灵动

增加年度进度条

在侧边栏中显示一个当前年份的进度条，既能增加一点趣味性，也能提醒自己珍惜时间。效果和代码都很轻量。

操作路径：外观 -> 主题设置 -> 左侧栏 -> 工具（简码）

将以下代码粘贴到简码内容中：

<div class="progress-wrapper" style="padding: 0">
<div class="progress-info">
<div class="progress-label">
<span id="yearprogress_yearname"></span>
</div>
<div id="yearprogress_text_container" class="progress-percentage">
<span id="yearprogress_progresstext"></span>
<span id="yearprogress_progresstext_full"></span>
</div>
</div>
<div class="progress">
<div id="yearprogress_progressbar" class="progress-bar bg-primary"></div>
</div>
</div>
<script no-pjax="">
function yearprogress_refresh() {
let year = new Date().getFullYear();
$("#yearprogress_yearname").text(year);
let from = new Date(year, 0, 1, 0, 0, 0);
let to = new Date(year, 11, 31, 23, 59, 59);
let now = new Date();
let progress = (((now - from) / (to - from + 1)) * 100).toFixed(7);
let progressshort = (((now - from) / (to - from + 1)) * 100).toFixed(2);
$("#yearprogress_progresstext").text(progressshort + "%");
$("#yearprogress_progresstext_full").text(progress + "%");
$("#yearprogress_progressbar").css("width", progress + "%");
}
yearprogress_refresh();
if (typeof yearProgressIntervalHasSet == "undefined") {
var yearProgressIntervalHasSet = true;
setInterval(function () {
yearprogress_refresh();
}, 500);
}
</script>
<style>
#yearprogress_text_container {
width: 100%;
height: 22px;
overflow: hidden;
user-select: none;
}
#yearprogress_text_container > span {
transition: all 0.3s ease;
display: block;
}
#yearprogress_text_container:hover > span {
transform: translateY(-45px);
}
</style>

为头像增加交互动效

让侧边栏的头像在鼠标悬停时有一些细腻的反馈，能提升浏览的愉悦感。

操作路径：外观 -> 自定义 -> 额外CSS

/* 头像容器增加过渡效果 */
#leftbar_overview_author_image {
    width: 100px;
    height: 100px;
    margin: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgba(127, 127, 127, 0.1);
    overflow: hidden;
    box-shadow: 0 0 5px rgba(116, 8, 204, 0.3);
    transition: transform 0.3s ease; /* 过渡速度 */
}

/* 悬停时放大并调亮 */
#leftbar_overview_author_image:hover {
    transform: scale(1.2);
    filter: brightness(150%);
}

让头像和姓名可点击跳转

让侧边栏的头像和姓名变成一个链接，点击后可以跳转到“关于我”等页面，增加导航的便捷性。

操作路径：外观 -> 主题文件编辑器 -> 边栏文件 (sidebar.php)

• 头像跳转（大约在第126行）：在 <div id="leftbar_overview_author_image"...> 外层包裹 <a> 标签。
• 姓名跳转（大约在第130行）：在 <h6 id="leftbar_overview_author_name"...> 外层包裹 <a> 标签。

修改后的代码示例：

<!-- 头像链接 -->
<a href="https://你的域名.com">
    <div id="leftbar_overview_author_image" style="background-image: ..."></div>
</a>

<!-- 姓名链接 -->
<a href="https://你的域名.com">
    <h6 id="leftbar_overview_author_name"><?php echo get_option('argon_sidebar_auther_name'); ?></h6>
</a>

---

底部信息区的改造

我倾向于将底部改造为一个信息聚合区，用于显示备案、版权、运行时间和技术支持等信息，整洁且信息量大。

添加 CSS 基础样式

操作路径：外观 -> 自定义 -> 额外CSS

/* 核心样式 */
.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; }

组合底部 HTML 信息

操作路径：Argon 主题设置 -> 全局 -> 页脚 HTML

将以下代码填入“页脚 HTML”中，记得替换其中的链接和年份信息。

<!-- 技术支持与版权 -->
<div class="github-badge-big">
    <span class="badge-subject"><i class="fa fa-cloud"></i> CDN</span>
    <span class="badge-value bg-shallots"><a href="https://www.upyun.com/" target="_blank">Upyun</a></span>
    <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">WordPress</a></span>
</div>

<div class="github-badge-big">
    <span class="badge-subject"><i class="fa fa-copyright"></i>Copyright </span>
    <span class="badge-value bg-red">2022-2023 <i class="fa fa-copyright"></i> <a href="https://你的域名.com" target="_blank">Echo</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>

<!-- 运行时间脚本 -->
<script no-pjax="">
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");
function refresh_blog_running_time() {
    // 注意：月份参数比实际月份小1，例如6月需填5
    var time = new Date() - new Date(2022, 5, 31, 0, 0, 0); 
    var d = parseInt(time / 24 / 60 / 60 / 1000);
    var h = parseInt((time % (24 * 60 * 60 * 1000)) / 60 / 60 / 1000);
    var m = parseInt((time % (60 * 60 * 1000)) / 60 / 1000);
    var s = parseInt((time % (60 * 1000)) / 1000);
    blog_running_days.innerHTML = d;
    blog_running_hours.innerHTML = h;
    blog_running_mins.innerHTML = m;
    blog_running_secs.innerHTML = s;
}
refresh_blog_running_time();
if (typeof bottomTimeIntervalHasSet == "undefined") {
    var bottomTimeIntervalHasSet = true;
    setInterval(function () { refresh_blog_running_time(); }, 500);
}
</script>

---

沉浸式体验增强

添加全局背景音乐

为博客添加一个不打扰阅读的悬浮音乐播放器，我使用了 APlayer 和 Meting 组件，支持从网易云音乐歌单拉取。

操作路径：Argon 主题设置 -> 全局 -> 页尾脚本

在“页尾脚本”中添加以下代码：

<!-- 引入 APlayer 核心库 -->
<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"        <!-- 平台：netease(网易), tencent(QQ) -->
    type="playlist"         <!-- 类型：playlist(歌单), song(单曲) -->
    id="7373135320"         <!-- 歌单或歌曲ID -->
    fixed="true"            <!-- 吸底模式 -->
    mini="true"             <!-- 迷你模式 -->
    order="list"            <!-- 播放顺序：list, random -->
    loop="all"              <!-- 循环模式 -->
    preload="auto"          <!-- 预加载 -->
    list-folded="true"      <!-- 默认折叠播放列表 -->
    lrc-type="0"            <!-- 歌词类型 -->
>
</meting-js>

提示：歌单 ID 可以从网易云音乐网页版的 URL 中获取，例如 https://music.163.com/#/playlist?id=7373135320。

可选：动态视频背景

动态背景能极大提升首页的视觉冲击力，但要注意视频体积不宜过大。以下代码实现了白天和夜间模式使用不同视频源的效果。

操作路径：Argon 主题设置 -> 全局 -> 页尾脚本

<!-- 白天视频 -->
<video src="https://你的域名.com/" class="bg-video bg-video-day" autoplay loop muted></video>
<!-- 夜间视频 -->
<video src="https://你的域名.com/" class="bg-video bg-video-night" autoplay loop muted></video>

<style>
video.bg-video {
    position: fixed;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    pointer-events: none;
}
html.darkmode video.bg-video.bg-video-day { opacity: 0; }
html.darkmode video.bg-video.bg-video-night { opacity: 1; }
video.bg-video.bg-video-day { opacity: 1; }
video.bg-video.bg-video-night { opacity: 0; }
#banner, #banner .shape { background: transparent !important; }
</style>

---

高阶自定义与优化

个性化全局字体

通过 @font-face 引入自定义字体，能让博客的视觉风格更统一、更具辨识度。

操作路径：外观 -> 自定义 -> 额外CSS

/* 引入自定义字体 */
@font-face{
    font-family: 'EchoFont';
    src: url('https://你的CDN域名.com') format('woff2');
}

body {
    font-family: 'EchoFont', Georgia, -apple-system, 'PingFang SC', 'Microsoft Yahei', sans-serif;
}

/* 修改顶栏菜单字体 */
.navbar-nav .nav-link {
    font-size: 1rem;
    font-family: 'EchoFont';
}
.navbar-brand {
    font-family: 'EchoFont';
    font-size: 1.2rem;
}

为 Banner 标题添加渐变文字

让首页大标题更吸睛，使用 CSS 渐变实现彩色文字。

.banner-subtitle{
    font-size: 28px;
    -webkit-text-fill-color: transparent;        
    background: linear-gradient(94.75deg, rgb(60, 172, 247) 0%, rgb(131, 101, 253) 43.66%, rgb(255, 141, 112) 64.23%, rgb(247, 201, 102) 83.76%, rgb(172, 143, 100) 100%);        
    -webkit-background-clip: text;
}

让页面“呼吸”起来 — 半透明玻璃效果

这是 Argon 主题美化的一个核心点，通过调整卡片、背景的透明度，营造出毛玻璃的质感。

操作路径：外观 -> 自定义 -> 额外CSS

/* 白天卡片背景透明 */
.card{
    background-color: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* 小工具栏背景完全透明，避免叠加变色 */
.card .widget, .darkmode .card .widget {
    background-color: #ffffff00 !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 夜间透明适配 */
html.darkmode .card, html.darkmode #footer {
    background: rgba(66, 66, 66, 0.9) !important;
}

---

为博客增添趣味的小功能

添加看板娘

这是一个很受喜欢的互动元素。在“页尾脚本”中添加以下任意一种代码即可。

方案一（自动加载）：

<script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

方案二（自定义配置）：

<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
    L2Dwidget.init({
        "model": {
            // 在此处更换模型地址，下方有模型列表
            jsonPath: "https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json",
            "scale": 1
        },
        "display": {
            "position": "right",
            "width": 75,
            "height": 150,
            "hOffset": 0,
            "vOffset": -20
        },
        "mobile": { "show": true, "scale": 0.5 },
        "react": { "opacityDefault": 0.7, "opacityOnHover": 0.2 }
    });
</script>

可选模型：

• 萌娘：live2d-widget-model-shizuku
• 小可爱（女）：live2d-widget-model-koharu
• 初音：live2d-widget-model-miku
• 黑猫：live2d-widget-model-hijiki
• 更多模型可替换 koharu 部分。

让评论头像显示更稳定（国内访问）

将 Gravatar 头像服务替换为国内的 Cravatar，提升加载速度。

操作路径：外观 -> 主题文件编辑器 -> 模板函数 (functions.php)

在文件末尾添加以下代码：

if ( ! function_exists( 'get_cravatar_url' ) ) {
    function get_cravatar_url( $url ) {
        $sources = array(
            'www.gravatar.com', '0.gravatar.com', '1.gravatar.com',
            '2.gravatar.com', 'secure.gravatar.com', 'cn.gravatar.com'
        );
        return str_replace( $sources, 'cravatar.cn', $url );
    }
    add_filter( 'um_user_avatar_url_filter', 'get_cravatar_url', 1 );
    add_filter( 'bp_gravatar_url', 'get_cravatar_url', 1 );
    add_filter( 'get_avatar_url', 'get_cravatar_url', 1 );
}

---

插件推荐

为了让博客功能更完善，以下插件是我正在使用并觉得不错的：

插件名称	功能描述
WP Statistics	在侧边栏显示网站访问数据
Akismet Anti-Spam	强大的评论垃圾过滤
WP Mail SMTP	确保邮件通知（如评论回复）能够正常发送
WP Word Count	统计文章字数

---

参考与致谢：

• https://github.com/solstice23/argon-theme
• https://aplayer.js.org/
• https://www.xiamuyan.com/notes/beautify-argon-theme.html
• https://liveout.cn/archives/2.html