插件

鼠标特效

基于@moefy-canvas/theme-popper，查看了Oragekk's Blog这位博主的博客进行配置。

首先安装依赖：

pnpm add @moefy-canvas

然后在.vuepress下创建plugins文件夹，在plugins文件夹下创建vuepress-plugin-popper文件夹，文件夹结构如下：

.
├──.vuepress
│   ├── plugins
│   │   └── vuepress-plugin-popper
│   │       ├── client
│   │       │   ├── components  
│   │       │   │   └── DenaroMoefyCanvas.ts
│   │       │   └── popper-client-config.ts  
│   │       ├── index.ts
│   │       └── type.ts

然后在index.ts中写入以下内容：

// .vuepress/plugins/vuepress-plugin-popper/index.ts
import { App, PageOptions, PluginFunction } from "vuepress";
import { getDirname, path } from "vuepress/utils";
import { PopperOption } from "./type.js";

const __dirname = getDirname(import.meta.url);

const popperPlugin = (options?: PopperOption): PluginFunction => {
  return (app) => {
    return {
      name: "vuepress-plugin-popper",
      define: {
        popperOptions: options,
      },
      multiple: false,
      clientConfigFile: path.resolve(
        __dirname,
        "./client/popper-client-config.ts"
      ),
    };
  };
};
export { popperPlugin };

在type.ts中写入以下内容：

import type { CanvasOptions } from '@moefy-canvas/core'
import type {PopperConfig} from '@moefy-canvas/theme-popper'

export interface PopperOption {
   config:PopperConfig;
   canvasOptions?:CanvasOptions
}

在popper-client-main.ts中写入以下内容：

import { defineClientConfig, usePageData, useSiteData } from "vuepress/client";
import {DenaroMoefyCanvas} from "../client/components/DenaroMoefyCanvas"


export default defineClientConfig({
  rootComponents: [DenaroMoefyCanvas],
});

在components文件夹下创建DenaroMoefyCanvas.ts文件，写入以下内容：

import type { CanvasOptions } from "@moefy-canvas/core";
import type { VNode } from "vue";
import { defineComponent, h, onBeforeUnmount, onMounted } from "vue";
import { PopperOption } from "../../type.js";
import { Popper, PopperConfig, PopperShape } from "@moefy-canvas/theme-popper";
declare const popperOptions: PopperOption;
const MAX_Z_INDEX = 2147483647;
export const DenaroMoefyCanvas = defineComponent({
  name: "DenaroMoefyCanvas",
  setup() {
    let moefyCanvas: Popper | null = null;
    const id = "moefy-canvas";
    const getCanvas = (): HTMLCanvasElement => {
      const canvas: HTMLCanvasElement = document.getElementById(
        id
      ) as HTMLCanvasElement;

      return canvas;
    };
    const themeConfig: PopperConfig = {
      shape: popperOptions.config.shape
        ? popperOptions.config.shape
        : PopperShape.Star,
      size: popperOptions.config.size ? popperOptions.config.size : 1.75,
      numParticles: popperOptions.config.numParticles
        ? popperOptions.config.numParticles
        : 10,
    };
    const canvasOptions: CanvasOptions = {
      opacity: 1,
      zIndex: MAX_Z_INDEX,
    };
    onMounted(() => {
      if (window.screen.availWidth < 719) {
        //移动端
        return;
      }
      moefyCanvas = new Popper(themeConfig, canvasOptions);
      moefyCanvas && moefyCanvas.mount(getCanvas());
    });

    onBeforeUnmount(() => {
      moefyCanvas && moefyCanvas.unmount();
    });

    return (): VNode =>
      !__VUEPRESS_SSR__ && window.screen.availWidth > 719 ? h("div", { class: id }, h("canvas", { id })) : h("");
  },
});

最后在.vuepress/config.ts中配置插件：

import { defineUserConfig } from "vuepress";
import { popperPlugin } from "./plugins/vuepress-plugin-popper/index.js";
import { PopperShape } from "@moefy-canvas/theme-popper";
export default defineUserConfig({
    plugins: [
        popperPlugin({
            config: {
                shape: PopperShape.Star,
                size: 1.95,
                numParticles: 8,
            },
        }),
    ]
//     其它配置项
})

音乐播放器

借鉴MetingJS解析和使用APlayer作为播放组件，使用了Oragekk's Blog博主的开源项目vuepress-plugin-meting2 安装依赖：

npm

npm i vuepress-plugin-meting2 -D

pnpm

pnpm add vuepress-plugin-meting2 -D

使用：

import { defineUserConfig } from "vuepress";
import { metingPlugin } from "vuepress-plugin-meting2";
export default defineUserConfig({
    plugins: [
        metingPlugin({
            metingOptions: {
                global:true, // 开启关闭全局播放器
                server: "tencent",
                api: "https://api.injahow.cn/meting/?server=:server&type=:type&id=:id&auth=:auth&r=:r",
                type: "playlist",
                mid: "851947617",
            },
        }),
    ]
//     其它配置项
})

参考博客站点

Oragekk's Blog

愿人生如剑，立起寒光四射，躺倒四射寒光。