VuePress blog optimization adds Vssue comment function

foreword

In "An article that takes you to build a blog with VuePress + Github Pages" , we used VuePress to build a blog, and the final effect can be viewed: TypeScript Chinese document .

This article talks about how to use Vssue to quickly implement the comment function.

Theme built-in

Because I am using the vuepress-theme-reco theme, the theme has a built-in comment plugin @vuepress-reco/vuepress-plugin-comments , and you can choose Valine or Vssue according to your own preferences.

Then let's introduce Vssue.

Vssue

Official website: https://vssue.js.org/zh/

Vssue is a Vue-powered, Issue-based commenting plugin.

Features support for multiple code hosting platforms, including GitHub, GitLab, Bitbucket, Gitee, and Gitea. Because it is based on Vue, it can be used as a Vue plugin and easily integrated into Vue applications.

You can click on the official website link to enter the home page and experience the comment effect directly in the comment box on the page.

Start

1. Create a GitHub OAuth App

Here we use GitHub as the hosting platform and open GitHub's developer settings: https://github.com/settings/developers

Select 「Oauth Apps」 , then click 「Register a new application」 :

In order to facilitate local testing, we write Homepage URL and Authorization callback URL as http://localhost:8080 . After creating the application, we click Generate a new client secret to generate Client secrets :

Finally, Client ID and Client secrets will be obtained.

2. Modify config.js

module.exports = {
  theme: 'reco',
  themeConfig: {
    vssueConfig: {
      platform: 'github',
      owner: 'OWNER_OF_REPO',
      repo: 'NAME_OF_REPO',
      clientId: 'YOUR_CLIENT_ID',
      clientSecret: 'YOUR_CLIENT_SECRET',
    }
  }  
}

3. Effect display

Run the project and you can see the effect:

But note that when there is no comment at the beginning, you need to click "click to create an issue" in the figure to comment normally. When you click "click to create an issue", your corresponding Github repository will also create an issue. The next replies will appear in this issue.

This is the effect after comments:

4. Comments section opens

If you want to not load comments by default, but only display the comment function on certain pages, you can set isShowComments: true in valineConfig or vssueConfig , and set showComment: false on the page that needs to display comments.

If you just don't want to set the comment function on an article, you can set isShowComments: false front-matter

Problem: Comments from multiple pages are mixed together

If you create comments on several pages, you will find that all the comments are together, because when Vssue tries to load comments, it requests the corresponding Issue based on labels and title.

Referring to the configuration document of Vssue: https://vssue.js.org/zh/options/ In fact, we can configure attributes such as labels, but because we do not configure it, the request is all the same. Naturally mixed together.

If we just do a message board, it's fine, but for example, my TypeScript documentation, I definitely want to separate the comments for each article, so how to achieve it?

Although we can write this directly in config.js :

module.exports = {
  theme: 'reco',
  themeConfig: {
    vssueConfig: {
      platform: 'github',
      owner: 'OWNER_OF_REPO',
      repo: 'NAME_OF_REPO',
      clientId: 'YOUR_CLIENT_ID',
      clientSecret: 'YOUR_CLIENT_SECRET',
      labels: 'xxx'
    }
  }  
}

But if you can't dynamically set the labels, it's still useless.

In the end, I decided not to use the comment plugin built into the reco theme, but to use the plugin provided by Vssue. In fact, the comment plugin built in reco is a layer of encapsulation based on the plugin provided by Vssue.

How to achieve it? Refer to the VuePress guide 162289dd2d7350 provided by :

1. Install the plugin

yarn add @vssue/vuepress-plugin-vssue -D
yarn add @vssue/api-github-v3 -D

2. Use plugins

// .vuepress/config.js

module.exports = {
  plugins: {
    '@vssue/vuepress-plugin-vssue': {
      platform: 'github',
      owner: 'OWNER_OF_REPO',
      repo: 'NAME_OF_REPO',
      clientId: 'YOUR_CLIENT_ID',
      clientSecret: 'YOUR_CLIENT_SECRET',
    },
  },
};

3. Using Vssue Components

Vssue is already registered as a Vue component and you can use it directly in your VuePress Markdown files.

 <template>
  <Vssue :issue-id="228" />
</template>

Refer to the configuration document 162289dd2d741f provided by :

The Vssue component supports passing in three properties:

1. title

labels and title are the identifiers of the corresponding Issue where the comments are stored.

So please make sure that Vssues of different pages use different titles. Vssues with the same title will correspond to the same Issue, and will have the same comments.

2. issueId

If issueId is set, Vssue will use it directly to determine which Issue to use, instead of looking up the corresponding Issue based on labels and title. This will speed up the initialization process of Vssue.

But in this case, you have to create the Issue manually. If the corresponding Issue does not exist, Vssue will not try to create a new Issue for you.

3. options

Properties set in prop options override properties set via Vue.use(). It can receive all the configuration in VssueOptions.

You can treat the configuration set via Vue.use() as the global/default configuration of Vssue, and the configuration set via prop options as the local configuration.

Because the TypeScript document I translated is also synchronized on my GitHub , so I want the comments to be synchronized. For this reason, I choose to use issueId to get the comment data of the specified issue. For normal use, I still use the custom title attribute. .

4. Effect display

Let's take a look at the effect:

Problem: Adjustment of the position of the comment area

The reason why the above picture is marked with a red rectangle is to let everyone notice that because our Vssue component code is written in the md file, the comments and content are linked together, and the update time and context links are At the bottom, it's a little weird if the comments are longer.

What if we like to make the comment area appear at the bottom? How to achieve it?

I've tried many ways to do this, like moving the DOM element to the bottom when it mounts, and mounting the component in enhanceApp.js, but it all ended in failure.

In the end, I decided to stop talking about martial arts and directly change the source code of the vuepress-plugin-comments component built into reco:

1. Modify the source code of vuepress-plugin-comments

Find the code directory of node_modules in vuepress-plugin-comments , and modify the /.bin/Vssue.vue file:

// 组件加了一行 :issue-id="issueId"
<template>
  <VssueComponent
    class="vssue-wrapper"
    :issue-id="issueId"
    :key="key"
    :options="vssueOptions"
  />
</template>

// script 中加入 issueId 计算属性
<script>
export default {
  // ...
  computed: {
    vssueOptions () {
      // ...
    },
    issueId () {
      return this.$page.frontmatter.issueId || null
    }
  },
    // ...
}
</script>

2. Modify config.js

module.exports = {
  theme: 'reco',
  themeConfig: {
  vssueConfig: {
      platform: 'github',
      owner: 'mqyqingfeng',
      repo: 'Blog',
      clientId: 'YOUR_CLIENT_ID',
      clientSecret: 'YOUR_CLIENT_SECRET'
   },
  }  
}

3. Add issueId attribute to md file

Add Front Matter at the very beginning of each markdown file and write the issueId corresponding to the article:

---
issueId: 228
---

4. Effect display

series of articles

The blog building series is the only series of practical tutorials I have written so far. It is expected to be about 20 articles, explaining how to use VuePress to build and optimize blogs, and deploy them to GitHub, Gitee, private servers and other platforms. This article is the 26th article, the address of the full series of articles: https://github.com/mqyqingfeng/Blog

WeChat: "mqyqingfeng", add me to the only readership of Xianyu.

If there are any mistakes or inaccuracies, please be sure to correct me, thank you very much. If you like or have inspiration, welcome to star, which is also an encouragement to the author.