VuePress blog optimization adds Valine 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 Valine 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. This article talks about the whole process of using Valine to realize the comment function.

Valine

Official website: https://valine.js.org/

Born on August 7, 2017, Valine is a fast, concise and efficient no-backend commenting system based on LeanCloud.

Features are safe, fast, Emoji support, no backend implementation, MarkDown full syntax support, lightweight and easy to use, etc.

LeanCloud

Valine is based on LeanCloud, LeanCloud official website: https://www.leancloud.cn/

LeanCloud is a serverless cloud service that provides one-stop back-end services, such as data storage, instant messaging, etc. In simple terms, for example, if I want to implement a data storage function, I only need to register an account in LeanCloud, Get the corresponding App ID and App Key, and then call the provided API to store data. The following is a way to use JavaScript syntax:

Start

With a basic understanding, let's get started.

1. Registration

Sign up for LeanCloud: https://leancloud.cn/dashboard/login.html#/signup

Note that to use LeanCloud's services, you need to complete real-name authentication. After filling in your name and ID number, you need to use the Alipay account with the corresponding name to scan the code for authentication. After scanning the code, you can complete the real-name authentication.

2. Create an app

logs in to , enter the console and click "Create Application" in the lower left corner:

In creating an application, here we choose the development version. The development version has a usage limit. For example, the API request is 3W times per day and the data storage space is 1GB, which is enough for personal projects:

3. View application credentials

After creation, click to enter the management background of the application, select "Settings" - "App Credentials", and then you can see your APP ID and APP Key:

4. VuePress introduction

Modify config.js:

module.exports = {
  theme: 'reco',
  themeConfig: {
    valineConfig: {
      appId: '...',// your appId
      appKey: '...', // your appKey
    }
  }  
}

5. Effect display

At the bottom of each article there will be a comment box:

6. Don't show comments

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 don't want to set the comment function for only a certain article, you can set isShowComments: false front-matter

For more configuration and attention details, refer to:

1. vuepress-theme-reco comment function
2. Valine configuration item

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 23rd article, the address of the whole 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.