Package Exports
- vuepress-plugin-bg
- vuepress-plugin-bg/lib/node/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vuepress-plugin-bg) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
vuepress-plugin-bg
vuepress 背景插件
使用方法
pnpm add vuepress-plugin-bg -D
或
npm i vuepress-plugin-bg -D
或
yarn add vuepress-plugin-bg -D
// 配置文件
import { defineUserConfig } from 'vuepress';
import { bgPlugin } from 'vuepress-plugin-bg';
export default defineUserConfig({
plugins: [
bgPlugin({
// 配置参数
}),
],
});配置参数
{
type: 'line', // 背景类型 目前有 line praticles
zIndex: -1, // canvas层级
opacity: 0.9, // canvas透明度
options: {
color: '#666',
count: 166
} // 对应类型的配置
}类型对应参数
line
bgPlugin({
type: 'line', // 背景类型 目前有 line praticles
zIndex: -1, // canvas层级
opacity: 0.9, // canvas透明度
options: {
color: '#666', // 线的颜色
count: 166, // 线的数量 多了可能会卡顿
}, // 对应类型的配置
});particles
bgPlugin({
type: 'particles',
options: {
background: {
color: '#000',
},
fullScreen: {
zIndex: -1,
},
interactivity: {
events: {
onHover: {
mode: 'trail',
enable: true,
},
},
modes: {
trail: {
delay: 0.005,
quantity: 5,
pauseOnStop: true,
particles: {
color: {
value: '#ff0000',
animation: {
enable: true,
speed: 400,
sync: true,
},
},
collisions: {
enable: false,
},
links: {
enable: false,
},
move: {
outModes: {
default: 'destroy',
},
speed: 2,
},
size: {
value: {
min: 1,
max: 5,
},
animation: {
enable: true,
speed: 5,
sync: true,
startValue: 'min',
destroy: 'max',
},
},
},
},
},
},
particles: {
color: {
animation: {
enable: true,
sync: false,
speed: 50,
},
value: '#ff0000',
},
links: {
color: 'random',
enable: true,
},
move: {
enable: true,
},
number: {
value: 100,
density: {
enable: true,
},
},
opacity: {
animation: {
enable: true,
speed: 0.5,
},
value: {
min: 0.3,
max: 0.8,
},
},
size: {
animation: {
enable: true,
speed: 3,
},
value: {
min: 1,
max: 3,
},
},
},
emitters: [],
},
}),详细使用请查阅官网 tsparticles 官网
快捷设置
官网右上角，选择预设，然后自行调整后，点击导出，拿到配置 json 文件
-2023-12-12.png)