theme-data

为你的主题提供客户端数据，包含 VuePress 的 多语言支持 。

该插件主要用于开发主题，并且已经集成到默认主题中。大部分情况下你不需要直接使用它。

对于主题作者，该插件可以提供与 VuePress 及默认主题相同的多语言支持机制。但是如果你的主题不需要提供多语言支持，或者你想用你自己的方式来实现多语言支持，那么你不需要使用该插件。

使用方法

npm i -D @vuepress/plugin-theme-data@next

import { themeDataPlugin } from "@vuepress/plugin-theme-data";

export default {
  plugins: [
    themeDataPlugin({
      // 配置项
    }),
  ],
};

配置项

themeData

• 类型： ThemeData

• 默认值： {}

• 详情：

  你希望在 Client 端中使用的主题数据对象。

  你可以通过该配置项，在 Node 端提供主题数据，然后在客户端通过 useThemeData 和 useThemeLocaleData 来使用主题数据。

• 示例：

export default {
  plugins: [
    themeDataPlugin({
      themeData: {
        foo: "foo",
        locales: {
          "/zh/": {
            foo: "zh-foo",
          },
        },
      },
    }),
  ],
};

注意

主题数据对象在传递到客户端之前，会使用 JSON.stringify() 进行处理，因此你需要保证你提供的是一个可以被 JSON 序列化的对象。

Composition API

useThemeData

• 详情：

  返回主题数据的 Ref 对象。

  数据是通过 themeData 配置项提供的。

• 示例：

import { useThemeData } from "@vuepress/plugin-theme-data/client";
import type { ThemeData } from "@vuepress/plugin-theme-data/client";

type MyThemeData = ThemeData<{
  foo: string;
}>;

export default {
  setup() {
    const themeData = useThemeData<MyThemeData>();
    console.log(themeData.value);
  },
};

useThemeLocaleData

• 详情：

  返回当前 locale 下主题数据的 Ref 对象。

  当前 locale 中的字段已被合并到顶层字段中。

• 示例：

import { useThemeLocaleData } from "@vuepress/plugin-theme-data/client";
import type { ThemeData } from "@vuepress/plugin-theme-data/client";

type MyThemeData = ThemeData<{
  foo: string;
}>;

export default {
  setup() {
    const themeLocaleData = useThemeLocaleData<MyThemeData>();
    console.log(themeLocaleData.value);
  },
};