智能摘要

前言：为什么要在文章详情页加入粒子连线动画？

子比Zibll主题默认的文章详情页布局简洁实用，但在视觉冲击力上略显平淡。加入背景粒子连线动画，可以瞬间提升页面的科技感和沉浸感，尤其适合技术博客、资源分享类网站。本教程将手把手教你实现一个可自定义的粒子连线背景，并搭配动态光效，让文章页焕然一新。

深色背景上，无数彩色粒子连接成网状，粒子缓慢移动，形成动态科技感视觉效果，风格赛博朋克，色调以蓝紫为主，居中构图，粒子连线交织成复杂的网络结构

准备工作

确保子比主题为最新版本（建议v7.0以上），本教程基于WordPress 6.4 + Zibll 7.3测试通过
需要具备基础的CSS和JavaScript知识，了解如何添加自定义代码
推荐使用子比主题自带的“自定义CSS/JS”功能，避免修改核心文件

第一步：添加粒子动画核心代码

登录WordPress后台，进入 外观 → 自定义 → 自定义CSS/JS，在“自定义JavaScript”文本框中粘贴以下代码：

// 粒子连线动画 - 极栈网络专供
(function() {
    var canvas = document.createElement('canvas');
    canvas.id = 'particleCanvas';
    canvas.style.position = 'fixed';
    canvas.style.top = '0';
    canvas.style.left = '0';
    canvas.style.width = '100vw';
    canvas.style.height = '100vh';
    canvas.style.zIndex = '-1';
    canvas.style.pointerEvents = 'none';
    document.body.appendChild(canvas);
    
    var ctx = canvas.getContext('2d');
    var particles = [];
    var particleCount = 80;
    var maxDistance = 150;
    var mouseX = 0;
    var mouseY = 0;
    
    function resizeCanvas() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }
    window.addEventListener('resize', resizeCanvas);
    resizeCanvas();
    
    function Particle() {
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
        this.vx = (Math.random() - 0.5) * 0.5;
        this.vy = (Math.random() - 0.5) * 0.5;
        this.radius = Math.random() * 2 + 1;
        this.color = 'rgba(100, 149, 237, 0.8)';
    }
    
    Particle.prototype.update = function() {
        if (this.x  canvas.width) this.vx = -this.vx;
        if (this.y  canvas.height) this.vy = -this.vy;
        this.x += this.vx;
        this.y += this.vy;
        // 鼠标吸引效果
        var dx = mouseX - this.x;
        var dy = mouseY - this.y;
        var dist = Math.sqrt(dx * dx + dy * dy);
        if (dist  0) {
            this.x += dx * 0.005;
            this.y += dy * 0.005;
        }
    };
    
    Particle.prototype.draw = function() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
    };
    
    for (var i = 0; i < particleCount; i++) {
        particles.push(new Particle());
    }
    
    document.addEventListener('mousemove', function(e) {
        mouseX = e.clientX;
        mouseY = e.clientY;
    });
    
    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for (var i = 0; i < particles.length; i++) {
            particles[i].update();
            particles[i].draw();
            for (var j = i + 1; j < particles.length; j++) {
                var dx = particles[i].x - particles[j].x;
                var dy = particles[i].y - particles[j].y;
                var dist = Math.sqrt(dx * dx + dy * dy);
                if (dist < maxDistance) {
                    ctx.beginPath();
                    ctx.moveTo(particles[i].x, particles[i].y);
                    ctx.lineTo(particles[j].x, particles[j].y);
                    ctx.strokeStyle = 'rgba(100, 149, 237, ' + (1 - dist / maxDistance) * 0.5 + ')';
                    ctx.lineWidth = 1;
                    ctx.stroke();
                }
            }
        }
        requestAnimationFrame(animate);
    }
    animate();
})();

第二步：添加动态光效

在“自定义CSS”文本框中粘贴以下样式，为文章内容区域添加动态光效：

/* 文章内容区域光效动画 */
.article-content {
    position: relative;
    overflow: hidden;
}
.article-content::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 40%, rgba(100, 149, 237, 0.1) 0%, transparent 50%);
    animation: lightMove 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes lightMove {
    0% { transform: translate(0, 0); }
    25% { transform: translate(20px, -20px); }
    50% { transform: translate(-10px, 30px); }
    75% { transform: translate(30px, 10px); }
    100% { transform: translate(0, 0); }
}
.article-content > * {
    position: relative;
    z-index: 1;
}

代码解释：.article-content 是子比主题文章详情页的内容容器选择器。通过伪元素 ::before 创建一个径向渐变光晕，并利用 @keyframes 实现缓慢移动，营造动态光效。

第三步：优化性能与兼容性

粒子动画可能对低端设备造成性能压力。在自定义JavaScript中添加以下检测：

// 性能优化：检测设备类型
if (window.innerWidth > 768 && !navigator.userAgent.match(/Android|webOS|iPhone|iPad|iPod/i)) {
    // 在上述粒子代码前加入此判断，仅桌面端运行
}

同时，在自定义CSS中添加移动端隐藏选项：

@media (max-width: 768px) {
    #particleCanvas {
        display: none;
    }
    .article-content::before {
        display: none;
    }
}

第四步：自定义颜色与密度

粒子动画的默认颜色为蓝色系（rgba(100, 149, 237, 0.8)），你可以修改 particleCount 变量（当前80）调整粒子密度，修改 maxDistance（当前150）控制连线距离。光效颜色可在 background 中替换 rgba(100, 149, 237, 0.1) 为你喜欢的色值。

例如，改为暗红色系：

// 粒子颜色改为暗红
this.color = 'rgba(220, 20, 60, 0.8)';

/* 光效颜色改为暗红 */
background: radial-gradient(circle at 30% 40%, rgba(220, 20, 60, 0.1) 0%, transparent 50%);

常见问题排查

粒子动画不显示：检查自定义JavaScript是否正确粘贴，没有语法错误。刷新页面后按F12查看控制台是否有报错。
光效覆盖了文章文字：确保 .article-content > * 的 z-index 设置为大于0的值。
移动端卡顿：已通过媒体查询隐藏，无需担心。

进阶玩法：与文章主题联动

你可以根据文章分类动态改变粒子颜色。例如，技术类文章使用蓝色，生活类使用暖色。这需要额外的PHP代码判断分类，但原理简单：通过 body_class 输出分类标识，然后在JavaScript中读取并切换颜色。

示例：在子比主题的 functions.php 中添加（不推荐直接修改，建议使用子主题）：

function add_category_class($classes) {
    if (is_single()) {
        global $post;
        $categories = get_the_category($post->ID);
        foreach ($categories as $category) {
            $classes[] = 'cat-' . $category->slug;
        }
    }
    return $classes;
}
add_filter('body_class', 'add_category_class');

然后修改JavaScript，根据 document.body.classList 判断分类并设置颜色。