全局配置案例

文件路径

全局配置文件路径为：src/.vuepress/config.ts

config.ts 配置：

// 主体配置
import { defineUserConfig } from "vuepress";
// 引入自定义主题
import theme from "./theme.js";
// 引入搜索插件
import { searchProPlugin } from "vuepress-plugin-search-pro";
// 引入媒体插件
import { componentsPlugin } from "vuepress-plugin-components";

// 定义用户配置
export default defineUserConfig({
  // 网站的基础路径
  base: "/",
  // 使用的语言
  lang: "zh-CN",
  // 网站的标题
  title: "",
  // 网站的描述
  description: "五六零网校知识库",

  // 使用的主题
  theme,

  // 插件设置
  plugins: [
    // VuePress搜索插件设置
    searchProPlugin({
      // 索引全部内容
      indexContent: true,
      // 为分类和标签添加索引
      customFields: [
        {
          getter: (page) => page.frontmatter.category,
          formatter: "分类：$content",
        },
        {
          getter: (page) => page.frontmatter.tag,
          formatter: "标签：$content",
        },
      ],
    }),

    // 媒体插件设置
    componentsPlugin({
      components: [
        "ArtPlayer",
        "AudioPlayer",
        "Badge",
        "BiliBili",
        "CodePen",
        "FontIcon",
        "PDF",
        "Replit",
        "Share",
        "SiteInfo",
        "StackBlitz",
        "VPBanner",
        "VPCard",
        "VidStack",
        "VideoPlayer",
        "XiGua",
        "YouTube",
      ],
      // 使用PWA时启用
      // shouldPrefetch: false,
    }),
  ],
});

插件安装

在示例中使用的插件，需要安装后才能使用

全局搜索插件：

vuepress-plugin-search-pro

安装插件： vuepress-plugin-search-pro

在项目目录下运行终端，执行以下命令

yarn add -D vuepress-plugin-search-pro

媒体插件

安装插件vuepress-plugin-components

在项目目录下运行终端，执行以下命令

npm i -D vuepress-plugin-components

在媒体插件下，如果需要使用VidStack功能，还需要安装子插件

在项目目录下运行终端，执行以下命令

npm i -D vidstack@1