Using and Beautifying artitalk

Artitalk is a JavaScript that allows real-time posting of messages implemented through LeanCloud. Clicking on "说说" at the top of my blog will display the Artitalk interface.

This article mainly records the usage and beautification process of Artitalk 2.4.x in pjax websites.

Using Artitalk in pjax Websites#

Since Artitalk does not provide a reload function, there are currently two main solutions:

Refresh the page in various ways, such as:
- The method in the official documentation, automatically refreshing the Artitalk interface
```
$(document).ready(function () {
    if(location.href.indexOf("#reloaded")==-1){
        location.href=location.href+"#reloaded";
        location.reload();
    }
})
```
- For the Volantis theme, add the window.location.pathname of the Artitalk page to the pjax blacklist in the theme configuration
Manually clear the initialized AV object of Artitalk and reload the JavaScript file

Here, we will discuss the second method. Referring to the idea of this pull request, we need to delete the original window.AV object when the page is reloaded, and then reload artitalk.js.

Data Migration#

Because Valine also relies on window.AV to provide services, the cost of using the above method to solve the Artitalk problem is: During the loading process of the Artitalk interface, Artitalk replaces Valine's window.AV with its own. Therefore, we need to ensure that Artitalk and Valine are using the same LeanCloud application.

According to the official documentation of Artitalk:

Due to the limitations of LeanCloud functionality, if you want to use Valine and Artitalk at the same time, please add a class named Comment to the class attribute. It is not recommended to create a class named shuoshuo in the application that stores Valine, as it may cause magical bugs.

Therefore, we need to migrate Valine's data to Artitalk (if the same application is already used, this step can be skipped):

Create a Comment class in the LeanCloud application used by Artitalk, and if you are using the page view function, you also need to create a Counter class.
Export the Comment and Counter classes from the original Valine application (Complaint: Why can only export before noon? Do you need half a day to maintain it?)
Import the exported Comment and Counter classes into the application used by Artitalk
Change the ID and Key used by Valine in the configuration file to match Artitalk.

Implementation Process#

This step is something I figured out myself, so it may be a bit cumbersome.

Referring to the implementation idea of this article to reload the entire JavaScript file, we can introduce Artitalk into the website and add the data-pjax attribute. Then, reload the JavaScript file with the data-pjax attribute every time the page is switched with pjax.

However, we should not let Artitalk execute on every page, it is only necessary when it is on the Artitalk page. Therefore, we need to manually modify the artitalk source code and rebuild it. The specific process is as follows:

Clone the Artitalk repository and switch to the specified commit#

After checking the version history, it seems that 1df35c9 is the last commit that passed the test, so we will use that commit.

git clone https://github.com/ArtitalkJS/Artitalk
cd Artitalk
git checkout 1df35c9

Add a check for the current page#

We need to check the current page and only execute the script when the current page is the Artitalk page. Taking my blog as an example, the window.location.pathname of the Artitalk page is /personal-space/. Here are the steps I took:

Add a check for the src/main.js file

if (window.location.pathname==='/personal-space/'){
    // Original content of the file
}

Add a check for the av.min.js file

if (window.location.pathname==='/personal-space/'){
    if (window.AV!==undefined){
        delete window.AV
    }
    // Original content of the file
}

Install dependencies and build#

# for yarn
yarn 
yarn gulp
# for npm
npm install
npm run gulp

Include the built file in the website#

Place dist/artitalk.min.js in the source/js directory of the blog. Add this line to the footer:

<script data-pjax src='/js/artitalk.min.js'></script>

Modify the `pjax:complete` function#

// This is the reload function for Valine
VA: function () {
    if (!valine) {
        var valine = new Valine()
        valine.init({
            el: '#vcomments',
            appId: mashiro_option.v_appId,
            appKey: mashiro_option.v_appKey,
            path: window.location.pathname,
            placeholder: '你是我一生只会遇见一次的惊喜 ...',
            visitor: true
        })
    }
}
// Inside the pjax:complete event
pjax(...,...,{...}).on('pjax:complete',function (){
    // Reload Artitalk
    $("script[data-pjax], .pjax-reload script").each(function () {
        $(this).parent().append($(this).remove());
    });
    // Reload Valine
    VA()
})

Pay attention to the order of execution in this step. In practice, if Valine is reloaded before Artitalk, Valine will correctly display the number of comments but not the content.

Add the Artitalk page#

Everything is ready, all you need to do is write the following in the corresponding md file for Artitalk:

---
title: Title
comments: false
---
<div id="artitalk_main"></div>
<script>
    var appID="Your ID";
    var appKEY="Your Key";
    // Please refer to the Artitalk official documentation for various configuration options
</script>

Artitalk Beautification (Custom Styles)#

Simple Requirements#

If you just want to change the background color, you can simply specify the color1/color2/color3 configuration options to take effect. For example, in my blog, I use the following configuration:

var color1='#d9d9f3';
var color2='#ceefe4';
var color3='black';

Complex Requirements#

For more complex beautification requirements, this article provides multiple custom styles. However, in actual use, it will be found that the custom methods in the article do not work.

Let's take a look at the default styles added by Artitalk:

#artitalk_main .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
    ......
}

Now let's look at the custom styles:

.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
    ......
}

According to the rules of CSS specificity:

Inline styles > ID selectors > Class selectors > Tag selectors.

In the case of other parts being the same, the default styles of Artitalk use an ID selector, which has a higher specificity than our custom styles. Therefore, our custom styles cannot be applied successfully.

There are three solutions:

Add an ID selector to the custom styles as well, and make sure the custom styles are placed after the default styles.

When the specificity is the same in multiple CSS declarations, the declaration that comes last in the CSS will be applied to the element.
Add !important to each property in the custom styles.

When using the !important rule in a style declaration, this declaration will override any other declarations.
Specify the cssurl option

According to the Artitalk configuration documentation, when we specify the cssurl option, the default styles will not be loaded, and the css file located at cssurl will be used instead.

We can copy the main.css file from the repository, replace the specified entries with our custom styles, upload the modified css file to a website, and finally fill the direct link address obtained after uploading into the cssurl option.