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 Valine.

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 walks you through the process of implementing comments using Valine.

Valine

Liverpoolfc.tv: valine.js.org/

Valine launched on August 7, 2017. Valine is a fast, clean and efficient backend free review system based on LeanCloud.

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

LeanCloud

Valine is based on LeanCloud, which is available at www.leancloud.cn/

LeanCloud is a Serverless cloud service that provides one-stop back-end services, such as data storage, instant messaging, etc. Simply speaking, if I want to achieve a data storage function, I only need to register an account in LeanCloud and obtain the corresponding App ID and App Key. Then call the provided API to store the data. Here is a way to use JavaScript syntax:

start

With a basic understanding, let’s get started.

1. Register

Sign up for LeanCloud: leancloud.cn/dashboard/l…

To use LeanCloud services, you need to complete real-name authentication. After filling in your name and ID number, you need to scan your Alipay account for authentication.

2. Create an application

After login, enter the console and click “Create Application” in the lower left corner:

In creating an application, we choose the development version, which has a limit of usage, such as 3W API requests per day and 1GB data storage space, which is sufficient for personal projects:

3. View the application credentials

After creating your APP, click into the APP’s admin background, choose “Settings” – “APP Credentials”, and then you can see your APP ID and APP Key:

4. VuePress introduction

Change the config. Js:

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

5. Effect display

A comment bar appears at the bottom of each post:

6. Don’t show reviews

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.

For more configuration and attention to detail, see:

  1. Vuepress-theme-reco Comments
  2. Valine configuration items

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 25th 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.