企业官网建设流程全解析

tsParticles Bell Peppers 调色板实战指南：从安装加载到源码原理

【免费下载链接】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/palette-bell-peppers是 tsParticles 官方生态中的一款食物主题调色板，它以甜椒（Bell Peppers）为配色灵感，提供一组红、橙、黄、绿的高饱和粒子填充色，并内置深色背景与叠加混合模式。本文以 palettes/food/bell-peppers/README.md 为骨架，结合该包的 TypeScript 源码与 engine 的调色板机制，完整讲解其安装、加载、配置与自定义方法，并深入到IPalette接口与PluginManager的注册流程，让你不仅能开箱即用，还能掌握 tsParticles 调色板体系的底层原理。

一、这个调色板是什么

在 tsParticles 中，调色板（Palette）只负责定义颜色，不包含完整的粒子行为。它是一组可复用的颜色配置，被引擎注册后，可以通过一行palette: "bell-peppers"选项自动应用到粒子的填充色、描边色与背景上。

Bell Peppers 调色板（包名@tsparticles/palette-bell-peppers，当前仓库版本 4.3.3，见 package.json）的定位就是为粒子场景提供"甜椒色系"：以鲜红、橙、黄、绿为主，配合深色背景突出粒子本身的色彩。在 src/options.ts 中可以看到它的真实定义：

import { type IPalette } from "@tsparticles/engine"; export const options: IPalette = { name: "Bell Peppers", background: "#08110a", blendMode: "overlay", colors: { fill: { enable: true, value: [ "#E53935", // red "#FB8C00", // orange "#FDD835", // yellow "#43A047", // green "#2E7D32", ], }, }, };

也就是说，运行时真正生效的调色板是：

二、README 色卡与源码的差异说明

原 README 中附带了一张 5 行共 24 色的色卡表格，以及Background: #1A1000、Blend mode: source-over、Fill: true的标注：

需要特别说明的是：这张表与当前源码并不完全一致。README 中同时残留了 "colored smoke amber" 的字样（第 7 行的介绍、第 155 行 CDN 脚本名，以及 package.dist.json 中jsdelivr字段），可以推断这份 README 的色卡段落是从其他调色板模板复制后未完全更新。实际运行时以 src/options.ts 为准：背景为#08110a、混合模式为overlay、填充色为 5 个甜椒色。这一点在使用时务必留意，不要被 README 表格误导。

三、快速上手清单

原 README 给出的三步快速清单，完整展开如下：

1. 安装@tsparticles/engine（或直接引入 CDN bundle）；
2. 加载一个基础运行时包（如@tsparticles/basic），并在tsParticles.load(...)之前调用loadBellPeppersPalette(engine)；
3. 在 options 中同时配置palette: "bell-peppers"和一份最简粒子参数。

核心提醒：调色板只定义颜色，不定义行为，所以必须配合运行时包与粒子 options 一起使用，否则仅注册调色板不会产生任何粒子效果。

四、安装方式

方式一：npm 模块安装

npm install @tsparticles/engine @tsparticles/basic @tsparticles/palette-bell-peppers

该包的入口结构（见 package.json 的exports字段）同时提供：

• .（默认入口）：import对应 ESM、require对应 CJS、browser对应浏览器构建；
• ./lazy（懒加载入口）：适用于按需加载场景，见下文"懒加载"一节。

包本身只依赖@tsparticles/engine，且声明了"sideEffects": false，方便打包器做 tree-shaking。

方式二：CDN / Vanilla JS / jQuery

原 README 提供的 CDN 方式是引入@tsparticles/basic@4与@tsparticles/palette-bell-peppers@4两个 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-bell-peppers@4/tsparticles.palette-coloredSmokeAmber.min.js"></script>

⚠️注意：上面第二行脚本名中的palette-coloredSmokeAmber是 README 从其他调色板复制残留的错误文件名，实际发布包的真实 bundle 文件名请以 npm 包内容为准（当前仓库源码构建产物不在此仓库内）。如果 CDN 文件名不确定，更稳妥的做法是使用 npm 安装 + 模块导入的方式。

五、使用示例（Vanilla JS）

脚本加载完成后，按如下方式初始化：

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

要点拆解：

• loadBasic(engine)负责注册最基础的粒子能力（shape、move、size 等），对应@tsparticles/basic包；
• loadBellPeppersPalette(engine)将"bell-peppers"这个名字注册进引擎的调色板管理器；
• options 中的palette: "bell-peppers"字符串会触发引擎内部按名字查找并导入调色板；
• number.value: 200表示 200 个粒子，size用{ min: 10, max: 15 }表达随机区间，move.speed: 2控制移动速度——这些是配合调色板展示效果的最简参数。

六、自定义覆盖（Customization）

调色板只决定颜色，所有粒子 options 都可以像标准 tsParticles 安装一样被覆盖。例如你完全可以在上面的 options 中把形状改成star、把大小改成{ min: 5, max: 30 }，或叠加links、interactivity等更多模块——palette字段与这些常规配置正交、互不冲突。

如果你希望更进一步，可以在加载后手动修改调色板本身。引擎侧通过engine.pluginManager.addPalette(name, palette)注册、getPalette(name)读取（见 PluginManager.ts），这意味着你可以在loadBellPeppersPalette(engine)之后用同样的 API 重新注册一个同名调色板来整体替换颜色方案。

七、在框架组件库中使用

tsParticles 为 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot、Web Components 等提供了官方组件库（见仓库 wrappers 目录）。在这些框架中使用 Bell Peppers 调色板的流程与 Vanilla 一致：

1. 在组件初始化钩子中调用loadBellPeppersPalette(engine)；
2. 将palette: "bell-peppers"写入组件传入的 options。

具体 API 形态以对应组件库文档为准，但"先加载调色板、再在 options 中引用名字"的原则是通用的。

八、懒加载（lazy）入口

除了默认入口，包还提供了懒加载版本 src/index.lazy.ts：

import { type Engine } from "@tsparticles/engine/lazy"; const paletteName = "bell-peppers"; export async function loadBellPeppersPalette(engine: Engine): Promise<void> { await engine.pluginManager.register(async e => { const { options } = await import("./options.js"); e.pluginManager.addPalette(paletteName, options); }); }

与 src/index.ts 的立即加载版本相比，懒加载版通过await import("./options.js")把颜色配置做成了动态按需加载：只有真正用到这个调色板时才会下载对应的颜色数据，适合对首屏体积敏感的场景。打包时通过@tsparticles/palette-bell-peppers/lazy子路径引入即可。

九、源码原理：调色板如何被引擎消费

1.IPalette接口定义

engine 侧定义了调色板的标准结构，见 engine/src/Core/Interfaces/IPalette.ts：

/** 填充色配置 */ export interface IPaletteColorsFill { enable: boolean; // 是否启用填充色 opacity?: RangeValue; // 填充色透明度（可传区间） value: SingleOrMultiple<string>; // 颜色值，单个或多个 } /** 描边色配置 */ export interface IPaletteColorsStroke { opacity?: RangeValue; // 描边透明度 value: SingleOrMultiple<string>; // 描边颜色 width: RangeValue; // 描边宽度 } /** 颜色集合：填充与描边均为可选 */ export interface IPaletteColors { fill?: IPaletteColorsFill; stroke?: IPaletteColorsStroke; } /** 调色板定义 */ export interface IPalette { background: string; // 背景色 blendMode: GlobalCompositeOperation; // Canvas 混合模式 colors: SingleOrMultiple<IPaletteColors>; // 一组或多组颜色 name: string; // 调色板名 }

值得注意的扩展点：SingleOrMultiple<IPaletteColors>意味着colors既可以是单个对象，也可以是数组（多组颜色按序或按权重应用）；opacity、width都支持RangeValue（固定值或{ min, max }区间）。Bell Peppers 当前只用了fill分支，未启用stroke。

2. 注册与解析链路

整个链路分为两步：

• 注册：loadBellPeppersPalette通过engine.pluginManager.register(...)注册回调，回调内部调用e.pluginManager.addPalette(paletteName, options)，把"bell-peppers"名字映射到颜色对象，存入PluginManager的palettesMap（见 PluginManager.ts）；
• 消费：当 options 中出现palette: "bell-peppers"时，engine 的 Options.ts 会在加载配置时调用#importPalette，通过pluginManager.getPalette(name)取回颜色数据并应用到背景、混合模式与粒子颜色上。同时 ParticlesOptions.ts 也支持在粒子级指定palette，实现"不同粒子使用不同调色板"的细粒度控制。

3. 浏览器全局版入口

browser.ts 会把loadBellPeppersPalette挂到globalThis（即window）上，供 CDN 方式直接调用，同时export * from "./index.js"保留模块化导出能力。

十、常见问题与注意事项

1. 忘记加载调色板：如果调用了tsParticles.load却未先执行loadBellPeppersPalette(engine)，palette: "bell-peppers"会因getPalette找不到名字而被静默忽略，效果上表现为颜色不生效；
2. 依赖@tsparticles/basic等运行时包：调色板不包含 shape/move/size 等能力，至少需要一个基础包（basic、slim、full或all，见 bundles 目录）；
3. README 色卡与源码不一致：以 src/options.ts 为准，背景#08110a、混合模式overlay、5 个填充色；README 中的#1A1000背景与source-over模式属于模板残留；
4. CDN 脚本名存疑：README 中第二个<script>的tsparticles.palette-coloredSmokeAmber.min.js是复制残留，实际文件名以发布的 npm 包为准；
5. 想微调颜色：调色板是普通数据对象，你完全可以不加载本包，而是仿照 src/options.ts 的结构用engine.pluginManager.addPalette("my-peppers", {...})自定义一个属于自己的甜椒色板。

十一、进一步探索

• 同主题的更多食物色板：@tsparticles/palette-*系列位于 palettes/food 目录下（apple、avocado、cherry、pizza、sushi、watermelon 等）；
• 调色板接口与插件机制源码：IPalette.ts、PluginManager.ts；
• options 中palette字段的解析：Options.ts；
• 各框架封装组件：wrappers 目录。

掌握了"调色板只定义颜色、通过loadXxxPalette注册、通过 options 引用名字"这一整套机制后，你不仅能熟练使用 Bell Peppers，也能照葫芦画瓢地为自己的项目定制任意色系的 tsParticles 调色板。

【免费下载链接】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