WentUrc Docs

外观

在VuePress中添加评论功能

1854字约6分钟

技术文档

在VuePress中添加评论功能可以通过多种插件实现，以下是一些常用的插件及其特点：

  1. vuepress-plugin-comment-plus ：

    • 支持Waline（推荐）、Gitalk、Valine等多种评论服务。
    • 后续会增加更多评论服务，请关注。

  2. vssue ：

    • 一个Vue驱动的、基于Issue的评论插件。
    • 支持多个代码托管平台，包括GitHub、GitLab、Bitbucket、Gitee和Gitea。
    • 可以让用户通过这些平台的帐号登录，将评论存储在这些平台的Issue系统中，并在当前页面展示。

  3. @vuepress/plugin-comment ：

    • 主题使用@vuepress/plugin-comment提供评论支持。
    • 目前支持Artalk、Giscus、Twikoo、Waline四种评论服务。
    • 如果你不需要评论功能，请忽略此选项。

  4. Valine ：

    • 一款快速、简洁且高效的无后端评论系统。
    • 支持在VuePress中使用，自动管理SPA路由相关的工作。

  5. Giscus ：

    • GitHub的一个功能，用于专门存放评论的功能。
    • 需要依托一个仓库，可以通过Settings>Features>Discussions来开通。

  6. Artalk ：

    • 配置文件在data目录下，可以通过修改配置文件来管理评论。

  7. vuepress-plugin-vdoing-comment ：

    • 支持Gitalk、Valine、Artalk等评论服务。

  8. vuepress-plugin-comment ：

    • 如果你想要在指定页面隐藏评论插件，可以在frontmatter中设置comment或comments为false。

选择合适的评论插件可以根据你的需求和偏好。例如，如果你希望使用GitHub的Issue系统来管理评论，可以选择vssue；如果你希望使用一个快速且高效的无后端评论系统，可以选择Valine。每个插件都有其特定的配置步骤和特点，建议根据具体需求进行选择和配置。

如何在VuePress中配置和使用vuepress-plugin-comment-plus插件？

在VuePress中配置和使用vuepress-plugin-comment-plus插件的步骤如下：

  1. 安装插件：首先，你需要在项目中安装vuepress-plugin-comment-plus插件。可以通过npm或yarn来安装：
   npm install vuepress-plugin-comment-plus --save

或者

   yarn add vuepress-plugin-comment-plus
  1. 配置插件：在你的VuePress项目的根目录下的config.js 文件中，添加并配置该插件。例如：
   module.exports  = {
     plugins: [
       ['vuepress-plugin-comment-plus', {
         // 在这里添加你的插件选项
       }]
     ]
   };

根据插件的文档，你可能需要提供一些配置选项，比如API密钥、评论系统的类型等。

  1. 使用插件：在你的Markdown文件中，你可以通过特定的语法来使用插件的功能。例如，如果你使用的是Valine作为评论系统，你可以在Markdown文件中添加相应的代码块来启用评论功能。

  2. 客户端配置：如果需要更复杂的配置，你可以在客户端配置文件中进行设置。这可以通过VuePress提供的客户端配置API来实现。

vssue插件在VuePress中的具体配置步骤是什么？

在VuePress中配置vssue插件的具体步骤如下：

  1. 安装vssue插件：使用yarn或npm命令安装@vssue/vuepress插件。例如，可以使用yarn add @vssue/vuepress命令进行安装。

  2. 在.vuepress/config.js 文件中配置vssue插件。具体配置如下：

   plugins: [
     ['vuepress-plugin-vssue-global', {
       platform: 'github', // 选择你的平台，如github、gitlab等
       owner: '你的用户名',
       repo: '你的仓库名',
       issueId: '你的issue id'
     }]
   ]

这里的platform参数需要根据你使用的平台进行选择，如github、gitlab等。同时，你需要提供你的GitHub用户名、仓库名以及issue的id。

  1. 如果你不想使用官方提供的插件，也可以直接在VuePress中引入Vssue组件。但是，为了兼容SSR（服务器端渲染），建议将Vssue组件放置在<ClientOnly>组件中。

  2. 在Markdown文件中直接使用Vssue组件。例如：

   <template>
     <Vssue :issue-id quote />
   </template>

这样可以在你的VuePress Markdown文件中直接使用Vssue组件。

  1. 如果你对Vssue的样式进行了自定义，可以直接在VuePress中引入Vssue组件，而不需要使用@vssue/vuepress-plugin-vssue。但是，为了兼容SSR，建议将Vssue组件放置在<ClientOnly>组件中。

@vuepress/plugin-comment支持的评论服务有哪些，以及如何配置？

@vuepress/plugin-comment 支持多种不同的评论服务提供商，包括 Artalk、Giscus、Twikoo 和 Waline。这些服务提供商各有特点，可以根据个人需求进行选择和配置。

支持的评论服务

  1. Artalk
  2. Giscus
  3. Twikoo
  4. Waline

配置方法

1. 安装插件

首先需要在 VuePress 项目中安装 vuepress-plugin-comment 插件。可以通过 npm 或 yarn 进行安装：

npm install vuepress-plugin-comment --save
# 或者使用 yarn
yarn add vuepress-plugin-comment

2. 配置插件

在项目的 config.js 文件中添加插件配置：

module.exports  = {
  plugins: [
    ['vuepress-plugin-comment', {
      // 选择评论服务提供商
      comment: 'valine', // 或者选择其他服务如 'giscus', 'twikoo', 'waline'
      // 配置选项，具体参数取决于所选的评论服务
      options: {
        el: '#valine-vuepress-comment',
        appId: 'your-app-id',
        appKey: 'your-app-key'
        // 其他参数根据所选服务提供商的要求进行配置
      }
    }]
  ]
}

例如，如果选择使用 Valine，可以这样配置：

module.exports  = {
  plugins: [
    ['vuepress-plugin-comment', {
      comment: 'valine',
      options: {
        el: '#valine-vuepress-comment',
        appId: 'your-app-id',
        appKey: 'your-app-key'
      }
    }]


#### Valine插件在VuePress项目中的安装和使用指南。


在VuePress项目中安装和使用Valine评论插件的步骤如下：

1. **安装Valine插件**：
   - 使用npm安装：`npm install --save vuepress-plugin-comment`
   - 或者使用yarn安装：`yarn add vuepress-plugin-comment -D`

2. **配置Valine插件**：
   - 在你的VuePress项目的`config.js `文件中引入插件。例如：
```javascript
module.exports  = {
plugins: [
['vuepress-plugin-comment', {
app_id: 'your-app-id',
app_key: 'your-app-key',
// 其他配置项...
}]
]
}
  • 获取appId和appKey：前往LeanCloud官网注册账号，然后在应用设置中获取。

  1. 美化Valine组件（可选）：

    • 可以通过自定义CSS来美化Valine组件，例如在src CSS文件中添加样式。

  2. 引用Valine组件：

    • 将Valine.vue 组件引用到你想要显示评论的地方。

  3. 主题内置Valine评论功能：

    • 如果你使用的是vuepress-theme-reco主题，该主题已经内置了Valine评论插件，你不需要额外安装和配置。

以上步骤基于搜索结果中的，它们提供了关于如何在VuePress项目中安装和使用Valine评论插件的详细指南。

Giscus插件如何在VuePress网站上实现，并管理其设置？

要在VuePress网站上实现Giscus插件并管理其设置，可以按照以下步骤进行：

首先，你需要在你的VuePress项目中安装Giscus插件。可以通过npm命令来安装：

   npm install --save vuepress-plugin-comment

这个插件可以帮助你在VuePress网站上开启评论功能。

安装完成后，你需要在VuePress的配置文件中添加Giscus插件。通常，这个配置文件是config.js 或config.ts 。在该文件中，你可以通过引入和配置插件来启用Giscus评论功能：

   module.exports  = {
plugins: [
[
'vuepress-plugin-comment',
{
// 配置选项
id: 'your-giscus-id', // 你的Giscus实例ID
repo: 'your-repo-name', // GitHub仓库名称
category: 'all', // 讨论分类
映射: 'id', // 映射字段
mapping: 'title', // 映射字段
granular Mapping: true, // 是否启用细粒

Palimpsested by Ice Glycoside Crystal

© 2024 - present 冰苷晶 IGCyukira