智能摘要

前言：让文章详情页成为视觉焦点

在子比Zibll主题中，文章详情页是用户停留时间最长的区域。一个具备动态粒子背景与3D交互元素的页面，能显著提升用户的阅读体验和站点专业感。本教程将手把手教你实现“动态粒子漩涡”与“3D旋转多面体”两种特效，让你的文章页在众多站点中脱颖而出。

一张子比Zibll主题文章详情页的截图，页面中央悬浮着一个半透明的3D旋转多面体，背景是深邃的蓝紫色粒子漩涡，粒子从四周向中心旋转汇聚。整体色调为赛博朋克风格，蓝色与紫色渐变，构图采用中心对称，多面体作为视觉焦点。

第一步：理解特效结构

本次特效由两部分组成：

粒子漩涡背景：使用Canvas绘制，粒子围绕中心点做螺旋运动，形成动态漩涡效果。
3D旋转多面体：使用Three.js库创建，一个旋转的正二十面体，表面半透明，带有光晕效果。

两者通过CSS定位叠加在文章详情页内容之上，但不会干扰文字可读性。

第二步：准备工作

你需要准备以下环境：

一个运行子比Zibll主题的WordPress站点（版本7.5及以上）
FTP或主题文件编辑权限
基础的HTML/CSS/JavaScript知识

建议在子主题中进行修改，避免主题更新丢失自定义内容。

第三步：创建子比Zibll子主题（可选但推荐）

在/wp-content/themes/目录下创建文件夹zibll-child。
创建style.css文件，内容如下：

/*
Theme Name: Zibll Child
Template: zibll
*/

创建functions.php文件，用于加载自定义脚本。

第四步：添加粒子漩涡背景

在functions.php中添加以下代码，仅文章详情页加载特效CSS和JS：

function custom_article_effects() {
    if ( is_single() ) {
        wp_enqueue_script( 'three-js', 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js', array(), 'r128', true );
        wp_enqueue_script( 'particle-vortex', get_stylesheet_directory_uri() . '/js/particle-vortex.js', array(), '1.0', true );
        wp_enqueue_style( 'article-effects', get_stylesheet_directory_uri() . '/css/article-effects.css', array(), '1.0' );
    }
}
add_action( 'wp_enqueue_scripts', 'custom_article_effects' );

在子主题目录下创建js/particle-vortex.js文件，写入粒子漩涡代码：

// 粒子漩涡 - Canvas实现
(function() {
    const canvas = document.createElement('canvas');
    canvas.id = 'particle-vortex';
    canvas.style.cssText = 'position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1; pointer-events:none;';
    document.body.appendChild(canvas);

    const ctx = canvas.getContext('2d');
    let particles = [];
    const particleCount = 150;
    const centerX = window.innerWidth / 2;
    const centerY = window.innerHeight / 2;

    function resize() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }
    window.addEventListener('resize', resize);
    resize();

    class Particle {
        constructor() {
            this.angle = Math.random() * Math.PI * 2;
            this.radius = Math.random() * 200 + 50;
            this.speed = 0.002 + Math.random() * 0.005;
            this.size = Math.random() * 3 + 1;
            this.color = `hsla(${220 + Math.random() * 40}, 80%, 60%, 0.6)`;
        }
        update() {
            this.angle += this.speed;
            this.radius += 0.1;
            this.x = centerX + Math.cos(this.angle) * this.radius;
            this.y = centerY + Math.sin(this.angle) * this.radius;
            if (this.radius > 400) {
                this.radius = 50;
                this.angle = Math.random() * Math.PI * 2;
            }
        }
        draw() {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
            ctx.fillStyle = this.color;
            ctx.fill();
        }
    }

    for (let i = 0; i  {
            p.update();
            p.draw();
        });
        requestAnimationFrame(animate);
    }
    animate();
})();

第五步：添加3D旋转多面体

创建js/polyhedron-3d.js文件：

// 3D旋转多面体 - Three.js实现
(function() {
    const container = document.createElement('div');
    container.id = 'polyhedron-3d';
    container.style.cssText = 'position:fixed; top:0; left:0; width:100%; height:100%; z-index:0; pointer-events:none;';
    document.body.appendChild(container);

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
    container.appendChild(renderer.domElement);

    // 创建正二十面体
    const geometry = new THREE.IcosahedronGeometry(2, 0);
    const material = new THREE.MeshPhongMaterial({
        color: 0x4a90e2,
        emissive: 0x1a3a6a,
        transparent: true,
        opacity: 0.4,
        wireframe: false,
        shininess: 30
    });
    const polyhedron = new THREE.Mesh(geometry, material);
    scene.add(polyhedron);

    // 添加线框
    const wireframeMaterial = new THREE.MeshBasicMaterial({
        color: 0x88ccff,
        wireframe: true,
        transparent: true,
        opacity: 0.2
    });
    const wireframe = new THREE.Mesh(geometry, wireframeMaterial);
    polyhedron.add(wireframe);

    // 光源
    const light1 = new THREE.PointLight(0x4488ff, 1, 10);
    light1.position.set(3, 3, 3);
    scene.add(light1);
    const light2 = new THREE.PointLight(0xff44aa, 0.5, 10);
    light2.position.set(-3, -2, 4);
    scene.add(light2);

    camera.position.z = 6;

    function animate() {
        requestAnimationFrame(animate);
        polyhedron.rotation.x += 0.005;
        polyhedron.rotation.y += 0.01;
        renderer.render(scene, camera);
    }
    animate();

    window.addEventListener('resize', () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    });
})();

在functions.php中注册并加载此脚本：

wp_enqueue_script( 'polyhedron-3d', get_stylesheet_directory_uri() . '/js/polyhedron-3d.js', array('three-js'), '1.0', true );

第六步：CSS样式优化

创建css/article-effects.css文件：

/* 文章内容层叠顺序 */
.single .main-content {
    position: relative;
    z-index: 10;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    margin: 20px auto;
    padding: 30px;
    max-width: 800px;
}

/* 针对深色模式 */
.dark-mode .single .main-content {
    background: rgba(30,30,40,0.85);
}

/* 确保特效不被内容遮挡 */
#particle-vortex,
#polyhedron-3d {
    z-index: 1 !important;
}