智能摘要

为什么你的文章详情页需要一个动态粒子背景？

在子比Zibll主题中，文章详情页是用户停留时间最长的区域。一个视觉冲击力强的背景特效，不仅能提升站点的专业感，还能有效降低跳出率。本教程将带你从零实现一个全屏粒子风暴背景，叠加一个随鼠标旋转的3D八面体，所有代码均适配最新版子比主题（v7.0+）和现代浏览器。

一张宽屏截图，左侧展示代码编辑器界面，右侧是浏览器预览效果，粒子风暴呈蓝紫色渐变，八面体半透明旋转，整体暗色调，科技感强

第一步：准备工作与文件结构

在开始编写代码前，需要确认你的子比主题版本为v7.0以上，并准备好以下文件：

子比主题安装目录：通常位于 /wp-content/themes/zibll/
自定义CSS文件：在主题设置中开启“自定义CSS”功能，或直接在子主题的 style.css 中添加
JavaScript文件：在 /js/ 目录下新建 particle-octahedron.js 用于存放核心脚本

本教程所有代码均不依赖外部库（如Three.js），仅使用原生Canvas和CSS3D，确保加载速度极快。这样即使在高并发场景下，也不会拖慢页面响应时间。

第二步：编写粒子风暴Canvas背景

在文章详情页的标签内，我们需要动态插入一个全屏Canvas层。打开 particle-octahedron.js，写入以下代码：

// 粒子风暴类
class ParticleStorm {
  constructor() {
    this.canvas = document.createElement('canvas');
    this.canvas.id = 'particle-storm';
    this.canvas.style.position = 'fixed';
    this.canvas.style.top = '0';
    this.canvas.style.left = '0';
    this.canvas.style.width = '100vw';
    this.canvas.style.height = '100vh';
    this.canvas.style.zIndex = '-1';
    this.canvas.style.pointerEvents = 'none';
    document.body.prepend(this.canvas);
    this.ctx = this.canvas.getContext('2d');
    this.particles = [];
    this.mouse = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
    this.init();
    this.animate();
  }

  init() {
    this.canvas.width = window.innerWidth;
    this.canvas.height = window.innerHeight;
    for (let i = 0; i  {
      this.canvas.width = window.innerWidth;
      this.canvas.height = window.innerHeight;
    });
    window.addEventListener('mousemove', (e) => {
      this.mouse.x = e.clientX;
      this.mouse.y = e.clientY;
    });
  }

  animate() {
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.particles.forEach(p => {
      p.x += p.speedX;
      p.y += p.speedY;
      if (p.x  this.canvas.width) p.speedX *= -1;
      if (p.y  this.canvas.height) p.speedY *= -1;
      this.ctx.beginPath();
      this.ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
      this.ctx.fillStyle = p.color;
      this.ctx.fill();
    });
    // 绘制鼠标连线
    this.particles.forEach(p => {
      const dist = Math.hypot(p.x - this.mouse.x, p.y - this.mouse.y);
      if (dist  this.animate());
  }
}

// 仅在文章页激活
if (document.querySelector('.article-content')) {
  new ParticleStorm();
}

第三步：构建3D旋转八面体

接下来在粒子层之上叠加一个CSS3D八面体。八面体由8个三角形面组成，我们使用CSS transform实现3D旋转。在 particle-octahedron.js 中追加以下代码：

// 3D八面体类
class Octahedron3D {
  constructor() {
    this.container = document.createElement('div');
    this.container.id = 'octahedron-3d';
    this.container.style.position = 'fixed';
    this.container.style.top = '50%';
    this.container.style.left = '50%';
    this.container.style.transformStyle = 'preserve-3d';
    this.container.style.perspective = '800px';
    this.container.style.zIndex = '0';
    this.container.style.pointerEvents = 'none';
    document.body.prepend(this.container);
    this.angleX = 0;
    this.angleY = 0;
    this.createFaces();
    this.animate();
  }

  createFaces() {
    const vertices = [
      [0, 0, 100], [100, 0, 0], [0, 100, 0], [-100, 0, 0], [0, -100, 0], [0, 0, -100]
    ];
    const faces = [
      [0, 1, 2], [0, 2, 3], [0, 3, 4], [0, 4, 1],
      [5, 2, 1], [5, 3, 2], [5, 4, 3], [5, 1, 4]
    ];
    faces.forEach(face => {
      const div = document.createElement('div');
      div.style.position = 'absolute';
      div.style.width = '0';
      div.style.height = '0';
      div.style.borderStyle = 'solid';
      div.style.borderWidth = '50px 50px 50px 50px';
      div.style.borderColor = 'transparent';
      div.style.transform = `translate3d(${vertices[face[0]][0]}px, ${vertices[face[0]][1]}px, ${vertices[face[0]][2]}px)`;
      // 为简化，使用半透明背景模拟三角形
      div.style.background = `rgba(100, 200, 255, ${Math.random() * 0.3 + 0.1})`;
      div.style.clipPath = 'polygon(50% 0%, 100% 100%, 0% 100%)';
      div.style.width = '100px';
      div.style.height = '100px';
      div.style.transformOrigin = '50% 50%';
      this.container.appendChild(div);
    });
  }

  animate() {
    this.angleX += 0.005;
    this.angleY += 0.01;
    this.container.style.transform = `rotateX(${this.angleX}rad) rotateY(${this.angleY}rad)`;
    requestAnimationFrame(() => this.animate());
  }
}

// 初始化八面体
if (document.querySelector('.article-content')) {
  new Octahedron3D();
}

第四步：整合与样式优化

将上述JS文件引入主题。在 functions.php 中添加：

function add_particle_octahedron_script() {
  if (is_single()) {
    wp_enqueue_script('particle-octahedron', get_template_directory_uri() . '/js/particle-octahedron.js', array(), '1.0', true);
  }
}
add_action('wp_enqueue_scripts', 'add_particle_octahedron_script');

为防止特效遮挡文章内容，在自定义CSS中添加：

.article-content {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(5px);
  border-radius: 12px;
  padding: 20px;
  margin: 20px auto;
  max-width: 800px;
}