Using leancloud to add artitalk module to hexo blog

martinniee 2021-05-03 21:19:22
using leancloud add artitalk module

tags: [Hexo,LeanCloud,Artitalk, say something ]
 Copy code 

1. Set up leanCloud

1、 Log in LeanCLoud International Edition ( If you don't have an account, register )

2、 Registration completed , binding LeanCloud Mobile phone number and email address

3、 Create an

After binding, click Create an , The name of the application is arbitrary , And then Structured data Created in class, Name it shuoshuo.



Click on leanCloud console Home page , Enter settings


4、 establish class Name it shuoshuo


Let's create


5、 Create user

In you New app Find Structured data Under the user . Click on Add users , Enter what you want to use user name And password .


Enter your username and password


️ Pay attention to this Accounts and passwords need to be remembered , Then log in Artitalk You will use , And this leanCloud The user's password is not easy to change

6、 Modify the permissions

Back to structured data , Click on class Under the shuoshuo. find jurisdiction , stay Class Access rights will add_fields as well as create Permission set to Designated user , The user name you just entered will match automatically . For safety's sake , take delete and update It's also set to the same permissions as them .



After modification, it is shown in the figure


7、 newly build atCommens Of class , The permission can be set by default


8、 Click on class Under the _User add to Column , The names are called img, The default value is the profile you want to use for this account url, This one is not configured , Talk about the avatar will be displayed as the default avatar —— Artitalk Of logo.

image.png next step image.png

9、 obtain appID and appKey Find... In the latest menu bar Set up -> application keys, write down AppID and AppKey , I'll use it later .


10、 take 「 Structured data 」 Under the _User All permissions are set to Designated user The final will be _User All permissions in are set to Designated user , Or data creators , In order to ensure that the user data will not be tampered with, it has reached the mandatory release level .


2. To configure Hexo butterfly

About the steps of setting permissions These steps must be set well , Can guarantee not to be “ Idler ” Crack the verification of the release come from Artitalk

1、 Get into hexo The theme of butterfly The configuration file To configure , Enter the previous appID and appKey


2、 New home menu navigation

newly build page

# Format 
hexo new page Folder name
# example 
hexo new page shuoshuo
 Copy code 

there Folder name It's the effect in the file system On the web, it's a Catalog

3、butterfly Theme configuration add shuoshuo Navigation

image.png 4、 Restart locally hexo

hexo clean && hexo generate && hexo server
 Copy code 


️ If the configuration is successful , There will be a default saying

5、 Talk about new building Click on the bottom right corner


️ there user and password Namely leanCloud application > user Set up Account and password

6、 Release preview


3. Reference resources

Relevant reference


  1. Analysis of MVC
  2. [middle stage] please stay and join me in the backstage
  3. Understanding front end garbage collection
  4. [continuous update] front end special style implementation
  5. Flutter product analysis and package reduction scheme
  6. XPath positioning
  7. 前端开发css中的flex布局的使用
  8. The use of flex layout in front end development CSS
  9. JQuery核心函数和静态方法
  10. JQuery core functions and static methods
  11. Node family - understanding of blocking and non blocking
  12. 热点微前端Microfrontend的讨论:谷歌AdWords是真实的微前端
  13. Vue source code analysis (2) initproxy initialization proxy
  14. What's TM called react diff
  15. Summary of common front end data structure
  16. Useeffect in hooks
  17. [encapsulation 02 design pattern] Command pattern, share meta pattern, combination pattern, proxy pattern, strategy pattern
  18. Front end notes: virtual Dom and diff of vue2. X
  19. The best code scanning plug-in of flutter
  20. The simplest plug-in for rights management of flutter
  21. 21. Object oriented foundation "problems and solutions of object traversal"
  22. Discussion on hot micro front end: Google AdWords is a real micro front end
  23. Usecallback and usememo for real performance optimization
  24. 【前端圭臬】十一:从规范看 JavaScript 执行上下文(下)
  25. [front end standard] 11: Javascript execution context from the perspective of specification (2)
  26. Hexagonal六角形架构ReactJS的实现方式 - Janos Pasztor
  27. Transaction of spring's reactive / imperative relational database
  28. The implementation of hexagonal hexagonal reactjs Janos pasztor
  29. HTTP状态码:402 Payment Required需要付款 - mozilla
  30. HTTP status code: 402 payment required - Mozilla
  31. Factory mode, constructor mode and prototype mode
  32. Build the scaffold of react project from scratch (Series 1: encapsulating a request method with cache function based on Axios)
  33. Cocos Quick Start Guide
  34. Comparison of three default configurations of webpack5 modes
  35. A case study of the combination of flutter WebView and Vue
  36. CSS: BFC and IFC
  37. A common error report and solution in Vue combat
  38. JS: this point
  39. JS: prototype chain
  40. JavaScript series -- promise, generator, async and await
  41. JS: event flow
  42. Front end performance optimization: rearrangement and redrawing
  43. JS - deep and shallow copy
  44. JavaScript异步编程3——Promise的链式使用
  45. JavaScript asynchronous programming 3 -- chain use of promise
  46. Vue.js组件的使用
  47. The use of vue.js component
  48. How to judge whether a linked list has links
  49. Element UI custom theme configuration
  50. Text image parallax effect HTML + CSS + JS
  51. Spring的nohttp宣言:消灭http://
  52. Vue3 intermediate guide - composition API
  53. Analysis of URL
  54. These 10 widgets that every developer must know
  55. Spring's nohttp Manifesto: eliminate http://
  56. Learn more about JS prototypes
  57. Refer to await to JS to write an await error handling
  58. A short article will directly let you understand what the event loop mechanism is
  59. Vue3 uses mitt for component communication
  60. Characteristics and thinking of ES6 symbol