前言

刚装好 Argon 主题时，界面虽然简洁，但总觉得少了点“属于自己”的味道。于是我参考了Argon主题博客美化 – Echo小窝的美化经验，再结合自己的后台设置，做了一些个性化改造。本文将以教程形式，一步步展示如何实现这些效果。

这篇文章就是记录我折腾的主要过程，顺便分享一些实用的美化技巧，供大家参考（也欢迎抄作业！）。

主题资源

Github:solstice23/argon-theme: 📖 Argon – 一个轻盈、简洁的 WordPress 主题
蓝奏云：https://wwpc.lanzoub.com/imZp3366ryzc

一. 基本美化设置

1. 🎨Argon 主题设置

以下是我自己的设置方案，当然你可以根据喜好自由发挥：

🍭 背景不透明度：0.8，刚刚好
🎨 主题色：#5e72e4（默认就很耐看，不改也行）
🌙 夜间模式：跟随系统自动切换，懒人福音
🧊 卡片圆角：15px，看起来更柔和
🪞 卡片阴影：浅浅的就好，低调不抢戏
🖼️ 页面背景图：
白天：https://free.picui.cn/free/2025/10/07/68e464339f737.jpg
夜晚：https://free.picui.cn/free/2025/10/07/68e46433928fb.jpg
🍭 背景不透明度：0.8

当然，如果你想要网页的背景每次打开都是随机美图的话，我这里推荐一个不错的网站：栗次元API-举个栗子

2.🧙‍♂️页脚内容美化

以下是我自定义的页脚样式代码，包含备案信息、CDN 链接、运行时间等元素，大家可以按需修改：

<!-- 在head部分添加Font Awesome引用 -->
<link rel="stylesheet" href="https://cdnjs.admincdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<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-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;
}
.bg-green {
background-color: #7dc06e !important;
}
#footer-content {
    text-align: center;
    padding: 20px;
    margin-top: 30px;
    clear: both;
}

canvas#fallCanvas {
    display: block;
}
</style>
 
<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备33550336号</a
>
|
<a
href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=32072202010255"
target="_blank"
one-link-mark="yes"
>备案？不可能有的</a
></span
>
</div>
<!-- 已修改CDN链接：替换为腾讯云控制台链接，文本同步更新 -->
<div class="github-badge-big">
        <span class="badge-subject"><i class="fa fa-cloud" aria-hidden="true"></i> CDN</span>
        <span class="badge-value bg-shallots">
            <a href="https://console.cloud.tencent.com/" target="_blank" one-link-mark="yes">Tencent</a>
        </span>
<!-- 修复后的Powered图标部分 -->
<span class="badge-subject"><i class="fa fa-wordpress" aria-hidden="true"></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">Copyright </span
><span class="badge-value bg-red">
2025-2026
<i class="fa fa-copyright"></i> Fawang</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 type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
    // 飘落物动画逻辑
    const oldSnowCanvas = document.getElementById('snowfall');
    if (oldSnowCanvas) oldSnowCanvas.remove();

    const fallCanvas = document.createElement('canvas');
    fallCanvas.id = 'fallCanvas';
    fallCanvas.style.position = 'fixed';
    fallCanvas.style.top = '0';
    fallCanvas.style.left = '0';
    fallCanvas.style.zIndex = '-1';
    fallCanvas.style.pointerEvents = 'none';
    document.body.appendChild(fallCanvas);
    const ctx = fallCanvas.getContext('2d');

    function resizeFallCanvas() {
        fallCanvas.width = window.innerWidth;
        fallCanvas.height = window.innerHeight;
    }
    resizeFallCanvas();
    window.addEventListener('resize', resizeFallCanvas);

    const particleConfig = {
        baseCount: 120,
        sizeVariation: 0.8,
        speedVariation: 0.6,
        speedFactor: 0.7
    };

    let particles = [];

    function isDarkMode() {
        return document.documentElement.classList.contains('darkmode');
    }

    function getParticleCount() {
        const screenArea = window.innerWidth * window.innerHeight;
        const dynamicCount = Math.floor(screenArea / 50000);
        return particleConfig.baseCount + dynamicCount;
    }

    function createParticle() {
        const isSnow = isDarkMode();
        return {
            x: Math.random() * fallCanvas.width,
            y: Math.random() * -fallCanvas.height,
            size: isSnow ? 2 + (5 * (0.6 + Math.random() * particleConfig.sizeVariation)) : 3 + (6 * (0.8 + Math.random() * particleConfig.sizeVariation)),
            speed: (isSnow ? 0.8 : 1.2) + (isSnow ? 1.2 : 1.5) * (0.7 + Math.random() * particleConfig.speedVariation) * particleConfig.speedFactor,
            rotation: Math.random() * Math.PI * 2,
            rotationSpeed: (Math.random() - 0.5) * 0.02,
            drift: (Math.random() - 0.5) * 0.2,
            swing: Math.random() * Math.PI * 2,
            swingSpeed: 0.008 + Math.random() * 0.02
        };
    }

    function initParticles() {
        particles = [];
        const count = getParticleCount();
        for (let i = 0; i < count; i++) {
            particles.push(createParticle());
        }
    }

    function updateParticles() {
        const isSnow = isDarkMode();
        particles.forEach((particle, index) => {
            particle.y += particle.speed;
            particle.rotation += particle.rotationSpeed;
            particle.swing += particle.swingSpeed;
            particle.x += particle.drift + Math.sin(particle.swing) * (isSnow ? 0.4 : 1.2);

            if (particle.y > fallCanvas.height + particle.size || 
                particle.x < -particle.size * 5 || 
                particle.x > fallCanvas.width + particle.size * 5) {
                particles[index] = createParticle();
            }
        });
    }

    function drawSnowflake(particle) {
        ctx.save();
        ctx.translate(particle.x, particle.y);
        ctx.rotate(particle.rotation);
        const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, particle.size);
        gradient.addColorStop(0, 'rgba(255, 255, 255, 0.9)');
        gradient.addColorStop(0.6, 'rgba(255, 255, 255, 0.6)');
        gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
        ctx.fillStyle = gradient;
        ctx.beginPath();
        ctx.arc(0, 0, particle.size, 0, Math.PI * 2);
        ctx.fill();
        for (let i = 0; i < 6; i++) {
            ctx.rotate(Math.PI / 3);
            ctx.fillRect(0, -particle.size * 0.2, particle.size * 0.8, particle.size * 0.4);
        }
        ctx.restore();
    }

    function drawCherryBlossom(particle) {
        ctx.save();
        ctx.translate(particle.x, particle.y);
        ctx.rotate(particle.rotation);
        const pinkShade = 0.7 + Math.random() * 0.3;
        const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, particle.size);
        gradient.addColorStop(0, `rgba(255, ${180 * pinkShade}, ${210 * pinkShade}, 0.8)`);
        gradient.addColorStop(0.7, `rgba(255, ${160 * pinkShade}, ${200 * pinkShade}, 0.5)`);
        gradient.addColorStop(1, `rgba(255, ${140 * pinkShade}, ${190 * pinkShade}, 0)`);
        ctx.fillStyle = gradient;
        ctx.beginPath();
        ctx.ellipse(0, 0, particle.size, particle.size * 0.7, 0, 0, Math.PI * 2);
        ctx.fill();
        if (Math.random() > 0.4) {
            ctx.fillStyle = `rgba(240, ${120 * pinkShade}, ${100 * pinkShade}, 0.7)`;
            ctx.beginPath();
            ctx.arc(0, 0, particle.size * 0.2, 0, Math.PI * 2);
            ctx.fill();
        }
        ctx.restore();
    }

    function drawParticles() {
        ctx.clearRect(0, 0, fallCanvas.width, fallCanvas.height);
        const isSnow = isDarkMode();
        particles.forEach(particle => {
            isSnow ? drawSnowflake(particle) : drawCherryBlossom(particle);
        });
    }

    function animateParticles() {
        updateParticles();
        drawParticles();
        requestAnimationFrame(animateParticles);
    }

    const modeObserver = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            if (mutation.attributeName === 'class') {
                initParticles();
            }
        });
    });
    modeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });

    window.addEventListener('resize', function() {
        clearTimeout(this.resizeTimer);
        this.resizeTimer = setTimeout(initParticles, 300);
    });

    initParticles();
    animateParticles();

    // 修复后的运行时间计算逻辑
    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 formatNumber(num) {
        return num < 10 ? "0" + num : num;
    }
    
    function refresh_blog_running_time() {
        // JavaScript月份从0开始，所以7代表8月
        const startDate = new Date(2025, 7, 3, 0, 0, 0);
        const now = new Date();
        const timeDiff = now - startDate;
        
        // 确保时间差不为负
        if (timeDiff < 0) {
            blog_running_days.innerHTML = "0";
            blog_running_hours.innerHTML = "00";
            blog_running_mins.innerHTML = "00";
            blog_running_secs.innerHTML = "00";
            return;
        }
        
        // 精确计算天、时、分、秒
        const totalSeconds = Math.floor(timeDiff / 1000);
        const d = Math.floor(totalSeconds / (60 * 60 * 24));
        const remainingSecondsAfterDays = totalSeconds % (60 * 60 * 24);
        const h = Math.floor(remainingSecondsAfterDays / (60 * 60));
        const remainingSecondsAfterHours = remainingSecondsAfterDays % (60 * 60);
        const m = Math.floor(remainingSecondsAfterHours / 60);
        const s = remainingSecondsAfterHours % 60;
        
        // 更新显示，天数不补零，其他补零
        blog_running_days.innerHTML = d;
        blog_running_hours.innerHTML = formatNumber(h);
        blog_running_mins.innerHTML = formatNumber(m);
        blog_running_secs.innerHTML = formatNumber(s);
    }
    
    // 立即执行一次
    refresh_blog_running_time();
    
    // 每秒更新一次，避免不必要的频繁更新
    if (typeof bottomTimeIntervalHasSet === "undefined") {
        var bottomTimeIntervalHasSet = true;
        setInterval(refresh_blog_running_time, 1000);
    }

    // 左下角彩蛋逻辑
    const AREA_WIDTH = 240;
    const AREA_HEIGHT = 240;
    let clickCount = 0;
    let resetTimer = null;
    const CLICK_TIMEOUT = 2000;
    const AUDIO_URL = 'http://xiayuze.xyz/wp-content/uploads/2025/08/叫.mp3';

    function isInTargetArea(clientX, clientY) {
        const viewportWidth = window.innerWidth;
        const viewportHeight = window.innerHeight;
        return clientX >= 0 && clientX <= AREA_WIDTH && 
               clientY >= (viewportHeight - AREA_HEIGHT) && clientY <= viewportHeight;
    }

    function playAudio() {
        const audio = new Audio(AUDIO_URL);
        audio.volume = 0.7;
        audio.play().catch(error => {
            alert('请先点击页面激活音频权限，然后在左下角连续点击10次');
            audio.play().catch(err => {});
        });
    }

    document.addEventListener('click', function(event) {
        const { clientX, clientY } = event;
        if (isInTargetArea(clientX, clientY)) {
            clickCount++;
            clearTimeout(resetTimer);
            resetTimer = setTimeout(() => clickCount = 0, CLICK_TIMEOUT);
            
            if (clickCount === 10) {
                playAudio();
                clickCount = 0;
            }
        }
    });
});
</script>

三、📦 JSON 配置分享

如果你懒得逐项设置，也可以直接套用我的 JSON 配置（见文末）。不过记得替换头像和页脚信息哦，不然你博客就成了我的分站了嘿嘿 ( •̀ ω •́ )✧

{"argon_theme_color":"#5e72e4","argon_theme_color_hex_preview":"#5e72e4","argon_show_customize_theme_color_picker":true,"argon_enable_immersion_color":"true","argon_darkmode_autoswitch":"system","argon_enable_amoled_dark":"false","argon_card_radius":"15","argon_card_shadow":"default","argon_page_layout":"double","argon_article_list_waterflow":"1","argon_article_list_layout":"1","argon_font":"sans-serif","argon_assets_path":"jsdelivr_gcore","argon_custom_assets_path":"","argon_wp_path":"/","argon_dateformat":"YMD","argon_enable_headroom":"true","argon_toolbar_title":"孔明灯导航站","argon_toolbar_icon":"","argon_toolbar_icon_link":" ","argon_toolbar_blur":"true","argon_banner_title":"XYZ‘s blog","argon_banner_subtitle":"Welcome to my blog! Feel free to look around.","argon_banner_size":"fullscreen","argon_page_background_banner_style":"transparent","argon_show_toolbar_mask":true,"argon_banner_background_url":"","argon_banner_background_color_type":"shape-primary","argon_banner_background_hide_shapes":true,"argon_enable_banner_title_typing_effect":"true","argon_banner_typing_effect_interval":"100","argon_page_background_url":"https://free.picui.cn/free/2025/10/07/68e464339f737.jpg","argon_page_background_dark_url":"https://free.picui.cn/free/2025/10/07/68e46433928fb.jpg","argon_page_background_opacity":"0.8","argon_sidebar_banner_title":"XYZの公告栏","argon_sidebar_banner_subtitle":"用键盘敲出的，不止是功能，更是热爱。","argon_sidebar_auther_name":"XYZ","argon_sidebar_auther_image":"https://free.picui.cn/free/2025/08/03/688f7d4f9884c.jpg","argon_sidebar_author_description":"只是个普通的电脑小白罢了","argon_sidebar_announcement":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>简单刷新提示</title>\n    <style>\n        .fa-refresh {\n            font-size: 1em;\n        }\n    </style>\n</head>\n<body>\n    网页访问过程中大部分的问题可以先试试刷新来解决（点这里→） <i class=\"fa fa-refresh\" aria-hidden=\"true\" onclick=\"location.reload()\"></i>\n</body>\n</html>\n","argon_fab_show_settings_button":"false","argon_fab_show_darkmode_button":"true","argon_fab_show_gotocomment_button":"true","argon_seo_description":"网站描述 (Description Meta 标签)","argon_seo_keywords":"搜索引擎关键词（Keywords Meta 标签）","argon_article_meta":"time|categories|views","argon_show_readingtime":"true","argon_reading_speed":"580","argon_reading_speed_en":"80","argon_reading_speed_code":"10","argon_show_thumbnail_in_banner_in_content_page":"false","argon_first_image_as_thumbnail_by_default":"true","argon_reference_list_title":"参考","argon_show_sharebtn":"true","argon_show_headindex_number":"false","argon_donate_qrcode_url":"https://free.picui.cn/free/2025/09/04/68b911efe3470.png","argon_additional_content_after_post":"文末附加内容","argon_related_post":"category,tag","argon_related_post_sort_orderby":"meta_value_num","argon_related_post_sort_order":"DESC","argon_related_post_limit":"10","argon_article_header_style":"article-header-style-2","argon_outdated_info_time_type":"modifiedtime","argon_outdated_info_days":"30","argon_outdated_info_tip_type":"inpost","argon_outdated_info_tip_content":"本文最后更新于%modify_date_delta% 天前，其中的信息可能已经过时，如有错误请发送邮件到big_fw@foxmail.com","argon_archives_timeline_show_month":"true","argon_archives_timeline_url":"","argon_footer_html":"<!-- 在head部分添加Font Awesome引用 -->\n<link rel=\"stylesheet\" href=\"https://cdnjs.admincdn.com/font-awesome/4.7.0/css/font-awesome.min.css\">\n\n<style>\n/* 核心样式保持不变 */\n.github-badge {\ndisplay: inline-block;\nborder-radius: 4px;\ntext-shadow: none;\nfont-size: 13.1px;\ncolor: #fff;\nline-height: 15px;\nmargin-bottom: 5px;\nfont-family: \"Open Sans\", sans-serif;\n}\n.github-badge .badge-subject {\ndisplay: inline-block;\nbackground-color: #4d4d4d;\npadding: 4px 4px 4px 6px;\nborder-top-left-radius: 4px;\nborder-bottom-left-radius: 4px;\nfont-family: \"Open Sans\", sans-serif;\n}\n.github-badge .badge-value {\ndisplay: inline-block;\npadding: 4px 6px 4px 4px;\nborder-top-right-radius: 4px;\nborder-bottom-right-radius: 4px;\nfont-family: \"Open Sans\", sans-serif;\n}\n.github-badge-big {\ndisplay: inline-block;\nborder-radius: 6px;\ntext-shadow: none;\nfont-size: 14.1px;\ncolor: #fff;\nline-height: 18px;\nmargin-bottom: 7px;\n}\n.github-badge-big .badge-subject {\ndisplay: inline-block;\nbackground-color: #4d4d4d;\npadding: 4px 4px 4px 6px;\nborder-top-left-radius: 4px;\nborder-bottom-left-radius: 4px;\n}\n.github-badge-big .badge-value {\ndisplay: inline-block;\npadding: 4px 6px 4px 4px;\nborder-top-right-radius: 4px;\nborder-bottom-right-radius: 4px;\n}\n/* 颜色类保持不变 */\n.bg-orange {\nbackground-color: #ec8a64 !important;\n}\n.bg-red {\nbackground-color: #cb7574 !important;\n}\n.bg-apricots {\nbackground-color: #f7c280 !important;\n}\n.bg-casein {\nbackground-color: #dfe291 !important;\n}\n.bg-shallots {\nbackground-color: #97c3c6 !important;\n}\n.bg-ogling {\nbackground-color: #95c7e0 !important;\n}\n.bg-haze {\nbackground-color: #9aaec7 !important;\n}\n.bg-mountain-terrier {\nbackground-color: #99a5cd !important;\n}\n.bg-green {\nbackground-color: #7dc06e !important;\n}\n#footer-content {\n    text-align: center;\n    padding: 20px;\n    margin-top: 30px;\n    clear: both;\n}\n\ncanvas#fallCanvas {\n    display: block;\n}\n</style>\n \n<div class=\"github-badge-big\">\n<span class=\"badge-subject\"><i class=\"fa fa-id-card\"></i> 备案号 </span\n><span class=\"badge-value bg-orange\">\n<a href=\"https://beian.miit.gov.cn/\" target=\"_blank\" one-link-mark=\"yes\"\n>陕ICP备33550336号</a\n>\n|\n<a\nhref=\"http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=32072202010255\"\ntarget=\"_blank\"\none-link-mark=\"yes\"\n>备案？不可能有的</a\n></span\n>\n</div>\n<!-- 修改CDN链接 -->\n<div class=\"github-badge-big\">\n        <span class=\"badge-subject\"><i class=\"fa fa-cloud\" aria-hidden=\"true\"></i> CDN</span>\n        <span class=\"badge-value bg-shallots\">\n            <a href=\"https://console.cloud.tencent.com/\" target=\"_blank\" one-link-mark=\"yes\">Tencent</a>\n        </span>\n<!-- Powered图标部分 -->\n<span class=\"badge-subject\"><i class=\"fa fa-wordpress\" aria-hidden=\"true\"></i> Powered</span\n><span class=\"badge-value bg-green\"\n><a href=\"https://cn.wordpress.org/\" target=\"_blank\" one-link-mark=\"yes\"\n>WordPress</a\n></span\n>\n</div>\n<div class=\"github-badge-big\">\n<span class=\"badge-subject\">Copyright </span\n><span class=\"badge-value bg-red\">\n2025-2026\n<i class=\"fa fa-copyright\"></i> Fawang</span\n>\n</div>\n<div class=\"github-badge-big\">\n<span class=\"badge-subject\"><i class=\"fa fa-clock-o\"></i> Running Time</span\n><span class=\"badge-value bg-apricots\"\n><span id=\"blog_running_days\" class=\"odometer odometer-auto-theme\"></span>\ndays\n<span id=\"blog_running_hours\" class=\"odometer odometer-auto-theme\"></span> H\n<span id=\"blog_running_mins\" class=\"odometer odometer-auto-theme\"></span> M\n<span id=\"blog_running_secs\" class=\"odometer odometer-auto-theme\"></span>\nS</span\n>\n</div>\n\n<!-- 其他脚本部分保持不变 -->\n<script type=\"text/javascript\">\ndocument.addEventListener('DOMContentLoaded', function() {\n    // 飘落物动画逻辑\n    const oldSnowCanvas = document.getElementById('snowfall');\n    if (oldSnowCanvas) oldSnowCanvas.remove();\n\n    const fallCanvas = document.createElement('canvas');\n    fallCanvas.id = 'fallCanvas';\n    fallCanvas.style.position = 'fixed';\n    fallCanvas.style.top = '0';\n    fallCanvas.style.left = '0';\n    fallCanvas.style.zIndex = '-1';\n    fallCanvas.style.pointerEvents = 'none';\n    document.body.appendChild(fallCanvas);\n    const ctx = fallCanvas.getContext('2d');\n\n    function resizeFallCanvas() {\n        fallCanvas.width = window.innerWidth;\n        fallCanvas.height = window.innerHeight;\n    }\n    resizeFallCanvas();\n    window.addEventListener('resize', resizeFallCanvas);\n\n    const particleConfig = {\n        baseCount: 120,\n        sizeVariation: 0.8,\n        speedVariation: 0.6,\n        speedFactor: 0.7\n    };\n\n    let particles = [];\n\n    function isDarkMode() {\n        return document.documentElement.classList.contains('darkmode');\n    }\n\n    function getParticleCount() {\n        const screenArea = window.innerWidth * window.innerHeight;\n        const dynamicCount = Math.floor(screenArea / 50000);\n        return particleConfig.baseCount + dynamicCount;\n    }\n\n    function createParticle() {\n        const isSnow = isDarkMode();\n        return {\n            x: Math.random() * fallCanvas.width,\n            y: Math.random() * -fallCanvas.height,\n            size: isSnow ? 2 + (5 * (0.6 + Math.random() * particleConfig.sizeVariation)) : 3 + (6 * (0.8 + Math.random() * particleConfig.sizeVariation)),\n            speed: (isSnow ? 0.8 : 1.2) + (isSnow ? 1.2 : 1.5) * (0.7 + Math.random() * particleConfig.speedVariation) * particleConfig.speedFactor,\n            rotation: Math.random() * Math.PI * 2,\n            rotationSpeed: (Math.random() - 0.5) * 0.02,\n            drift: (Math.random() - 0.5) * 0.2,\n            swing: Math.random() * Math.PI * 2,\n            swingSpeed: 0.008 + Math.random() * 0.02\n        };\n    }\n\n    function initParticles() {\n        particles = [];\n        const count = getParticleCount();\n        for (let i = 0; i < count; i++) {\n            particles.push(createParticle());\n        }\n    }\n\n    function updateParticles() {\n        const isSnow = isDarkMode();\n        particles.forEach((particle, index) => {\n            particle.y += particle.speed;\n            particle.rotation += particle.rotationSpeed;\n            particle.swing += particle.swingSpeed;\n            particle.x += particle.drift + Math.sin(particle.swing) * (isSnow ? 0.4 : 1.2);\n\n            if (particle.y > fallCanvas.height + particle.size || \n                particle.x < -particle.size * 5 || \n                particle.x > fallCanvas.width + particle.size * 5) {\n                particles[index] = createParticle();\n            }\n        });\n    }\n\n    function drawSnowflake(particle) {\n        ctx.save();\n        ctx.translate(particle.x, particle.y);\n        ctx.rotate(particle.rotation);\n        const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, particle.size);\n        gradient.addColorStop(0, 'rgba(255, 255, 255, 0.9)');\n        gradient.addColorStop(0.6, 'rgba(255, 255, 255, 0.6)');\n        gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');\n        ctx.fillStyle = gradient;\n        ctx.beginPath();\n        ctx.arc(0, 0, particle.size, 0, Math.PI * 2);\n        ctx.fill();\n        for (let i = 0; i < 6; i++) {\n            ctx.rotate(Math.PI / 3);\n            ctx.fillRect(0, -particle.size * 0.2, particle.size * 0.8, particle.size * 0.4);\n        }\n        ctx.restore();\n    }\n\n    function drawCherryBlossom(particle) {\n        ctx.save();\n        ctx.translate(particle.x, particle.y);\n        ctx.rotate(particle.rotation);\n        const pinkShade = 0.7 + Math.random() * 0.3;\n        const gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, particle.size);\n        gradient.addColorStop(0, `rgba(255, ${180 * pinkShade}, ${210 * pinkShade}, 0.8)`);\n        gradient.addColorStop(0.7, `rgba(255, ${160 * pinkShade}, ${200 * pinkShade}, 0.5)`);\n        gradient.addColorStop(1, `rgba(255, ${140 * pinkShade}, ${190 * pinkShade}, 0)`);\n        ctx.fillStyle = gradient;\n        ctx.beginPath();\n        ctx.ellipse(0, 0, particle.size, particle.size * 0.7, 0, 0, Math.PI * 2);\n        ctx.fill();\n        if (Math.random() > 0.4) {\n            ctx.fillStyle = `rgba(240, ${120 * pinkShade}, ${100 * pinkShade}, 0.7)`;\n            ctx.beginPath();\n            ctx.arc(0, 0, particle.size * 0.2, 0, Math.PI * 2);\n            ctx.fill();\n        }\n        ctx.restore();\n    }\n\n    function drawParticles() {\n        ctx.clearRect(0, 0, fallCanvas.width, fallCanvas.height);\n        const isSnow = isDarkMode();\n        particles.forEach(particle => {\n            isSnow ? drawSnowflake(particle) : drawCherryBlossom(particle);\n        });\n    }\n\n    function animateParticles() {\n        updateParticles();\n        drawParticles();\n        requestAnimationFrame(animateParticles);\n    }\n\n    const modeObserver = new MutationObserver(mutations => {\n        mutations.forEach(mutation => {\n            if (mutation.attributeName === 'class') {\n                initParticles();\n            }\n        });\n    });\n    modeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });\n\n    window.addEventListener('resize', function() {\n        clearTimeout(this.resizeTimer);\n        this.resizeTimer = setTimeout(initParticles, 300);\n    });\n\n    initParticles();\n    animateParticles();\n\n    // 修复后的运行时间计算逻辑\n    var blog_running_days = document.getElementById(\"blog_running_days\");\n    var blog_running_hours = document.getElementById(\"blog_running_hours\");\n    var blog_running_mins = document.getElementById(\"blog_running_mins\");\n    var blog_running_secs = document.getElementById(\"blog_running_secs\");\n    \n    // 格式化数字，确保至少两位数\n    function formatNumber(num) {\n        return num < 10 ? \"0\" + num : num;\n    }\n    \n    function refresh_blog_running_time() {\n        // JavaScript月份从0开始，所以7代表8月\n        const startDate = new Date(2025, 7, 3, 0, 0, 0);\n        const now = new Date();\n        const timeDiff = now - startDate;\n        \n        // 确保时间差不为负\n        if (timeDiff < 0) {\n            blog_running_days.innerHTML = \"0\";\n            blog_running_hours.innerHTML = \"00\";\n            blog_running_mins.innerHTML = \"00\";\n            blog_running_secs.innerHTML = \"00\";\n            return;\n        }\n        \n        // 精确计算天、时、分、秒\n        const totalSeconds = Math.floor(timeDiff / 1000);\n        const d = Math.floor(totalSeconds / (60 * 60 * 24));\n        const remainingSecondsAfterDays = totalSeconds % (60 * 60 * 24);\n        const h = Math.floor(remainingSecondsAfterDays / (60 * 60));\n        const remainingSecondsAfterHours = remainingSecondsAfterDays % (60 * 60);\n        const m = Math.floor(remainingSecondsAfterHours / 60);\n        const s = remainingSecondsAfterHours % 60;\n        \n        // 更新显示，天数不补零，其他补零\n        blog_running_days.innerHTML = d;\n        blog_running_hours.innerHTML = formatNumber(h);\n        blog_running_mins.innerHTML = formatNumber(m);\n        blog_running_secs.innerHTML = formatNumber(s);\n    }\n    \n    // 立即执行一次\n    refresh_blog_running_time();\n    \n    // 每秒更新一次\n    if (typeof bottomTimeIntervalHasSet === \"undefined\") {\n        var bottomTimeIntervalHasSet = true;\n        setInterval(refresh_blog_running_time, 1000);\n    }\n\n    // 左下角彩蛋逻辑\n    const AREA_WIDTH = 240;\n    const AREA_HEIGHT = 240;\n    let clickCount = 0;\n    let resetTimer = null;\n    const CLICK_TIMEOUT = 2000;\n    const AUDIO_URL = 'http://xiayuze.xyz/wp-content/uploads/2025/08/叫.mp3';\n\n    function isInTargetArea(clientX, clientY) {\n        const viewportWidth = window.innerWidth;\n        const viewportHeight = window.innerHeight;\n        return clientX >= 0 && clientX <= AREA_WIDTH && \n               clientY >= (viewportHeight - AREA_HEIGHT) && clientY <= viewportHeight;\n    }\n\n    function playAudio() {\n        const audio = new Audio(AUDIO_URL);\n        audio.volume = 0.7;\n        audio.play().catch(error => {\n            alert('请先点击页面激活音频权限，然后在左下角连续点击10次');\n            audio.play().catch(err => {});\n        });\n    }\n\n    document.addEventListener('click', function(event) {\n        const { clientX, clientY } = event;\n        if (isInTargetArea(clientX, clientY)) {\n            clickCount++;\n            clearTimeout(resetTimer);\n            resetTimer = setTimeout(() => clickCount = 0, CLICK_TIMEOUT);\n            \n            if (clickCount === 10) {\n                playAudio();\n                clickCount = 0;\n            }\n        }\n    });\n});\n</script>\n\n<!--live2d--> \n<script src=\"/wp-content/themes/argon/argon/live2d/TweenLite.js\"></script> \n<script src=\"/wp-content/themes/argon/argon/live2d/live2dcubismcore.min.js\"></script>\n<script src=\"/wp-content/themes/argon/argon/live2d/pixi.min.js\"></script> \n<script src=\"/wp-content/themes/argon/argon/live2d/cubism4.min.js\"></script> \n<link href=\"/wp-content/themes/argon/argon/live2d/pio.css\" rel=\"stylesheet\" type=\"text/css\"/> \n<script src=\"/wp-content/themes/argon/argon/live2d/pio.js\"></script> \n<script src=\"/wp-content/themes/argon/argon/live2d/pio_sdk4.js\"></script> \n<script src=\"/wp-content/themes/argon/argon/live2d/load.js\"></script>","argon_enable_code_highlight":"true","argon_code_theme":"vs2015","argon_code_highlight_hide_linenumber":"true","argon_code_highlight_break_line":"false","argon_code_highlight_transparent_linenumber":"false","argon_math_render":"none","argon_mathjax_cdn_url":"//jsd.admincdn.com/npm/mathjax@3/es5/tex-chtml-full.js","argon_mathjax_v2_cdn_url":"//jsd.admincdn.com/npm/mathjax@2.7.5/MathJax.js?config=TeX-AMS_HTML","argon_katex_cdn_url":"//jsd.admincdn.com/npm/katex@0.11.1/dist/","argon_enable_lazyload":"true","argon_lazyload_threshold":"800","argon_lazyload_effect":"fadeIn","argon_lazyload_loading_style":"1","argon_enable_fancybox":"true","argon_enable_zoomify":"false","argon_zoomify_duration":"200","argon_zoomify_easing":"cubic-bezier(0.4,0,0,1)","argon_zoomify_scale":"0.9","argon_enable_pangu":"article","argon_custom_html_head":"<script charset=\"UTF-8\" id=\"LA_COLLECT\" src=\"//sdk.51.la/js-sdk-pro.min.js\"></script>\n<script>LA.init({id:\"3NLPXoRJNoOu6Ot7\",ck:\"3NLPXoRJNoOu6Ot7\",autoTrack:true})</script>\n<script defer src=\"https://cloud.umami.is/script.js\" data-website-id=\"52b0f2ee-fd95-45c7-8478-46ba1af7b1a0\"></script>","argon_custom_html_foot":"","argon_enable_smoothscroll_type":"1_pulse","argon_enable_into_article_animation":"true","argon_disable_pjax_animation":"false","argon_comment_pagination_type":"page","argon_comment_emotion_keyboard":"true","argon_hide_name_email_site_input":"false","argon_comment_need_captcha":"false","argon_get_captcha_by_ajax":"false","argon_comment_allow_markdown":"true","argon_comment_allow_editing":"true","argon_comment_allow_privatemode":"true","argon_comment_allow_mailnotice":"true","argon_comment_mailnotice_checkbox_checked":true,"argon_comment_enable_qq_avatar":"true","argon_comment_avatar_vcenter":"false","argon_who_can_visit_comment_edit_history":"commentsender","argon_enable_comment_pinning":"true","argon_enable_comment_upvote":"true","argon_comment_ua":"platform,browser","argon_show_comment_parent_info":"true","argon_fold_long_comments":"true","argon_gravatar_cdn":"","argon_text_gravatar":"true","argon_enable_search_filters":"true","argon_search_filters_type":"*post,*page,shuoshuo","argon_pjax_disabled":"false","argon_hide_categories":"","argon_enable_login_css":"true","argon_home_show_shuoshuo":"true","argon_fold_long_shuoshuo":"true","argon_enable_timezone_fix":"false","argon_hide_shortcode_in_preview":"true","argon_trim_words_count":"0","argon_enable_mobile_scale":"false","argon_disable_googlefont":"false","argon_disable_codeblock_style":"false","argon_update_source":"github","argon_hide_footer_author":"true"}

二. 🧱左侧个人栏组件

一. 🎯年度倒计时显示

📍操作路径：WordPress 后台 → 外观 → 自定义 → 小工具 → 左侧栏
🧪使用方法：以简码复制粘贴以下内容即可

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

二. ⏰实时时间卡片

📍操作路径：WordPress 后台 → 外观 → 自定义 → 小工具 → 左侧栏
🧪使用方法：以自定义 HTML 复制粘贴以下内容即可

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>时间卡片</title>
    <style>
        /* 引入自定义字体 */
        @font-face {
            font-family: 'CustomFont';
            src: url('https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/fonts/13.woff2') format('woff2');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        /* 时间卡片基础样式：固定尺寸、布局、过渡效果 */
        .small-time-card {
            width: 220px;
            height: 80px;
            padding: 10px;
            border-radius: 15px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            font-family: 'CustomFont', sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            transition: all 0.3s ease-out;
            /* 默认模式：浅色背景与边框 */
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.4);
        }

        /* 暗色模式样式：body.dark-mode 类触发 */
        body.dark-mode .small-time-card {
            background: rgba(30, 30, 30, 0.2);
            border: 1px solid rgba(60, 60, 60, 0.4);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        /* 默认模式：文字颜色与阴影 */
        .time-display,
        .date-display {
            color: #333;
            text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
        }

        /* 暗色模式：文字颜色与阴影（body.dark-mode 触发） */
        body.dark-mode .time-display,
        body.dark-mode .date-display {
            color: #f0f0f0;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        }

        /* 时间显示样式：固定字号、居中，hover时放大与调整字间距 */
        .time-display {
            font-size: 20.8px;
            font-weight: 600;
            text-align: center;
            margin-bottom: 2px;
            letter-spacing: 0.65px;
            width: 100%;
            transition: all 0.3s ease-out;
            transform-origin: center;
        }

        .small-time-card:hover .time-display {
            font-size: 22px;
            letter-spacing: 0.7px;
            transform: scale(1.05);
        }

        /* 日期显示样式：固定字号、居中，hover时位移与透明度变化 */
        .date-display {
            font-size: 10.4px;
            text-align: center;
            width: 100%;
            transition: all 0.3s ease-out;
        }

        .small-time-card:hover .date-display {
            transform: translateY(1px);
            opacity: 0.9;
        }

        /* 防止文字溢出：强制不换行，溢出显示省略号 */
        .time-display, .date-display {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="small-time-card">
        <div class="time-display" id="timeDisplay">00:00:00</div>
        <div class="date-display" id="dateDisplay">2025/08/07 周四</div>
    </div>

    <script>
        // 补零函数：将单个数字（0-9）转为两位数（00-09），兼容所有浏览器
        function addZero(num) {
            num = parseInt(num, 10);
            return num < 10 ? '0' + num : num.toString();
        }

        // 主题同步函数：优先localStorage存储，其次系统深色偏好
        function syncTheme() {
            try {
                const isDark = localStorage.getItem('theme') === 'dark' || 
                               (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches);
                document.body.classList.toggle('dark-mode', isDark); // 切换body的暗色模式类
            } catch (e) {
                console.error('主题初始化错误:', e);
            }
        }

        // 时间更新函数：实时计算并更新当前时间与日期
        function updateTime() {
            try {
                const now = new Date();
                
                // 计算时分秒（补零处理）
                const hours = addZero(now.getHours());
                const minutes = addZero(now.getMinutes());
                const seconds = addZero(now.getSeconds());
                
                // 计算年月日与星期（补零处理，星期映射为中文）
                const year = now.getFullYear();
                const month = addZero(now.getMonth() + 1); // 月份从0开始，需+1
                const date = addZero(now.getDate());
                const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
                const weekday = weekdays[now.getDay()];
                
                // 更新DOM显示
                document.getElementById('timeDisplay').textContent = `${hours}:${minutes}:${seconds}`;
                document.getElementById('dateDisplay').textContent = `${year}/${month}/${date} 周${weekday}`;
            } catch (e) {
                console.error('时间更新错误:', e);
            }
            
            // 每秒递归调用，确保时间实时更新
            setTimeout(updateTime, 1000);
        }

        // 初始化函数：整合主题初始化、事件监听、时间更新启动
        function init() {
            // 检查关键DOM元素是否存在，不存在则报错
            if (!document.getElementById('timeDisplay') || !document.getElementById('dateDisplay')) {
                console.error('未找到时间或日期显示元素');
                return;
            }
            
            syncTheme(); // 初始化主题
            // 监听localStorage变化（跨页面同步主题）
            window.addEventListener('storage', (e) => {
                if (e.key === 'theme') syncTheme();
            });
            updateTime(); // 启动时间更新
        }

        // 页面加载完成后初始化：优先判断DOM是否就绪，否则监听加载事件
        if (document.readyState === 'complete') {
            init();
        } else {
            document.addEventListener('DOMContentLoaded', init);
        }
    </script>
</body>
</html>

三. 🌦️天气卡片

天气卡片我是以插件的方式完成的，下载地址：https://wwpc.lanzoub.com/iVOBo37tik8b
用短代码[ weather_card ](删掉短代码左右的空格)来调用（记得自己改城市默认位置，有能力也可以改成根据ip自动切换城市）

四. 🐍贪吃蛇卡片

📍操作路径：WordPress 后台 → 外观 → 自定义 → 小工具 → 左侧栏
🧪使用方法：以自定义 HTML 复制粘贴以下内容即可

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!-- 游戏容器包装器，用于对齐提示文字 -->
    <div style="display: inline-block; text-align: center;">
        <div id="snake-container" class="snake-container" style="
            width: 220px;
            height: 220px;
            padding: 10px;
            border-radius: 15px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            transition: all 0.1s ease-out;
            position: relative;
            z-index: 1;
            overflow: hidden;
            cursor: pointer;
            /* 默认样式 */
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.4);
        ">
            <div id="snake-game" style="
                display: grid;
                grid-template-columns: repeat(10, 1fr);
                gap: 1px;
                width: 198px;
                height: 198px;
                position: relative;
            "></div>
        </div>
        
        <!-- 底部提示文字，与游戏窗口底部对齐 -->
        <div id="game-info-text" style="
            text-align: center;
            font-size: 12px;
            color: #666;
            margin-top: 8px;
            user-select: none;
            width: 220px; /* 与游戏窗口宽度一致 */
            box-sizing: border-box;
            padding: 0 10px; /* 与游戏窗口内边距一致 */
        ">
            点击以开始游戏（WASD控制移动）
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 游戏配置
            let snakeColor, headColor;
            const config = {
                gridSize: 10,
                cellSize: 19.8,
                speed: 300, // 较慢的移动速度
                animationDuration: 50,
                colors: {
                    snake: '#5e72e4',
                    head: '#4a5fc1',
                    food: '#ff0000', // 红色食物
                    empty: 'transparent',
                    border: 'transparent',
                    gameOver: '#FF9800',
                    win: '#FFEB3B',
                    modeIndicator: 'rgba(255, 255, 255, 0.3)'
                }
            };

            // 游戏状态
            let gameState = {
                snake: [{x: 5, y: 5}],
                direction: {x: 1, y: 0},
                nextDirection: {x: 1, y: 0},
                food: null,
                isGameOver: false,
                animationFrame: null,
                lastMoveTime: 0,
                isAIControl: true
            };

            // -------------------------- 核心修复：主题实时切换逻辑 --------------------------
            // 1. 主题同步：基于body.dark-mode类 + localStorage
            function syncTheme() {
                try {
                    // 主题判断优先级：localStorage > 系统偏好
                    const isDark = localStorage.getItem('theme') === 'dark' || 
                                   (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches);
                    // 切换body的dark-mode类（核心控制开关）
                    document.body.classList.toggle('dark-mode', isDark);
                    // 立即应用样式（确保同步后样式更新）
                    applyThemeStyles();
                } catch (e) {
                    console.error('主题同步错误:', e);
                }
            }

            // 2. 应用主题样式（覆盖所有视觉元素，确保无遗漏）
            function applyThemeStyles() {
                const container = document.getElementById('snake-container');
                const infoText = document.getElementById('game-info-text');
                const isDarkMode = document.body.classList.contains('dark-mode');

                // 容器样式适配当前主题
                if (isDarkMode) {
                    container.style.background = 'rgba(30, 30, 30, 0.2)';
                    container.style.border = '1px solid rgba(60, 60, 60, 0.4)';
                    container.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.3)';
                    snakeColor = '#6a80f5';
                    headColor = '#5a70e5';
                    infoText.style.color = '#aaa';
                    config.colors.modeIndicator = 'rgba(255, 255, 255, 0.2)'; // 暗色模式下指示器适配
                } else {
                    container.style.background = 'rgba(255, 255, 255, 0.2)';
                    container.style.border = '1px solid rgba(255, 255, 255, 0.4)';
                    container.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)';
                    snakeColor = '#5e72e4';
                    headColor = '#4a5fc1';
                    infoText.style.color = '#666';
                    config.colors.modeIndicator = 'rgba(0, 0, 0, 0.1)'; // 亮色模式下指示器适配
                }

                // 更新蛇的颜色配置
                config.colors.snake = snakeColor;
                config.colors.head = headColor;
                // 重新绘制蛇、食物（确保主题切换后所有元素实时更新）
                drawSnake();
                if (gameState.food) {
                    updateCell(gameState.food.x, gameState.food.y, config.colors.food);
                }
            }

            // 3. 监听页面内body类变化（关键修复：实时响应手动添加/移除dark-mode类）
            const bodyObserver = new MutationObserver((mutations) => {
                mutations.forEach(mutation => {
                    // 当body的class属性变化时（如点击主题切换按钮），重新应用样式
                    if (mutation.attributeName === 'class') {
                        applyThemeStyles();
                    }
                });
            });
            // 启动监听：观察body的class属性变化
            bodyObserver.observe(document.body, { attributes: true });

            // 4. 监听跨页面主题变化：localStorage中theme字段变更时同步
            window.addEventListener('storage', (e) => {
                if (e.key === 'theme') {
                    syncTheme(); // 跨页面修改localStorage时，同步类并应用样式
                }
            });
            // -----------------------------------------------------------------------------

            // 创建网格 - 确保所有单元格正确初始化
            function createGrid() {
                const gameContainer = document.getElementById('snake-game');
                gameContainer.innerHTML = '';
                
                for (let y = 0; y < config.gridSize; y++) {
                    for (let x = 0; x < config.gridSize; x++) {
                        const cell = document.createElement('div');
                        cell.id = `cell-${x}-${y}`;
                        cell.style.width = `${config.cellSize}px`;
                        cell.style.height = `${config.cellSize}px`;
                        cell.style.backgroundColor = config.colors.empty;
                        cell.style.border = `1px solid ${config.colors.border}`;
                        cell.style.boxSizing = 'border-box';
                        cell.style.borderRadius = '3px';
                        gameContainer.appendChild(cell);
                    }
                }
            }

            // 生成食物 - 确保主题切换后食物样式不变
            function generateFood() {
                if (!document.getElementById('snake-game')) return;
                
                let newFood;
                let attempts = 0;
                const maxAttempts = 100;
                
                do {
                    newFood = {
                        x: Math.floor(Math.random() * config.gridSize),
                        y: Math.floor(Math.random() * config.gridSize)
                    };
                    attempts++;
                    
                    if (attempts >= maxAttempts) {
                        outerLoop:
                        for (let y = 0; y < config.gridSize; y++) {
                            for (let x = 0; x < config.gridSize; x++) {
                                const isEmpty = !gameState.snake.some(segment => segment.x === x && segment.y === y);
                                if (isEmpty) {
                                    newFood = {x, y};
                                    break outerLoop;
                                }
                            }
                        }
                        break;
                    }
                } while (gameState.snake.some(segment => segment.x === newFood.x && segment.y === newFood.y));
                
                gameState.food = newFood;
                const cell = document.getElementById(`cell-${newFood.x}-${newFood.y}`);
                if (cell) {
                    cell.style.transition = 'none';
                    cell.style.backgroundColor = config.colors.food;
                    cell.style.borderRadius = '50%';
                    cell.style.setProperty('background-color', config.colors.food, 'important');
                }
            }

            // 更新单元格颜色 - 确保主题切换时单元格实时响应
            function updateCell(x, y, color) {
                const cell = document.getElementById(`cell-${x}-${y}`);
                if (cell) {
                    if (color === config.colors.food) {
                        cell.style.borderRadius = '50%';
                    } else {
                        cell.style.borderRadius = '3px';
                    }
                    cell.style.transition = `background-color ${config.animationDuration}ms linear`;
                    cell.style.setProperty('background-color', color, color === config.colors.food ? 'important' : '');
                }
            }

            // 绘制蛇 - 确保主题切换后蛇身颜色实时更新
            function drawSnake() {
                const cells = document.querySelectorAll('#snake-game > div');
                cells.forEach(cell => {
                    const match = cell.id.match(/cell-(\d+)-(\d+)/);
                    if (match) {
                        const x = parseInt(match[1]);
                        const y = parseInt(match[2]);
                        const isFood = gameState.food && x === gameState.food.x && y === gameState.food.y;
                        if (!isFood) {
                            cell.style.backgroundColor = config.colors.empty;
                        }
                    }
                });
                
                gameState.snake.forEach((segment, index) => {
                    let color = index === 0 ? config.colors.head : 
                               (index % 2 === 0 ? config.colors.snake : shadeColor(config.colors.snake, -5));
                    updateCell(segment.x, segment.y, color);
                });
            }

            // 调整颜色明暗度 - 确保主题切换后蛇身渐变正常
            function shadeColor(color, percent) {
                if (!/^#([0-9A-F]{3}){1,2}$/i.test(color)) return color;
                
                let R = parseInt(color.substring(1, 3), 16);
                let G = parseInt(color.substring(3, 5), 16);
                let B = parseInt(color.substring(5, 7), 16);

                R = Math.round(R * (100 + percent) / 100);
                G = Math.round(G * (100 + percent) / 100);
                B = Math.round(B * (100 + percent) / 100);

                R = Math.min(255, Math.max(0, R));
                G = Math.min(255, Math.max(0, G));
                B = Math.min(255, Math.max(0, B));

                const RR = R.toString(16).padStart(2, '0');
                const GG = G.toString(16).padStart(2, '0');
                const BB = B.toString(16).padStart(2, '0');

                return `#${RR}${GG}${BB}`;
            }

            // 移动蛇 - 核心游戏逻辑不变
            function moveSnake() {
                if (gameState.isGameOver) return;
                
                gameState.direction = gameState.nextDirection;
                const head = { ...gameState.snake[0] };
                head.x += gameState.direction.x;
                head.y += gameState.direction.y;
                
                // 穿墙逻辑
                if (head.x < 0) head.x = config.gridSize - 1;
                if (head.x >= config.gridSize) head.x = 0;
                if (head.y < 0) head.y = config.gridSize - 1;
                if (head.y >= config.gridSize) head.y = 0;
                
                // 碰撞检测
                if (gameState.snake.some(segment => segment.x === head.x && segment.y === head.y)) {
                    gameOver();
                    return;
                }
                
                // 添加新头部
                gameState.snake.unshift(head);
                let ateFood = false;
                
                // 检测是否吃到食物
                if (gameState.food && head.x === gameState.food.x && head.y === gameState.food.y) {
                    ateFood = true;
                    generateFood();
                    
                    // 检查胜利条件
                    if (gameState.snake.length === config.gridSize * config.gridSize) {
                        gameWin();
                        return;
                    }
                } else {
                    // 移除尾部
                    gameState.snake.pop();
                }
                
                drawSnake();
            }

            // 游戏结束 - 样式适配主题
            function gameOver() {
                gameState.isGameOver = true;
                if (gameState.animationFrame) cancelAnimationFrame(gameState.animationFrame);
                
                let flashCount = 0;
                const flashInterval = setInterval(() => {
                    gameState.snake.forEach((segment, index) => {
                        const color = flashCount % 2 === 0 ? config.colors.gameOver : 
                                      (index === 0 ? config.colors.head : config.colors.snake);
                        updateCell(segment.x, segment.y, color);
                    });
                    flashCount++;
                    
                    if (flashCount >= 6) {
                        clearInterval(flashInterval);
                        setTimeout(restartGame, 1000);
                    }
                }, 200);
            }

            // 游戏胜利 - 样式适配主题
            function gameWin() {
                gameState.isGameOver = true;
                if (gameState.animationFrame) cancelAnimationFrame(gameState.animationFrame);
                
                let flashCount = 0;
                const flashInterval = setInterval(() => {
                    gameState.snake.forEach((segment) => {
                        updateCell(segment.x, segment.y, 
                                  flashCount % 2 === 0 ? config.colors.win : config.colors.snake);
                    });
                    flashCount++;
                    
                    if (flashCount >= 8) {
                        clearInterval(flashInterval);
                        setTimeout(restartGame, 1000);
                    }
                }, 150);
            }

            // 重启游戏 - 确保主题样式继承
            function restartGame() {
                gameState = {
                    snake: [{x: 5, y: 5}],
                    direction: {x: 1, y: 0},
                    nextDirection: {x: 1, y: 0},
                    food: null,
                    isGameOver: false,
                    animationFrame: null,
                    lastMoveTime: 0,
                    isAIControl: true
                };
                
                createGrid();
                generateFood();
                drawSnake(); // 重启时使用当前主题样式
                gameState.animationFrame = requestAnimationFrame(gameLoop);
            }

            // AI控制 - 核心逻辑不变
            function aiControl() {
                if (gameState.isGameOver || !gameState.food) return;
                
                const head = gameState.snake[0];
                const food = gameState.food;
                
                let dx = food.x - head.x;
                let dy = food.y - head.y;
                
                // 考虑穿墙的最短路径
                if (Math.abs(dx) > config.gridSize / 2) dx = dx > 0 ? dx - config.gridSize : dx + config.gridSize;
                if (Math.abs(dy) > config.gridSize / 2) dy = dy > 0 ? dy - config.gridSize : dy + config.gridSize;
                
                // 确定优先方向
                let desiredDirection = Math.abs(dx) > Math.abs(dy) 
                    ? (dx > 0 ? {x: 1, y: 0} : {x: -1, y: 0}) 
                    : (dy > 0 ? {x: 0, y: 1} : {x: 0, y: -1});
                
                // 碰撞检测
                const nextHead = {x: head.x + desiredDirection.x, y: head.y + desiredDirection.y};
                let checkX = nextHead.x < 0 ? config.gridSize - 1 : nextHead.x >= config.gridSize ? 0 : nextHead.x;
                let checkY = nextHead.y < 0 ? config.gridSize - 1 : nextHead.y >= config.gridSize ? 0 : nextHead.y;
                
                if (gameState.snake.some(segment => segment.x === checkX && segment.y === checkY)) {
                    // 尝试其他安全方向
                    const possibleDirections = [
                        {x: 1, y: 0}, {x: -1, y: 0}, {x: 0, y: 1}, {x: 0, y: -1}
                    ].filter(dir => !(dir.x === -gameState.direction.x && dir.y === -gameState.direction.y));
                    
                    for (const dir of possibleDirections) {
                        const testHead = {x: head.x + dir.x, y: head.y + dir.y};
                        let testX = testHead.x < 0 ? config.gridSize - 1 : testHead.x >= config.gridSize ? 0 : testHead.x;
                        let testY = testHead.y < 0 ? config.gridSize - 1 : testHead.y >= config.gridSize ? 0 : testHead.y;
                        
                        if (!gameState.snake.some(segment => segment.x === testX && segment.y === testY)) {
                            desiredDirection = dir;
                            break;
                        }
                    }
                }
                
                gameState.nextDirection = desiredDirection;
            }

            // 处理用户键盘输入 - 核心逻辑不变
            function handleKeyPress(e) {
                if (gameState.isAIControl || gameState.isGameOver) return;
                
                e.preventDefault();
                const key = e.key.toLowerCase();
                const currentDir = gameState.direction;
                
                switch(key) {
                    case 'w': case 'arrowup':
                        if (currentDir.y !== 1) gameState.nextDirection = {x: 0, y: -1};
                        break;
                    case 's': case 'arrowdown':
                        if (currentDir.y !== -1) gameState.nextDirection = {x: 0, y: 1};
                        break;
                    case 'a': case 'arrowleft':
                        if (currentDir.x !== 1) gameState.nextDirection = {x: -1, y: 0};
                        break;
                    case 'd': case 'arrowright':
                        if (currentDir.x !== -1) gameState.nextDirection = {x: 1, y: 0};
                        break;
                }
            }

            // 切换控制模式 - 样式适配主题
            function toggleControlMode() {
                if (gameState.isGameOver) return;
                
                gameState.isAIControl = !gameState.isAIControl;
                const container = document.getElementById('snake-container');
                const originalBorder = container.style.border;
                
                // 使用当前主题的指示器颜色
                container.style.border = `2px solid ${config.colors.modeIndicator}`;
                setTimeout(() => container.style.border = originalBorder, 100);
            }

            // 游戏主循环 - 核心逻辑不变
            function gameLoop(timestamp) {
                if (!gameState.lastMoveTime) gameState.lastMoveTime = timestamp;
                
                if (timestamp - gameState.lastMoveTime > config.speed) {
                    if (gameState.isAIControl) aiControl();
                    moveSnake();
                    gameState.lastMoveTime = timestamp;
                }
                
                if (!gameState.isGameOver) {
                    gameState.animationFrame = requestAnimationFrame(gameLoop);
                }
            }

            // 初始化游戏 - 先同步主题再初始化界面
            function initGame() {
                syncTheme(); // 初始化时同步主题（确保初始样式正确）
                createGrid();
                generateFood();
                drawSnake();
                // 绑定事件
                document.getElementById('snake-container').addEventListener('click', toggleControlMode);
                document.addEventListener('keydown', handleKeyPress, { passive: false });
                // 启动游戏循环
                gameState.animationFrame = requestAnimationFrame(gameLoop);
            }

            // 启动游戏
            initGame();
        });
    </script>
</body>
</html>

五. 📅日历卡片

📍操作路径：WordPress 后台 → 外观 → 自定义 → 小工具 → 站点概况额外内容
🧪使用方法：以自定义HTML复制粘贴以下内容即可

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日历</title>
    <link rel="stylesheet" href="https://cdnjs.admincdn.com/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        :root {
            /* 主题变量保持不变，仅调换应用场景 */
            --light-surface: rgba(45, 45, 45, 0.3); 
            --light-text: #fff; 
            --dark-surface: rgba(255, 255, 255, 0.3); 
            --dark-text: #000; 
            
            --radius: 12px; 
            --shadow-light: 0 4px 20px rgba(0, 0, 0, 0.1); 
            --shadow-dark: 0 4px 20px rgba(0, 0, 0, 0.05); 
        }
        .calendar {
            /* 默认使用原夜间主题样式 */
            width: 220px;
            padding: 12px;
            background: var(--dark-surface);
            color: var(--dark-text);
            border-radius: var(--radius);
            box-shadow: var(--shadow-dark);
            font-family: 'Segoe UI', sans-serif;
            backdrop-filter: blur(15px);
        }
        body.dark-mode .calendar {
            /* dark-mode 类下使用原白天主题样式 */
            background: var(--light-surface);
            color: var(--light-text);
            box-shadow: var(--shadow-light);
            backdrop-filter: blur(15px);
        }
        .calendar-header {
            display: flex;
            justify-content: space-between;
            padding: 5px 0;
            font-size: 14px;
            font-weight: 600;
            /* 默认使用原夜间主题边框 */
            border-bottom: 1px solid rgba(0, 0, 0, 0.03);
        }
        body.dark-mode .calendar-header { 
            /* dark-mode 类下使用原白天主题边框 */
            border-bottom-color: rgba(255, 255, 255, 0.03);
        }
        .calendar-week {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            margin: 8px 0;
            font-size: 10px; 
            /* 默认使用原夜间主题文字颜色 */
            color: rgba(0, 0, 0, 0.25);
        }
        body.dark-mode .calendar-week { 
            /* dark-mode 类下使用原白天主题文字颜色 */
            color: rgba(255, 255, 255, 0.4);
        }
        .calendar-days {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 3px;
        }
        .calendar-days div {
            width: 26px;
            height: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.2s ease;
        }
        .calendar-days div:hover { 
            /* 默认使用原夜间主题hover效果 */
            background: rgba(0, 0, 0, 0.03);
        }
        body.dark-mode .calendar-days div:hover { 
            /* dark-mode 类下使用原白天主题hover效果 */
            background: rgba(255, 255, 255, 0.05);
        }
        .curr-date {
            background: #0066cc !important;
            color: #fff !important;
            box-shadow: 0 2px 8px rgba(0, 102, 204, 0.4);
        }
        .month-list {
            position: absolute;
            top: 40px;
            left: 50%;
            transform: translateX(-50%) scale(0.98);
            width: 200px;
            padding: 8px;
            /* 默认使用原夜间主题样式 */
            background: var(--dark-surface);
            border-radius: var(--radius);
            box-shadow: var(--shadow-dark);
            grid-template-columns: repeat(3, 1fr);
            gap: 5px;
            display: grid;
            visibility: hidden;
            opacity: 0;
            transition: all 0.2s ease;
            z-index: 999;
            backdrop-filter: blur(15px);
        }
        body.dark-mode .month-list { 
            /* dark-mode 类下使用原白天主题样式 */
            background: var(--light-surface); 
            box-shadow: var(--shadow-light);
            backdrop-filter: blur(15px);
        }
        .month-list.show {
            transform: translateX(-50%) scale(1);
            visibility: visible;
            opacity: 1;
        }
        .month-list div {
            padding: 4px 0;
            text-align: center;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.2s ease;
        }
        .month-list div:hover { 
            /* 默认使用原夜间主题hover效果 */
            background: rgba(0, 0, 0, 0.03);
        }
        body.dark-mode .month-list div:hover { 
            /* dark-mode 类下使用原白天主题hover效果 */
            background: rgba(255, 255, 255, 0.05);
        }
        .month-list div.active {
            /* 默认使用原夜间主题激活样式 */
            background: rgba(0, 102, 204, 0.06);
            color: #0066cc; 
            font-weight: 600;
        }
        body.dark-mode .month-list div.active {
            /* dark-mode 类下使用原白天主题激活样式 */
            background: rgba(255, 255, 255, 0.08);
            color: #66b3ff; 
        }
    </style>
</head>
<body>
<div class="calendar" id="calendar">
    <div class="calendar-header">
        <span class="month-picker" id="month-picker">8月</span>
        <div class="year-picker">
            <span class="year-change" id="prev-year"><i class="fas fa-chevron-left"></i></span>
            <span id="year">2025</span>
            <span class="year-change" id="next-year"><i class="fas fa-chevron-right"></i></span>
        </div>
    </div>
    <div class="calendar-week">
        <div>日</div><div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div>
    </div>
    <div class="calendar-days"></div>
    <div class="month-list" id="month-list"></div>
</div>

<script>
    // 主题同步逻辑（保持逻辑不变，样式已调换）
    function syncTheme() {
        const isDark = localStorage.getItem('theme') === 'dark' || document.body.classList.contains('dark-mode');
        document.body.classList.toggle('dark-mode', isDark);
    }
    syncTheme();
    window.addEventListener('storage', (e) => { if (e.key === 'theme') syncTheme(); });

    // 日历核心逻辑（保持不变）
    const monthNames = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
    const calendar = document.getElementById('calendar');
    const monthPicker = document.getElementById('month-picker');
    const yearEl = document.getElementById('year');
    const daysEl = document.querySelector('.calendar-days');
    const monthList = document.getElementById('month-list');

    function isLeap(year) {
        return (year%4===0 && year%100!==0) || year%400===0;
    }

    function renderCalendar(month = 7, year = 2025) {
        daysEl.innerHTML = '';
        monthPicker.textContent = monthNames[month];
        yearEl.textContent = year;
        
        const daysInMonth = [31, isLeap(year)?29:28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
        const firstDay = new Date(year, month, 1).getDay();
        
        // 动态标记今天
        const today = new Date();
        const isCurrentMonth = year === today.getFullYear() && month === today.getMonth();
        
        for (let i=0; i<42; i++) { 
            const div = document.createElement('div');
            const date = i - firstDay + 1;
            if (date > 0 && date <= daysInMonth) {
                div.textContent = date;
                if (isCurrentMonth && date === today.getDate()) {
                    div.classList.add('curr-date');
                }
            }
            daysEl.appendChild(div);
        }
    }

    // 月份选择逻辑（保持不变）
    function renderMonthList() {
        monthList.innerHTML = '';
        const currentMonth = monthNames.indexOf(monthPicker.textContent);
        
        monthNames.forEach((name, idx) => {
            const div = document.createElement('div');
            div.textContent = name;
            if (idx === currentMonth) {
                div.classList.add('active');
            }
            div.onclick = () => {
                monthList.classList.remove('show');
                renderCalendar(idx, +yearEl.textContent);
            };
            monthList.appendChild(div);
        });
    }
    renderMonthList();

    monthPicker.onclick = (e) => {
        e.stopPropagation();
        monthList.classList.toggle('show');
    };
    document.addEventListener('click', () => monthList.classList.remove('show'));

    // 年份切换（保持不变）
    document.getElementById('prev-year').onclick = () => {
        renderCalendar(monthNames.indexOf(monthPicker.textContent), +yearEl.textContent - 1);
    };
    document.getElementById('next-year').onclick = () => {
        renderCalendar(monthNames.indexOf(monthPicker.textContent), +yearEl.textContent + 1);
    };

    // 初始渲染当前月份
    const today = new Date();
    renderCalendar(today.getMonth(), today.getFullYear());
</script>
</body>
</html>

三. 🎵音乐播放器集成

本站的音乐播放器用的是第三方的插件，官网是这个：🎵明月浩空网-永久免费的HTML5网站音乐播放器
教程的话可以看这个（转载于音乐播放器使用教程视频 – 菠萝阁-明月浩空）：

四.🧍‍♀️Live2D 看板娘集成

如果你比较懒的话就直接下载这个，里面已经把嘉然和向晚集成好了：个人博客源码.zip – 蓝奏云
然后跟着这个UP的视频一步步来就好

之后在页脚内容添加这段内容就好了：

<!--live2d--> 
<script src="/wp-content/themes/argon/argon/live2d/TweenLite.js"></script> 
<script src="/wp-content/themes/argon/argon/live2d/live2dcubismcore.min.js"></script>
<script src="/wp-content/themes/argon/argon/live2d/pixi.min.js"></script> 
<script src="/wp-content/themes/argon/argon/live2d/cubism4.min.js"></script> 
<link href="/wp-content/themes/argon/argon/live2d/pio.css" rel="stylesheet" type="text/css"/> 
<script src="/wp-content/themes/argon/argon/live2d/pio.js"></script> 
<script src="/wp-content/themes/argon/argon/live2d/pio_sdk4.js"></script> 
<script src="/wp-content/themes/argon/argon/live2d/load.js"></script>

如果你好自己动手的话可以参考这个：【首发】如何将嘉然live2D添加到博客网站当看板娘 – 叶小兽のBlog
这里我就不过多赘述了（因为大佬给的这个很全，而且我也不太会(´～`)）

五.🎨额外CSS

一.基础CSS美化

操作路径：WordPress 后台 → 打开外观定制器 → 额外CSS
用法：复制粘贴即可

/*网站字体*/
@font-face {
    font-family: echo;
    src: url(https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/fonts/13.woff2) format('woff2');
}

body {
    font-family: 'echo', Georgia, -apple-system, 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', sans-serif;
}

/*横幅字体大小*/
.banner-title {
    font-size: 2.5em;
}

.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;
}

/*文章标题字体大小*/
.post-title {
    font-size: 25px;
}

/*正文字体大小（不包含代码）*/
.post-content p {
    font-size: 1.25rem;
}

li {
    font-size: 1.2rem;
}

/*评论区字体大小*/
p {
    font-size: 1.2rem;
}

/*评论发送区字体大小*/
.form-control {
    font-size: 1.2rem;
}

/*评论勾选项目字体大小*/
.custom-checkbox .custom-control-input~.custom-control-label {
    font-size: 1.2rem;
}

/*评论区代码的强调色*/
code {
    color: rgba(var(--themecolor-rgbstr));
}

/*说说字体大小和颜色设置*/
.shuoshuo-title {
    font-size: 25px;
    /*  color: rgba(var(--themecolor-rgbstr)); */
}

/*尾注字体大小*/
.additional-content-after-post {
    font-size: 1.2rem;
}

/* 公告居中 */
.leftbar-announcement-title {
    font-size: 20px;
    /*     text-align: center; */
    color: #00FFFF;
}

.leftbar-announcement-content {
    font-size: 15px;
    line-height: 1.8;
    padding-top: 8px;
    opacity: 0.8;
    /*     text-align: center; */
    color: #00FFFF;
}

/* 一言居中 */
.leftbar-banner-title {
    font-size: 20px;
    display: block;
    text-align: center;
    opacity: 0.8;
}

/* 个性签名居中 */
.leftbar-banner-subtitle {
    margin-top: 15px;
    margin-bottom: 8px;
    font-size: 13px;
    opacity: 0.8;
    display: block;
    text-align: center;
}

/*========颜色设置===========*/

/*文章或页面的正文颜色*/
body {
    color: #364863;
}

/*引文属性设置*/
blockquote {
    /*添加弱主题色为背景色*/
    background: rgba(var(--themecolor-rgbstr), 0.1) !important;
    width: 100%;
}

/*引文颜色 建议用主题色*/
:root {
    /*也可以用类似于--color-border-on-foreground-deeper: #009688;这样的命令*/
    --color-border-on-foreground-deeper: rgba(var(--themecolor-rgbstr));
}

/*左侧菜单栏突出颜色修改*/
.leftbar-menu-item>a:hover,
.leftbar-menu-item.current>a {
    background-color: #f9f9f980;
}

/*站点概览分隔线颜色修改*/
.site-state-item {
    border-left: 1px solid #aaa;
}

.site-friend-links-title {
    border-top: 1px dotted #aaa;
}

#leftbar_tab_tools ul li {
    padding-top: 3px;
    padding-bottom: 3px;
    border-bottom: none;
}

html.darkmode #leftbar_tab_tools ul li {
    border-bottom: none;
}

/*左侧栏搜索框的颜色*/
button#leftbar_search_container {
    background-color: transparent;
}

/*========透明设置===========*/

/*白天卡片背景透明*/
.card {
    background-color: rgba(255, 255, 255, 0.8) !important;
    /*backdrop-filter:blur(6px);*//*毛玻璃效果主要属性*/
    -webkit-backdrop-filter: blur(6px);
}

/*小工具栏背景完全透明*/
/*小工具栏是card的子元素，如果用同一个透明度会叠加变色，故改为完全透明*/
.card .widget,
.darkmode .card .widget,
#post_content>div>div>div.argon-timeline-card.card.bg-gradient-secondary.archive-timeline-title {
    background-color: #ffffff00 !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.emotion-keyboard,
#fabtn_blog_settings_popup {
    background-color: rgba(255, 255, 255, 0.95) !important;
}

/*分类卡片透明*/
.bg-gradient-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

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

html.darkmode #fabtn_blog_settings_popup {
    background: rgba(66, 66, 66, 0.95) !important;
}

/*标签背景
.post-meta-detail-tag {
    background:rgba(255, 255, 255, 0.5)!important;
}*/

/*========排版设置===========*/

/*左侧栏层级置于上层*/
#leftbar_part1 {
    z-index: 1;
}

/*分类卡片文本居中*/
#content>div.page-information-card-container>div>div {
    text-align: center;
}

/*子菜单对齐及样式调整*/
.dropdown-menu .dropdown-item>i {
    width: 10px;
}

.dropdown-menu>a {
    color: var(--themecolor);
}

.dropdown-menu {
    min-width: max-content;
}

.dropdown-menu .dropdown-item {
    padding: .5rem 1.5rem 0.5rem 1rem;
}

.leftbar-menu-subitem {
    min-width: max-content;
}

.leftbar-menu-subitem .leftbar-menu-item>a {
    padding: 0rem 1.5rem 0rem 1rem;
}

/*左侧栏边距修改*/
.tab-content {
    padding: 10px 0px 0px 0px !important;
}

.site-author-links {
    padding: 0px 0px 0px 10px;
}

/*目录位置偏移修改*/
#leftbar_catalog {
    margin-left: 0px;
}

/*目录条目边距修改*/
#leftbar_catalog .index-link {
    padding: 4px 4px 4px 4px;
}

/*左侧栏小工具栏字体缩小*/
#leftbar_tab_tools {
    font-size: 14px;
}

/*正文图片边距修改*/
article figure {
    margin: 0;
}

/*正文图片居中显示*/
.fancybox-wrapper {
    margin: auto;
}

/*正文表格样式修改*/
article table>tbody>tr>td,
article table>tbody>tr>th,
article table>tfoot>tr>td,
article table>tfoot>tr>th,
article table>thead>tr>td,
article table>thead>tr>th {
    padding: 8px 10px;
    border: 1px solid;
}

/*表格居中样式*/
.wp-block-table.aligncenter {
    margin: 10px auto;
}

/*回顶图标放大*/
button#fabtn_back_to_top,
button#fabtn_go_to_comment,
button#fabtn_toggle_blog_settings_popup,
button#fabtn_toggle_sides,
button#fabtn_open_sidebar {
    font-size: 1.2rem;
}

/*顶栏菜单放大*/
.navbar-nav .nav-link {
    font-size: 1rem;
    font-family: 'echo';
}

.navbar-brand {
    font-family: 'echo';
    font-size: 1.2rem;
    margin-right: 1.0rem;
    padding-bottom: 0.2rem;
    -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;
}

/*菜单大小*/
.nav-link-inner--text {
    font-size: 1.25em;
}

.navbar-nav .nav-item {
    margin-right: 0;
}

.mr-lg-5,
.mx-lg-5 {
    margin-right: 1rem !important;
}

.navbar-toggler-icon {
    width: 1.8rem;
    height: 1.8rem;
}

/*菜单间距*/
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 1.4em;
    padding-left: 1.4em;
}

/*隐藏wp-SEO插件带来的线条阴影（不一定要装）*/
*[style='position: relative; z-index: 99998;'] {
    display: none;
}

/* Github卡片样式*/
.github-info-card-header a {
    /*Github卡片抬头颜色*/
    color: black !important;
    font-size: 1.5rem;
}

.github-info-card {
    /*Github卡片文字（非链接）*/
    font-size: 1rem;
    color: black !important;
}

.github-info-card.github-info-card-full.card.shadow-sm {
    /*Github卡片背景色*/
    background-color: rgba(var(--themecolor-rgbstr), 0.1) !important;
}

/*      左侧栏外观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;
    transition: transform 0.5s ease, filter 0.5s ease;
}

/* 鼠标悬停效果 */
#leftbar_overview_author_image:hover {
    transform: scale(1.23) rotate(360deg);
    filter: brightness(150%);
}

/* 名称 */
#leftbar_overview_author_name {
    margin-top: 15px;
    font-size: 18px;
    color: #00FFFF;
}

/* 简介 */
#leftbar_overview_author_description {
    font-size: 14px;
    margin-top: -4px;
    opacity: 0.8;
    color: #c21f30;
}

/* 标题，链接等 */
a,
.btn-neutral {
    color: #AF7AC5;
}

/* 页脚透明 */
#footer {
    background: var(--themecolor-gradient);
    color: #fff;
    width: 100%;
    float: right;
    margin-bottom: 25px;
    text-align: center;
    padding: 25px 20px;
    line-height: 1.8;
    transition: none;
    opacity: 0.6;
}

二.鼠标指针

上传自己的鼠标指针文件到网站，根据下面的替换成自己网站内的鼠标指针的文件即可

/* 全局默认指针（对应pointer） */
html, body {
    cursor: url('/wp-content/Blue Archive mini/normal-mini.cur'), auto;
}

/* 帮助选择状态（对应help） */
.help, [data-tooltip], .tooltip-trigger {
    cursor: url('/wp-content/Blue Archive mini/help-mini.cur'), help;
}

/* 后台运行状态（对应work） */
.loading, .processing, .background-task {
    cursor: url('/wp-content/Blue Archive mini/background-mini.ani'), wait;
}

/* 忙/加载中状态（对应busy） */
.busy, .heavy-loading, .async-operation {
    cursor: url('/wp-content/Blue Archive mini/loading-mini.ani'), progress;
}

/* 文本选择状态（对应text） */
input, textarea, [contenteditable], .text-selection {
    cursor: url('/wp-content/Blue Archive mini/text_mini.ani'), text;
}

/* 不可用状态（对应unavailiable） */
[disabled], .disabled, .not-allowed {
    cursor: url('/wp-content/Blue Archive mini/block-mini.cur'), not-allowed;
}

/* 垂直调整大小（对应vert） */
.vertical-resize, [resize="vertical"], .resize-ns {
    cursor: url('/wp-content/Blue Archive mini/resizeNS-mini.cur'), n-resize;
}

/* 水平调整大小（对应horz） */
.horizontal-resize, [resize="horizontal"], .resize-we {
    cursor: url('/wp-content/Blue Archive mini/resizeWE-mini.cur'), e-resize;
}

/* 对角线调整1（对应dgn1） */
.diagonal-resize-1, .resize-se {
    cursor: url('/wp-content/Blue Archive mini/resizeDIAG1-mini.cur'), se-resize;
}

/* 对角线调整2（对应dgn2） */
.diagonal-resize-2, .resize-nwse {
    cursor: url('/wp-content/Blue Archive mini/resizeDIAG2-mini.cur'), nwse-resize;
}

/* 移动状态（对应move） */
.move, .draggable, [draggable="true"] {
    cursor: url('/wp-content/Blue Archive mini/move-mini.cur'), move;
}

/* 链接状态（对应link） */
a, .link, .hyperlink, button, .clickable {
    cursor: url('/wp-content/Blue Archive mini/link-mini.cur'), pointer;
}

/* 精确选择（对应cross） */
.precise-select, .area-select, .selection-tool {
    cursor: url('/wp-content/Blue Archive mini/areaselect-mini.cur'), crosshair;
}

/* 手写状态（对应hand） */
.handwriting, .draw, .signature-pad {
    cursor: url('/wp-content/Blue Archive mini/pen-mini.cur'), text;
}

/* 候选选择（对应alternate） */
.candidate, .alternative-selection, .suggestion-item {
    cursor: url('/wp-content/Blue Archive mini/alternativeselect-mini.cur'), auto;
}

@media all and (max-width: 40em){
  body{font-size: 0.8em;}
}

六.🧁其他美化

如你所见，本站网页底部的波浪，右侧会捉迷藏的小萝莉，网页标题的扫光效果都还没有讲怎么实现的，而这些美化是用第三方插件来实现的，下载地址在这里：https://wwpc.lanzoub.com/iVhAP37u2qnc
这个就由大家自行探索吧~

结尾~

主要的美化就是这些了，如果大家有更多的美化想法，可以参考这个大佬的美化文章：Docker系列 WordPress系列 特效 – Bensz
本人能力有限，只能把我网站中这些主要的美化列出来。如果大家对steam游戏，追番和AI对话的实现感兴趣的话，下期可以做个分享~

另外，希望这篇文章可以帮助到大家~（尽管没什么人来访问）