VitePress中文网

全局计算属性

在VitePress中，一些核心的 计算属性 可用在默认主题或自定义主题中。也可以直接用在使用Vue的Markdown页面中，例如使用$frontmatter.title可以获取在页面frontmatter中定义的标题。

$site

这是当前访问站点的$site值：

{
  base: '/',
  lang: 'en-US',
  title: 'VitePress',
  description: 'Vite & Vue powered static site generator.',
  head: [],
  locales: {},
  themeConfig: $themeConfig
}

$themeConfig

引用$site.themeConfig：

{
  locales: {},
  repo: 'vuejs/vitepress',
  docsDir: 'docs',
  editLinks: true,
  editLinkText: 'Edit this page on GitHub',
  lastUpdated: 'Last Updated',
  nav: [...],
  sidebar: { ... }
}

$page

这是当前页面的$page值。

{
  relativePath: 'guide/global-computed.md',
  title: 'Global Computed',
  headers: [
    { level: 2, title: '$site', slug: 'site' },
    { level: 2, title: '$page', slug: '$page' },
    ...
  ],
  frontmatter: $frontmatter,
  lastUpdated: 1606297645000
}

$frontmatter

引用 $page.frontmatter.

{
  title: 'Docs with VitePress',
  editLink: true
}

$lang

当前页面的语言，默认：en-US.

$localePath

当前页面的本地路径，默认：/

$title

当前页面的<title>标签值。

$description

当前页面 <meta name= "description" content= "...">的content值。

$withBase

助手函数，根据在.vitepress/config.js中设置的base路径生成正确的路径。当你想链接到带有基础路径的公共文件，可以这样使用：

<img :src="$withBase('/foo.png')" alt="foo" />