在 VuePress 中使用

VuePress在 VuePress 中使用 - 图1 是 Vue 驱动的静态网站生成器

VuePress 插件

Vssue 提供了一个 VuePress 插件在 VuePress 中使用 - 图2 - @vssue/vuepress-plugin-vssue在 VuePress 中使用 - 图3 - 来帮助你在 VuePress 中快速使用 Vssue。

使用方法

安装

通过 NPM 安装 @vssue/vuepress-plugin-vssue 和你需要使用的 API 包 ：

  1. npm install @vssue/vuepress-plugin-vssue
  2. npm install @vssue/api-github-v3

使用插件

通过 VuePress 官方文档在 VuePress 中使用 - 图4 查看使用插件的详细方法

  1. // .vuepress/config.js
  3. module.exports = {
  4.   plugins: {
  5.     '@vssue/vuepress-plugin-vssue': {
  6.       // 设置 `platform` 而不是 `api`
  7.       platform: 'github',
  9.       // 其他的 Vssue 配置
  10.       owner: 'OWNER_OF_REPO',
  11.       repo: 'NAME_OF_REPO',
  12.       clientId: 'YOUR_CLIENT_ID',
  13.       clientSecret: 'YOUR_CLIENT_SECRET',
  14.     },
  15.   },
  16. }

提示

唯一的区别在于，你需要设置 platform 而不是对应的 api 包。

@vssue/vuepress-plugin-vssue 会自动根据你设置的 platform 为你解析对应的 api 包：

  • platform github - api 包 @vssue/api-github-v3
  • platform github-v4 - api 包 @vssue/api-github-v4
  • platform gitlab - api 包 @vssue/api-gitlab-v4
  • platform bitbucket - api 包 @vssue/api-bitbucket-v2
  • platform gitee - api 包 @vssue/api-gitee-v5

提示

如果你不设置 locale，Vssue 会自动使用 VuePress 的 $lang 作为当前页面的语言。

参考 Vssue 的 locale 设置，以及 VuePress 的 $lang在 VuePress 中使用 - 图5 属性。

使用 Vssue 组件

Vssue 已经注册为 Vue 组件，你可以在你的 VuePress Markdown 文件中直接使用它。

  1. <!-- README.md -->
  3. # Vssue Demo
  5. <Vssue title="Vssue Demo" />

提示

你可以前往 meteorlxy/vssue-demo在 VuePress 中使用 - 图6 来获取 demo 代码。

自定义样式变量

通过 VuePress 的 palette.styl在 VuePress 中使用 - 图7，你可以很轻松地修改 Vssue 的样式变量。

默认情况下，下面这些 Vssue 的样式变量与 VuePress 的样式变量相等：

  1. // @vssue/vuepress-plugin-vssue/styles/index.styl
  3. $vssue-theme-color ?= $accentColor
  4. $vssue-text-color ?= $textColor
  5. $vssue-border-color ?= $borderColor
  6. $vssue-breakpoint-mobile ?= $MQMobile

如果你想要覆盖它们，在你的 palette.styl 中设置即可：

  1. // .vuepress/styles/palette.styl
  3. $accentColor = blue
  5. $vssue-theme-color = red

不想使用我们提供的插件？

Vssue 是适配 SSR 的，所以你可以不使用 @vssue/vuepress-plugin-vssue，而是像其他 Vue 插件 / 组件一样，在 VuePress 中直接引入 Vssue（尤其是在你对 Vssue 的样式进行了自定义的时候）。

但是我们仍然建议你在 VuePress 中通过 @vssue/vuepress-plugin-vssue 来使用 Vssue，该插件已经帮助你仅在客户端加载 Vssue 来避免一些潜在的问题。

如果你不想使用我们提供的插件，你可能需要将 <Vssue> 组件放置在 <ClientOnly> 组件中来避免这些潜在的问题，即：

  1. <ClientOnly>
  2.   <Vssue />
  3. </ClientOnly>

参考 VuePress 内置的组件 - ClientOnly在 VuePress 中使用 - 图8