智能摘要

引言：为子比Zibll主题注入动态粒子与光影活力

子比Zibll主题以其灵活的架构和丰富的功能，成为众多站长搭建内容平台的首选。然而，默认的文章详情页往往偏重信息展示，缺乏视觉冲击力。本教程将指导你，通过纯CSS和少量JavaScript，为文章详情页添加动态粒子烟花粒子与动态光影特效，让阅读体验瞬间升级。无需修改核心文件，完全基于子比主题的钩子机制实现，确保兼容最新版WordPress和子比主题。

一张宽屏电脑屏幕显示子比Zibll主题的文章详情页，页面背景有动态粒子烟花粒子在黑色背景上绽放，粒子呈金色和蓝色渐变，页面左侧有浮动光影效果，整体风格科技感、暗色调，构图采用居中视角，突出粒子特效与文章内容分层

第一步：准备工作与原理分析

在动手之前，先了解实现原理：粒子烟花特效通过Canvas绘制，动态光影利用CSS3的渐变与动画。我们使用子比主题的zibll_article_detail钩子，在文章内容前后注入自定义HTML和CSS。确保你的子比主题版本在v7.4以上，WordPress版本在5.8以上。无需安装额外插件，只需在主题自定义的CSS/JS区域添加代码。

所需文件一览

粒子烟花JS：基于开源库particles.js魔改，支持烟花爆炸与粒子拖尾效果。
光影CSS：利用radial-gradient和box-shadow实现悬浮光晕，动画用@keyframes控制。
钩子代码：在子比主题的functions.php中插入钩子，或使用子比主题自带的“自定义代码”功能。

第二步：添加粒子烟花特效

粒子烟花特效的核心是生成随机粒子，模拟烟花爆炸后下落和消失的过程。以下代码可直接放入子比主题的“自定义JS”区域（路径：后台-外观-自定义-额外JS）。

// 粒子烟花特效 - 文章详情页
(function() {
    if (!document.querySelector('.article-content')) return;
    var canvas = document.createElement('canvas');
    canvas.id = 'fireworks-canvas';
    canvas.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999;';
    document.body.appendChild(canvas);
    var ctx = canvas.getContext('2d');
    var particles = [];
    function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }
    window.addEventListener('resize', resize);
    resize();
    function createFirework() {
        var x = Math.random() * canvas.width;
        var y = Math.random() * canvas.height * 0.6;
        var colors = ['#ff6600', '#ffcc00', '#00ccff', '#ff00ff', '#66ff66'];
        for (var i = 0; i = 0; i--) {
            var p = particles[i];
            p.x += p.vx; p.y += p.vy;
            p.vy += 0.05; // 重力
            p.life -= p.decay;
            if (p.life <= 0) { particles.splice(i, 1); continue; }
            ctx.beginPath();
            ctx.arc(p.x, p.y, 3 * p.life, 0, Math.PI * 2);
            ctx.fillStyle = p.color;
            ctx.globalAlpha = p.life;
            ctx.fill();
        }
        requestAnimationFrame(animate);
    }
    animate();
})();

这段代码会在页面加载后，在文章详情页创建一个固定定位的Canvas画布，每3秒生成一次烟花爆炸效果。粒子带有重力效果，颜色随机，透明度随生命值衰减。注意pointer-events: none确保点击穿透，不影响文章内容交互。

第三步：实现动态光影特效

动态光影特效通过CSS在文章内容两侧添加渐变光晕，并使其缓慢移动，营造深邃的视觉层次。将以下CSS放入子比主题的“自定义CSS”区域。

/* 动态光影特效 */
.article-content {
    position: relative;
    overflow: hidden;
}
.article-content::before,
.article-content::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.article-content::before {
    top: 10%;
    left: -100px;
    background: radial-gradient(circle, rgba(0, 204, 255, 0.3), transparent 70%);
    animation: floatGlow 8s ease-in-out infinite alternate;
}
.article-content::after {
    bottom: 20%;
    right: -80px;
    background: radial-gradient(circle, rgba(255, 102, 0, 0.2), transparent 70%);
    animation: floatGlow 10s ease-in-out infinite alternate-reverse;
}
@keyframes floatGlow {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -20px) scale(1.2); }
    100% { transform: translate(-20px, 30px) scale(0.9); }
}
.article-content > * {
    position: relative;
    z-index: 1;
}

这段CSS为文章内容容器.article-content添加了两个伪元素，分别位于左上方和右下方，使用径向渐变模拟光晕。动画floatGlow让光晕在三维空间内缓慢浮动并缩放，形成呼吸感。注意z-index: 0确保光晕在内容下层，不影响文字可读性。

第四步：通过子比钩子注入代码

为了只在文章详情页生效，避免影响其他页面，建议通过子比主题的钩子注入。打开子比主题的functions.php（建议使用子主题），添加以下代码：

// 在文章详情页注入粒子与光影特效
add_action('zibll_article_detail', function() {
    if (is_single()) {
        echo '' . file_get_contents(get_stylesheet_directory() . '/assets/css/particle-glow.css') . '';
        echo '';
    }
});

将第二步和第三步的代码分别保存为particle-glow.js和particle-glow.css，放在子主题的assets目录下。这样，只有访问文章详情页时才会加载特效，优化性能。