vuepress背景插件vuepress-plugin-bg

时间：2025-11-02 20:42 来源：网络

TIP为vuepress主题提供丰富的可自定义的背景<h2 id="使用方法" tabindex="-1">使用方法 <a class="header-anchor" href="#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95" aria-label='Permalink to "使用方法"'></a></h2><code>pnpm add vuepress-plugin-bg -D</code>或<code>npm i vuepress-plugin-bg -D</code>或<code>yarn add vuepress-plugin-bg -D</code><button title="Copy Code" class="copy"></button>js<pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code>// 配置文件import { defineUserConfig } from 'vuepress';import { bgPlugin } from 'vuepress-plugin-bg';export default defineUserConfig({ plugins: [ bgPlugin({ // 配置参数 }), ],});</code></pre><h2 id="配置参数" tabindex="-1">配置参数 <a class="header-anchor" href="#%E9%85%8D%E7%BD%AE%E5%8F%82%E6%95%B0" aria-label='Permalink to "配置参数"'></a></h2><button title="Copy Code" class="copy"></button>js<pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code>{ type: 'line', // 背景类型目前有 line praticles zIndex: -1, // canvas层级 opacity: 0.9, // canvas透明度 options: { color: '#666', count: 166 } // 对应类型的配置}</code></pre><h2 id="类型对应参数" tabindex="-1">类型对应参数 <a class="header-anchor" href="#%E7%B1%BB%E5%9E%8B%E5%AF%B9%E5%BA%94%E5%8F%82%E6%95%B0" aria-label='Permalink to "类型对应参数"'></a></h2><h3 id="line" tabindex="-1"><code>line</code> <a class="header-anchor" href="#line" aria-label='Permalink to "`line`"'></a></h3><button title="Copy Code" class="copy"></button>js<pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code>bgPlugin({ type: 'line', // 背景类型目前有 line praticles zIndex: -1, // canvas层级 opacity: 0.9, // canvas透明度 options: { color: '#666', // 线的颜色 count: 166, // 线的数量多了可能会卡顿 }, // 对应类型的配置});</code></pre><h3 id="particles" tabindex="-1"><code>particles</code> <a class="header-anchor" href="#particles" aria-label='Permalink to "`particles`"'></a></h3><button title="Copy Code" class="copy"></button>js<pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code>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: [], },}),</code></pre>详细使用请查阅官网 <a href="https://particles.js.org/" target="_blank" rel="noreferrer">tsparticles 官网</a><h4 id="快捷设置" tabindex="-1">快捷设置 <a class="header-anchor" href="#%E5%BF%AB%E6%8D%B7%E8%AE%BE%E7%BD%AE" aria-label='Permalink to "快捷设置"'></a></h4>官网右上角，选择预设，然后自行调整后，点击导出，拿到配置 json 文件<img src="https://oisr.top/res/blog/imgs/1702370910523(1)-2023-12-12.png" alt="1702370910523(1)-2023-12-12">源码 <a href="https://github.com/wstee/vuepress-plugin-bg.git" target="_blank" rel="noreferrer">vuepress-plugin-bg</a>