客户端 API

@vuepress/client

客户端 API 是由 @vuepress/client在新窗口打开 Package 提供的,用于开发客户端文件。

Composition API

usePageData

usePageFrontmatter

  • 详情:

    返回当前页面 Frontmatter 的 Ref 对象。

    它的值是页面数据的 frontmatter 属性。

usePageHead

  • 详情:

    返回当前页面 Head 配置的 Ref 对象。

    它的值是合并 head Frontmatter 和 head 配置,并进行去重后得到的。

usePageHeadTitle

  • 详情:

    返回当前页面 Head 中的标题的 Ref 对象。

    它的值是连接页面标题和站点标题后得到的。

usePageLang

  • 详情:

    返回当前页面语言的 Ref 对象。

    它的值是页面数据的 lang 属性。

useRouteLocale

  • 详情:

    返回当前路由对应的 locale path 的 Ref 对象。

    它的值是 locales 配置的键之一。

useSiteData

  • 详情:

    返回站点数据的 Ref 对象。

useSiteLocaleData

  • 详情:

    返回当前 locale 的站点数据的 Ref 对象。

    当前 locale 中的配置已经合并到顶层配置中。

工具函数

defineClientAppEnhance

创建 clientAppEnhance.ts 文件:

import { defineClientAppEnhance } from '@vuepress/client'

export default defineClientAppEnhance(({ app, router, siteData }) => {
  // ...
})
1
2
3
4
5

defineClientAppSetup

创建 clientAppSetup.ts 文件:

import { defineClientAppSetup } from '@vuepress/client'

export default defineClientAppSetup(() => {
  // ...
})
1
2
3
4
5

withBase

常量

在客户端代码中有一些常量可以使用。

如果想要把这些常量的类型定义补充到你的代码环境中,请将 @vuepress/client/types 添加到你的 tsconfig.json 里:

{
  "compilerOptions": {
    "types": ["@vuepress/client/types"]
  }
}
1
2
3
4
5

__VUEPRESS_VERSION__

  • 类型: string

  • 详情:

    VuePress Core 的版本号。

__VUEPRESS_DEV__

  • 类型: boolean

  • 详情:

    一个环境标记,用于标识当前是否运行在 dev 模式下。

__VUEPRESS_SSR__

  • 类型: boolean

  • 详情:

    一个环境标记,用于标识当前是否运行在服务端渲染 (SSR) 环境下。

进阶能力

resolvers 实验性能力

  • 类型: Record<string, Function>

  • 详情:

    一个响应式对象,其中的方法决定了如何获取全局计算属性。

  • 示例:

clientAppEnhance.ts 文件中自定义 <title> 的格式:

import { defineClientAppEnhance, resolvers } from '@vuepress/client'

export default defineClientAppEnhance(({ app, router, siteData }) => {
  // ...
  resolvers.resolvePageHeadTitle = (page, siteLocale) =>
    `${siteLocale.title} > ${page.title}`
})
1
2
3
4
5
6
7

警告

resolvers 会直接影响 VuePress 的基础功能,在修改前请确保你已充分了解其用途。