智能摘要

前言：打造沉浸式阅读体验

子比Zibll主题作为国内优秀的WordPress主题，其灵活的自定义能力深受站长喜爱。本教程将带你从零开始，在文章详情页实现动态粒子星轨与鼠标轨迹交互特效。完成后的效果：进入文章页时，背景中无数粒子从中心向外扩散形成流动星轨，鼠标移动时拖拽出一条绚丽的彩色轨迹，粒子与鼠标轨迹产生动态碰撞和吸引效果。全程只需CSS和JavaScript，无需安装额外插件。

深色背景的文章详情页，中央是文章内容区域，周围布满动态粒子（白色/蓝色光点），粒子从中心向外扩散形成螺旋星轨，鼠标位置拖出一条彩色渐变轨迹，整体色调偏暗蓝紫，风格未来科技，构图采用中心对称布局

准备工作

在开始之前，确保你具备以下条件：

子比Zibll主题已安装并激活，版本建议7.0以上
WordPress后台有编辑主题文件权限
基础的HTML/CSS/JavaScript知识
一个文本编辑器（推荐VS Code或Sublime）

第一步：创建粒子画布

粒子系统需要一个全屏画布作为渲染容器。打开子比主题的footer.php文件（路径：/wp-content/themes/zibll/footer.php），在</body>标签前插入以下HTML结构：

<canvas id="particleCanvas"></canvas>

接着在style.css（或自定义CSS区域）中添加画布样式：

#particleCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    background: transparent;
}

这段代码创建了一个固定定位的全屏画布，z-index: -1使其位于内容下方，pointer-events: none确保鼠标事件穿透到文章内容。

第二步：编写粒子引擎

在主题的functions.js（或自定义JavaScript区域）中，创建一个粒子类来管理单个粒子：

class Particle {
    constructor(canvas) {
        this.canvas = canvas;
        this.ctx = canvas.getContext('2d');
        this.reset();
    }

    reset() {
        // 粒子从画面中心附近随机生成
        this.x = this.canvas.width / 2 + (Math.random() - 0.5) * 200;
        this.y = this.canvas.height / 2 + (Math.random() - 0.5) * 200;
        this.size = Math.random() * 3 + 1;
        this.speedX = (Math.random() - 0.5) * 2;
        this.speedY = (Math.random() - 0.5) * 2;
        this.opacity = Math.random() * 0.8 + 0.2;
        this.color = `hsl(${Math.random() * 360}, 80%, 60%)`;
        this.life = 0;
        this.maxLife = Math.random() * 200 + 100;
    }

    update(mouseX, mouseY) {
        // 粒子寿命更新
        this.life++;
        if (this.life > this.maxLife) {
            this.reset();
        }

        // 鼠标交互：靠近鼠标时加速远离
        const dx = this.x - mouseX;
        const dy = this.y - mouseY;
        const distance = Math.sqrt(dx * dx + dy * dy);
        if (distance < 150) {
            const force = (150 - distance) / 150 * 0.5;
            this.speedX += (dx / distance) * force;
            this.speedY += (dy / distance) * force;
        }

        // 更新位置
        this.x += this.speedX;
        this.y += this.speedY;

        // 边缘检测：超出画布则重置
        if (this.x  this.canvas.width || this.y  this.canvas.height) {
            this.reset();
        }

        // 速度衰减
        this.speedX *= 0.98;
        this.speedY *= 0.98;
    }

    draw() {
        this.ctx.save();
        this.ctx.globalAlpha = this.opacity * (1 - this.life / this.maxLife);
        this.ctx.fillStyle = this.color;
        this.ctx.beginPath();
        this.ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        this.ctx.fill();
        this.ctx.restore();
    }
}

这个粒子类实现了粒子的生命周期管理、鼠标交互力和绘制方法。粒子在接近鼠标时会被推开，产生动态排斥效果。

第三步：实现星轨效果

星轨效果的核心是让粒子沿螺旋路径运动。在同一个JavaScript文件中，添加星轨逻辑：

class StarTrail {
    constructor(canvas) {
        this.canvas = canvas;
        this.ctx = canvas.getContext('2d');
        this.particles = [];
        this.mouseX = canvas.width / 2;
        this.mouseY = canvas.height / 2;
        this.angle = 0;

        // 初始化200个粒子
        for (let i = 0; i < 200; i++) {
            this.particles.push(new Particle(canvas));
        }

        this.animate();
    }

    animate() {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

        // 更新所有粒子
        for (const particle of this.particles) {
            particle.update(this.mouseX, this.mouseY);
            particle.draw();
        }

        // 绘制鼠标轨迹：使用粒子间的连线形成星轨
        for (let i = 0; i < this.particles.length; i++) {
            for (let j = i + 1; j < this.particles.length; j++) {
                const dx = this.particles[i].x - this.particles[j].x;
                const dy = this.particles[i].y - this.particles[j].y;
                const distance = Math.sqrt(dx * dx + dy * dy);

                if (distance  this.animate());
    }

    updateMousePosition(event) {
        const rect = this.canvas.getBoundingClientRect();
        this.mouseX = event.clientX - rect.left;
        this.mouseY = event.clientY - rect.top;
    }
}

在初始化时，添加鼠标事件监听：

const canvas = document.getElementById('particleCanvas');
const trail = new StarTrail(canvas);

document.addEventListener('mousemove', (event) => {
    trail.updateMousePosition(event);
});

// 窗口大小变化时重置画布尺寸
window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});

第四步：限制特效只显示在文章详情页

为了不影响其他页面，需要在WordPress中条件判断。打开footer.php，修改之前插入的canvas代码：


<canvas id="particleCanvas"></canvas>
<script>
// 将第三步的JavaScript代码放入此处
</script>

或者将JavaScript代码放在单独的.js文件中，仅在文章页加载：


<canvas id="particleCanvas"></canvas>
<script src="/js/star-trail.js"></script>

第五步：性能优化与调整

粒子数量过多可能导致页面卡顿，根据设备性能调整：

粒子数：200-400之间，低端设备减少到100
连线距离：100-150像素，过大会导致线条过密
帧率控制：使用requestAnimationFrame自动优化
在移动设备上，可以通过window.innerWidth < 768判断，减少粒子数量或禁用特效

完整代码示例

将以下完整代码保存为star-trail.js，并放置在主题的js目录下：

class Particle {
    constructor(canvas) {
        this.canvas = canvas;
        this.ctx = canvas.getContext('2d');
        this.reset();
    }

    reset() {
        this.x = this.canvas.width / 2 + (Math.random() - 0.5) * 200;
        this.y = this.canvas.height / 2 + (Math.random() - 0.5) * 200;
        this.size = Math.random() * 3 + 1;
        this.speedX = (Math.random() - 0.5) * 2;
        this.speedY = (Math.random() - 0.5) * 2;
        this.opacity = Math.random() * 0.8 + 0.2;
        this.color = `hsl(${Math.random() * 360}, 80%, 60%)`;
        this.life = 0;
        this.maxLife = Math.random() * 200 + 100;
    }

    update(mouseX, mouseY) {
        this.life++;
        if (this.life > this.maxLife) {
            this.reset();
        }

        const dx = this.x - mouseX;
        const dy = this.y - mouseY;
        const distance = Math.sqrt(dx * dx + dy * dy);
        if (distance < 150) {
            const force = (150 - distance) / 150 * 0.5;
            this.speedX += (dx / distance) * force;
            this.speedY += (dy / distance) * force;
        }

        this.x += this.speedX;
        this.y += this.speedY;

        if (this.x  this.canvas.width || this.y  this.canvas.height) {
            this.reset();
        }

        this.speedX *= 0.98;
        this.speedY *= 0.98;
    }

    draw() {
        this.ctx.save();
        this.ctx.globalAlpha = this.opacity * (1 - this.life / this.maxLife);
        this.ctx.fillStyle = this.color;
        this.ctx.beginPath();
        this.ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        this.ctx.fill();
        this.ctx.restore();
    }
}

class StarTrail {
    constructor(canvas) {
        this.canvas = canvas;
        this.ctx = canvas.getContext('2d');
        this.particles = [];
        this.mouseX = canvas.width / 2;
        this.mouseY = canvas.height / 2;
        this.angle = 0;

        const particleCount = window.innerWidth < 768 ? 100 : 200;
        for (let i = 0; i < particleCount; i++) {
            this.particles.push(new Particle(canvas));
        }

        this.animate();
    }

    animate() {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

        for (const particle of this.particles) {
            particle.update(this.mouseX, this.mouseY);
            particle.draw();
        }

        const maxDist = window.innerWidth < 768 ? 60 : 100;
        for (let i = 0; i < this.particles.length; i++) {
            for (let j = i + 1; j < this.particles.length; j++) {
                const dx = this.particles[i].x - this.particles[j].x;
                const dy = this.particles[i].y - this.particles[j].y;
                const distance = Math.sqrt(dx * dx + dy * dy);

                if (distance  this.animate());
    }

    updateMousePosition(event) {
        const rect = this.canvas.getBoundingClientRect();
        this.mouseX = event.clientX - rect.left;
        this.mouseY = event.clientY - rect.top;
    }
}

// 初始化
document.addEventListener('DOMContentLoaded', () => {
    const canvas = document.getElementById('particleCanvas');
    if (!canvas) return;
    
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    
    const trail = new StarTrail(canvas);
    
    document.addEventListener('mousemove', (event) => {
        trail.updateMousePosition(event);
    });
    
    window.addEventListener('resize', () => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    });
});