preface

In “A blog with VuePress + Github Pages”, we build a blog with VuePress and see what the final TypeScript Chinese document looks like.

This article will show you how to quickly implement comments using Vssue.

Theme with a built-in

Vuepress-theme-reco is a vuepress-theme-reco theme with @vuepress-reco/ vuepress-plugin-Comments. You can choose Valine or Vssue according to your preference.

This article will walk you through implementing comments using Vssue.

Vssue

Liverpoolfc.tv: vssue.js.org/zh/

Vssue is a VUe-driven, issue-based commenting plug-in.

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 plug-in and easily integrated into Vue applications.

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

start

1. Create the GitHub OAuth App

Here we use GitHub as hosting platform, open GitHub developer Settings: github.com/settings/de…

Select “Oauth Apps” and click “Register a New Application” :

To facilitate local testing, we write the URL of Homepage and the URL of Authorization callback as http://localhost:8080. After creating the application, Generate a new client secret

Finally, you get the Client ID and Client secrets.

2. Change the 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',}}}Copy the code

3. Effect display

Run the project and see the results:

However, note that when there is no comment at the beginning, you need to click “Click to create Issue” in the picture to comment normally. When you click “Click to create Issue”, your corresponding Github warehouse will also establish an Issue, and the following reply will appear in this Issue.

Here’s what it looks like with a comment:

4. Open the comments section

If you want to display comments only on certain pages without loading comments by default, you can set showComment: false in valineConfig or vssueConfig and isShowComments: true on pages where you want to display comments.

If you don’t want to enable comments for only one post, you can set isShowComments: false in front-matter.

Problem: Mixed comments from multiple pages

If you create comments on more than one page, you will notice that all comments are grouped together because Vssue requests the corresponding Issue based on labels and title when trying to load comments.

According to the Vssue configuration document: vssue.js.org/zh/options/, we can actually configure labels and other attributes, but because we do not configure them, the requests are all the same, so they are naturally mixed together.

If we just make a message board, that’s fine, but if I have TypeScript documents and I want the comments to be separate for each post, how do I do that?

Although we could have just written this 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'}}}Copy the code

But if you can’t set lables dynamically, it’s not really useful.

In the end, I decided not to use the reco theme’s built-in commenting plug-in, but to use Vssue’s built-in commenting plug-in, which is actually a layer of encapsulation based on Vssue’s built-in plug-in.

So how do you do that? See Vssue’s guide to VuePress:

1. Install the plug-in

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

2. Use plug-ins

// .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',}}};Copy the code

3. Use Vssue components

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

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

See the configuration documentation provided by Vssue:

The Vssue component supports passing in three properties:

  1. title

Labels and title are identifiers for the corresponding Issue where comments are stored.

So make sure vsSUEs on different pages use different titles. Vssue with the same title will correspond to the same Issue and will have the same comment.

  1. issueId

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

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

  1. options

Properties set in prop Options override properties set through vue.use (). It can accept all the configuration in VssueOptions.

You can treat Vssue configurations set through vue.use () as global/default and prop Options as local.

Since the TypeScript documents I translate are also synchronized on my GitHub, I want the comments to be synchronized as well, so I choose to use issueId to get the comment data for the specific issue, using the custom title attribute in general.

4. Effect display

Let’s look at the results:

Problem: The position of the comment section is adjusted

The red rectangle is highlighted in the above image to make you notice that since our Vssue component code is written in the MD file, the comments and content are linked together, while the update date and context links are at the bottom, which would be a bit strange if the comments were longer.

What if we wanted the comments section to be at the bottom? How do you do that?

I tried many things to do this, such as moving DOM elements to the bottom at mount time and mounting components in enhanceapp.js, but they all failed.

Vuepress-plugin-comments reco: Vuepress-plugin-comments

1. Modify vuepress-plugin-comments source code

Go to the vuepress-plugin-comments directory in node_modules and modify the /.bin/ vssue. vue file:

// The component adds a line :issue-id="issueId" <template> <VssueComponent class="vssue-wrapper" :issue-id="issueId" :key="key" :options="vssueOptions" /> </template> // add issueId to script <script> export default {//... computed: { vssueOptions () { // ... }, issueId () { return this.$page.frontmatter.issueId || null } }, // ... } </script>Copy the code

2. Change the config. Js

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

3. Add the issueId attribute to the MD file

Add Front Matter at the beginning of each markdown file and write issueId for the article:

---
issueId: 228
---
Copy the code

4. Effect display

series

Blog building series is the only practical series I have written so far. It is estimated to be about 20 articles, explaining how to use VuePress to build and optimize a blog and deploy it to GitHub, Gitee, private server and other platforms. This is the 26th article in a series at github.com/mqyqingfeng…

Wechat: “MQyqingfeng”, add me Into Hu Yu’s only readership group.

If there is any mistake or not precise place, please be sure to give correction, thank you very much. If you like or are inspired by it, welcome star and encourage the author.