企业官网建设流程全解析

tsParticles Network Nodes 调色板实战指南：用蓝调粒子快速构建科技网络节点背景

【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles

本指南围绕 tsParticles 生态中的@tsparticles/palette-network-nodes调色板展开，讲解它是什么、包含哪些颜色、如何在 CDN / Vanilla JS / 框架组件中加载使用，并深入引擎源码揭示"调色板（palette）"从注册、查找到自动应用到画布与粒子上的完整机制。读完本文，你将能独立搭建一个深色科技风、带网络节点质感的粒子背景，并理解 palette 与 preset、普通粒子配置之间的边界与协作方式。

什么是 Network Nodes 调色板

networkNodes是 tsParticles 官方调色板系列（palettes目录）中面向tech（科技）主题的一款，npm 包名为@tsparticles/palette-network-nodes，当前仓库中版本为 4.3.3（见 palettes/tech/networkNodes/package.json）。它的视觉定位是"网络节点 / 数据流动"：纯黑近黑的背景上，散布着从深蓝到浅蓝渐变的圆形节点，模拟数字空间、数据网络或星空般的抽象科技感。

官方 README（palettes/tech/networkNodes/README.md）明确强调一个核心概念：

A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.

即调色板只定义颜色，不定义完整行为。它必须与一个运行时基础包（如@tsparticles/basic）以及一份最小的粒子配置配合使用。这与 preset（预设）不同：preset 会注入一整套完整配置，而 palette 只负责"配色方案"这一层。

颜色构成：从源码确认的完整色板

README 给出了完整的颜色表。我在 palettes/tech/networkNodes/src/options.ts 中找到了这份调色板的源码定义，两者完全一致：

同时 README 明确标注了该调色板的两个关键渲染属性：

• 混合模式（Blend mode）：screen
• 填充（Fill）：true

对应到源码options.ts，就是blendMode: "screen"与colors.fill.enable: true。screen混合模式会让重叠粒子的颜色叠加提亮，形成"光点交叠"的网络感，这正是网络节点效果通透发光的来源。

快速上手指南

官方 README 给出了三步清单，我结合仓库结构逐一展开：

1. 安装引擎：@tsparticles/engine（或在浏览器中直接使用 CDN bundle）
2. 加载基础包并注册调色板：加载一个运行时包（如@tsparticles/basic），并在tsParticles.load(...)之前调用loadNetworkNodesPalette
3. 应用调色板 + 最小粒子配置：在 options 中设置palette: "network-nodes"并配合基础粒子参数

之所以需要@tsparticles/basic这样的基础包，是因为 Network Nodes 调色板自身只注册颜色。查看 bundles/basic/src/index.lazy.ts 可以看到loadBasic(engine)会加载一系列基础能力，其中与本调色板直接相关的有：@tsparticles/plugin-blend（实现screen混合模式）、@tsparticles/plugin-hex-color等颜色解析插件、@tsparticles/plugin-move（粒子移动）、@tsparticles/shape-circle（圆形节点形状）、以及 opacity / out-modes / paint / size 等更新器——只有这些插件齐备，调色板定义的"颜色 + 混合模式"才能真正渲染出效果。

方式一：CDN / Vanilla JS / jQuery

在 HTML 中依次引入基础包 bundle 与调色板 bundle：

<script src="https://cdn.jsdelivr.net/npm/@tsparticles/basic@4/tsparticles.basic.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@tsparticles/palette-network-nodes@4/tsparticles.palette-network-nodes.min.js"></script>

注意：官方 README 中第二个<script>的src写为tsparticles.palette-coloredSmokeAmber.min.js，与@tsparticles/palette-network-nodes的包名不一致，疑似从其他调色板文档复制时的笔误。本仓库的 npm 包名为@tsparticles/palette-network-nodes（见 palettes/tech/networkNodes/package.json），实际使用时请以该包名对应的 bundle 文件名为准。

两个脚本加载完成后，window上会挂载tsParticles与loadNetworkNodesPalette两个全局函数——这一点可以从 palettes/tech/networkNodes/src/browser.ts 得到确认：它把loadNetworkNodesPalette写入globalThis。随后即可初始化：

(async engine => { await loadBasic(engine); await loadNetworkNodesPalette(engine); const options = { particles: { number: { value: 200 }, shape: { type: "circle" }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: "network-nodes", }; await engine.load({ id: "tsparticles", options, }); })(tsParticles);

这段示例的核心要点：

• loadBasic(engine)必须先执行，保证 blend、move、circle 形状等插件就绪；
• loadNetworkNodesPalette(engine)负责把调色板注册进引擎的插件管理器（详见下文原理部分）；
• options 中palette字段的值必须与注册名完全一致。本调色板的注册名为"network-nodes"（连字符形式，见 palettes/tech/networkNodes/src/index.ts 中的paletteName常量）。官方 README 示例中写的是"networkNodes"，与注册名不一致，会导致引擎查不到调色板而静默跳过——实际配置时请使用"network-nodes"。

方式二：npm / ES Module（TypeScript）

现代构建环境（Vite、Webpack、Node 侧渲染等）推荐通过 npm 安装后以模块方式加载。引擎侧查找getPalette(name)是直接查 Map（见下文原理），因此加载函数、配置键都必须精确匹配：

import { tsParticles } from "@tsparticles/engine"; import { loadBasic } from "@tsparticles/basic"; import { loadNetworkNodesPalette } from "@tsparticles/palette-network-nodes"; await loadBasic(tsParticles); await loadNetworkNodesPalette(tsParticles); await tsParticles.load({ id: "tsparticles", options: { palette: "network-nodes", background: { color: "#040810" }, particles: { number: { value: 180 }, shape: { type: "circle" }, size: { value: { min: 8, max: 16 } }, move: { enable: true, speed: 1.5 }, }, }, });

包还额外导出了/lazy入口（@tsparticles/palette-network-nodes/lazy），对应源码 palettes/tech/networkNodes/src/index.lazy.ts：它同样注册"network-nodes"，但通过await import("./options.js")将调色板数据做动态懒加载，适合希望把调色板数据拆到独立 chunk、按需加载的场景。package.json的exports字段中.与./lazy两条导出路径分别指向 ESM / CJS / UMD / 浏览器等多种产物。

方式三：带 tsParticles 组件库的框架

React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot、Web Components 等都有对应的 tsParticles 组件库（本仓库的wrappers目录）。在这些框架中，步骤完全相同：先加载基础包与调色板，再在组件初始化选项中设置palette，具体可查阅对应组件库文档并调用loadNetworkNodesPalette函数。

自定义：调色板之上仍可覆盖任意选项

README 特别提醒：在调色板基础上，你仍然可以像标准 tsParticles 安装一样覆盖所有选项。因为调色板只做"颜色 + 背景 + 混合模式"这一层的注入，粒子数量、形状、速度、尺寸、动画等全部由你自由控制。例如把number.value提高到 400、或把move.speed调大，会得到更密集、更活泼的"星云/网络"效果；而#importPalette注入的背景与 blend 配置也会被你在 options 中显式书写的对应配置覆盖（加载顺序上后者生效）。这种"调色板定基调、配置调细节"的组合，正是 palette 设计的目的。

底层原理：调色板是如何被应用渲染的

结合引擎源码，可以完整还原palette: "network-nodes"从注册到渲染的调用链。

1. 调色板的数据结构：IPalette

调色板对象的类型定义在 engine/src/Core/Interfaces/IPalette.ts，包含四个字段：

export interface IPalette { /** 背景颜色 */ background: string; /** 画布混合模式 */ blendMode: GlobalCompositeOperation; /** 调色板颜色，支持单组或多组 */ colors: SingleOrMultiple<IPaletteColors>; /** 调色板名称 */ name: string; }

其中IPaletteColors可含可选的两类颜色配置：

• fill（IPaletteColorsFill）：enable是否启用填充色、opacity透明度范围、value单色或多色值；
• stroke（IPaletteColorsStroke）：opacity、value以及width描边宽度范围。

networkNodes的options.ts正是填充了这一接口：单组fill颜色、enable: true、6 个蓝色色值，外加background: "#040810"与blendMode: "screen"。

2. 注册：PluginManager.addPalette

loadNetworkNodesPalette(engine)的实现非常轻量（palettes/tech/networkNodes/src/index.ts）：

export async function loadNetworkNodesPalette(engine: Engine): Promise<void> { await engine.pluginManager.register(e => { e.pluginManager.addPalette(paletteName, options); }); }

它把名字"network-nodes"与options数据交给引擎的插件管理器，后者在 engine/src/Core/Utils/PluginManager.ts 中维护一个readonly palettes = new Map<string, IPalette>()，addPalette（第 163 行）负责写入、getPalette（第 247 行）负责按名取出。

3. 应用：Options.#importPalette

当你在 options 中写入palette时，引擎在 engine/src/Options/Classes/Options.ts 的doLoad中检测到data.palette !== undefined，随即调用私有方法#importPalette（第 142 行）：

#importPalette(palette: string): void { const paletteData = this.#pluginManager.getPalette(palette); if (!paletteData) { return; } this.load({ background: { color: paletteData.background }, blend: { enable: true, mode: paletteData.blendMode }, particles: { palette }, }); }

可以看到调色板会被拆解注入三处：背景色#040810、blend插件配置（enable: true+screen模式）、以及particles.palette。注意如果getPalette查不到（例如注册名不匹配），这里会直接return，调色板被静默忽略——这就是上面强调"network-nodes"名称必须精确的原因。

4. 上色：ParticlesOptions.#importPalette

粒子侧还会再次以palette字段触发 engine/src/Options/Classes/Particles/ParticlesOptions.ts 中的#importPalette（第 124 行）。它会取出paletteData.colors，把每个颜色变体转换为引擎内部的IPaint（绘制/填充）配置，包括fill.enable、fill.color.value、可选的opacity等，并交给 paint 更新器（@tsparticles/updater-paint）在每帧为粒子选择配色。整个过程与 README 中"Fill: true"的标注一一对应。

这条链路完整解释了 README 快速清单中三条步骤的必然性：没有基础包（尤其plugin-blend、updater-paint、颜色解析插件），调色板的混合模式与颜色无处生效；没有先注册调色板，palette字段查不到数据；名称不一致，则整段应用被静默跳过。

相关文档与进一步阅读

• 调色板与预设的完整目录说明见本仓库 palettes/README.md（仓库内可查看palettes目录下各主题的 README 与源码）；
• 引擎的调色板类型定义与插件管理器实现见 engine/src/Core/Interfaces/IPalette.ts 与 engine/src/Core/Utils/PluginManager.ts；
• 引擎侧 Options 的解析逻辑见 engine/src/Options/Classes/Options.ts 与 engine/src/Options/Classes/Particles/ParticlesOptions.ts；
• 基础包@tsparticles/basic的插件组成见 bundles/basic/src/index.lazy.ts。

【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles