智能摘要

引言：为文章详情页注入灵动生命力

在子比Zibll主题中，文章详情页是用户停留时间最长的区域。一个静态的页面往往缺乏吸引力，而动态粒子星轨与鼠标轨迹交互特效，能瞬间提升页面的科技感和互动性。本教程将手把手教你从零实现这一特效，让你的网站脱颖而出。

一个深色背景的网页文章详情页，中央显示文章标题，背景中有动态粒子星轨环绕，鼠标移动时拖出彩色轨迹。风格：科幻蓝紫调，构图：中心聚焦，粒子呈螺旋状分布

准备工作：确保环境兼容

本教程适用于子比Zibll主题最新版（v7.0及以上），以及现代浏览器（Chrome 90+、Edge 90+、Firefox 90+）。无需额外插件，只需在主题自定义CSS或子主题中添加代码。

主题版本：子比Zibll v7.0+
浏览器：支持Canvas和CSS3动画
文件位置：后台外观-自定义-CSS或子主题style.css

第一步：创建粒子星轨背景

粒子星轨的核心是Canvas动画。在文章详情页的容器中嵌入一个全屏Canvas层，并绘制粒子沿着轨道运行。

/* CSS基础：定位Canvas层 */
#particle-star-trail {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

然后，在主题的footer.php或通过JavaScript注入以下脚本：

// JavaScript：粒子星轨逻辑
const canvas = document.createElement('canvas');
canvas.id = 'particle-star-trail';
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const particles = [];
const numParticles = 100;

class Particle {
    constructor() {
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
        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.5 + 0.3;
    }
    update() {
        this.x += this.speedX;
        this.y += this.speedY;
        if (this.x > canvas.width) this.x = 0;
        if (this.x  canvas.height) this.y = 0;
        if (this.y < 0) this.y = canvas.height;
    }
    draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(100, 200, 255, ${this.opacity})`;
        ctx.fill();
    }
}

for (let i = 0; i  {
        p.update();
        p.draw();
    });
    // 连接相邻粒子形成星轨
    for (let i = 0; i < particles.length; i++) {
        for (let j = i + 1; j < particles.length; j++) {
            const dx = particles[i].x - particles[j].x;
            const dy = particles[i].y - particles[j].y;
            const distance = Math.sqrt(dx * dx + dy * dy);
            if (distance < 150) {
                ctx.strokeStyle = `rgba(100, 200, 255, ${1 - distance / 150})`;
                ctx.lineWidth = 0.5;
                ctx.beginPath();
                ctx.moveTo(particles[i].x, particles[i].y);
                ctx.lineTo(particles[j].x, particles[j].y);
                ctx.stroke();
            }
        }
    }
    requestAnimationFrame(animate);
}
animate();

这段代码创建了100个粒子，它们随机移动并通过线条连接，形成星轨效果。

第二步：添加鼠标轨迹交互

鼠标轨迹让粒子跟随光标移动，产生拖尾效果。在Canvas上监听鼠标事件，并让粒子响应。

// 鼠标轨迹交互
let mouseX = canvas.width / 2;
let mouseY = canvas.height / 2;

canvas.addEventListener('mousemove', (e) => {
    mouseX = e.clientX;
    mouseY = e.clientY;
});

// 修改Particle.update方法
class Particle {
    // ... 原有代码不变
    update() {
        const dx = mouseX - this.x;
        const dy = mouseY - this.y;
        const distance = Math.sqrt(dx * dx + dy * dy);
        if (distance  maxSpeed) this.speedX = maxSpeed * Math.sign(this.speedX);
        if (Math.abs(this.speedY) > maxSpeed) this.speedY = maxSpeed * Math.sign(this.speedY);
        
        this.x += this.speedX;
        this.y += this.speedY;
        // 边界处理
        if (this.x > canvas.width) this.x = 0;
        if (this.x  canvas.height) this.y = 0;
        if (this.y < 0) this.y = canvas.height;
    }
}

鼠标移动时，粒子会受到吸引力向光标靠拢，形成动态轨迹。

第三步：美化与性能优化

为了提升视觉效果和性能，可以添加颜色渐变和粒子大小变化。

// 颜色渐变
const colors = ['#00d4ff', '#7b2ff7', '#ff6b6b', '#ffd93d'];
// 在Particle构造函数中
this.color = colors[Math.floor(Math.random() * colors.length)];

// 粒子大小随鼠标距离变化
update() {
    // ... 其他代码
    const distToMouse = Math.sqrt((mouseX - this.x) ** 2 + (mouseY - this.y) ** 2);
    this.size = Math.max(1, 5 - distToMouse / 100);
}

性能优化：使用requestAnimationFrame替代setInterval，并减少粒子数量（如调整为80个）。

第四步：集成到子比主题

将上述代码整合为一个文件，放在子主题的js文件夹中，并通过functions.php加载。

// 在子主题的functions.php中
function add_particle_script() {
    if (is_single()) { // 仅在文章详情页加载
        wp_enqueue_script('particle-star-trail', get_stylesheet_directory_uri() . '/js/particle-star-trail.js', array(), '1.0', true);
    }
}
add_action('wp_enqueue_scripts', 'add_particle_script');

同时，在自定义CSS中添加Canvas的定位样式。