Vuepress 主题

Gitalk

尚未发布，正在积极开发中

@zhengxs/vuepress-plugin-gitalk@latest

Gitalkopen in new window 一个基于 Github Issue 和 Preact 开发的评论插件。

@zhengxs/vuepress-plugin-gitalk 是对 Gitalk 的 vuepress 功能集成插件。

该插件已经集成到主题中，但支持独立使用。

未来计划

  • 支持 markdown 语法的方式使用，如 [[gitalk]]

安装

# With NPM
$ npm install @zhengxs/vuepress-plugin-gitalk --save-dev

# With Yarn
$ yarn add @zhengxs/vuepress-plugin-gitalk --dev

# With PNPM
$ pnpm add @zhengxs/vuepress-plugin-gitalk --dev

使用

如果是使用主题，请在主题中 启用评论功能。

初始化

首先，您需要选择一个公共 github 存储库（已存在或创建一个新的 github 存储库）用于存储评论，

然后需要创建 GitHub Application，如果没有 点击这里申请open in new window，Authorization callback URL 填写当前使用插件页面的域名。

// .vuepress/config.js

module.exports = {
  plugins: [
    ['@zhengxs/vuepress-plugin-gitalk', {
      clientID: '3f2d8a4eeea9aed094c1', // GitHub Application Client ID
      clientSecret: '9fd36....8716055', // GitHub Application Client Secret
      repo: 'vuepress-theme-library', // GitHub repository
      owner: 'zhengxs2018', // GitHub repository 所有者，可以是个人或者组织。
      admin: ['zhengxs2018'] // 对这个 repository 有写权限的用户
    }]
  ]
}

渲染

暂只支持组件的方式使用

# 标题

<Twikoo />

配置

支持 Gitalkopen in new window 所有的配置项.

页面的唯一性标识默认为 formatter.permalink || route.path

配置的优先级

formatter > props > 插件配置

Formatter 定义的优先级最高。

Frontmatter

允许使用 Frontmatter 配置

---
gitalk:
  id: formatter.permalink || route.path # 页面的唯一标识
  title: 标题
  labels: [Gitalk]
  number: -1 # 页面的 issue ID 标识
---

组件 Props

可以通过 Props 来进行自定义

<template>
  <Twikoo id="xxxx" title="标题" :number="-1" />
</template>