Artitalk Method
This method is to deploy a shoutbox using Artitalk (opens in a new tab).
Effect
Actual link: https://ncwzdlsd.top/shuoshuo/ (opens in a new tab)
Configuration
First, go to the official website of Artitalk and follow the process in the "Quick Start (opens in a new tab)" section to store Artitalk's data on LeanCloud.
Please note that the international version of LeanCloud is no longer accessible in mainland China. Therefore, Chinese users should use the domestic version of LeanCloud. However, the overall process remains the same, and you only need to include the serverURL
information in the configuration page.
Once the LeanCloud configuration is complete, you can add Artitalk to your own blog.
Use the hexo new page
command to create a new page. For example, if you name it "shuoshuo", enter the following command:
hexo new page shuoshuo
A new folder named "shuoshuo" will be automatically created in the source
folder of your blog's root directory.
Open the index.md
file inside the newly created shuoshuo
folder and make the following configurations:
-
Modify the
front-matter
section.:::caution
If you previously used the local deployment method and created an
essays.yml
file in the/source/_data/
directory, please delete or rename that file to something else. Otherwise, Artitalk will not work.:::
--- title: Shoutbox ---
-
Next, configure the remaining options according to the official documentation (opens in a new tab).
Pay attention to the
serverURL
here. Normally, LeanCloud'sserverURL
requires domain registration. However, since many blog authors may not have a registered domain, there is an alternative solution: usehttps://avoscloud.com
as theserverURL
.To improve access speed, the example code below places the Artitalk JavaScript file on my (ncwzdlsd's) Tencent Cloud Object Storage (COS). You can also follow the configuration in the official documentation and use
unpkg
.Example code:
<!-- Include Artitalk --> <script async data-pjax type="text/javascript" src="https://photo-1314795557.cos.ap-beijing.myqcloud.com/artitalk.js"></script> <!-- Container for the shoutbox --> <div id="artitalk_main"></div> <script async data-pjax> new Artitalk({ appId: '', // Your LeanCloud appId appKey: '', // Your LeanCloud appKey serverURL: 'https://avoscloud.com', pageSize: 50, // Number of comments per page shuoPla: '', // Text to display in the comment box, can be left empty motion: 0, // Switch for loading animation: 0 (off), 1 (on) atComment: 0, // Switch for comment function: 0 (off), 1 (on) bgImg: '', // Background image for the comment box, can be left empty color1: '#ffffff', // Custom colors, multiple ways to define color2: '#ffffff', color3: '#3b9a9c', }) </script>
After configuring it this way, you will have a shoutbox page that can be dynamically edited. If configured as shown above, the effect will be as follows:
For more settings, you can search on your own or refer to the official documentation.
Please note that after deploying the shoutbox using Artitalk, the access speed of the shoutbox page may be relatively slow. If you require faster access speed, please use the local deployment method.
Author: ncwzdlsd (opens in a new tab)
Modified: Evan Luo