DOCSEARCHbyAlgolia
Submit Docs

Valine Comment System

website·Indexed 29 days ago

https://valine.js.org/en/

A fast, simple, and powerful comment system that supports integration with VuePress, Gatsby, and Hexo. Features include article reading statistics, custom emoji support, multilingual support, and CDN installation options. Latest version v1.5.3 released on 2024-12-15.

Tokens
8.6K
Snippets
44
Records
68
Agent score
68%

What's inside Valine

  1. Overview of Valine comment system

    Valine is a fast, lightweight, and efficient backend-less comment system based on LeanCloud. It is designed primarily for static blogs and documentation sites, providing features such as full Markdown syntax support, Emoji integration, and page view statistics (available in v1.2.0+). It is compatible with various platforms including Hexo, Jekyll, Hugo, Ghost, Typecho, and Docsify.

  2. Overview of Valine comment system

    Valine is a fast, lightweight, and efficient backend-less comment system based on LeanCloud. It is designed to work with static blogs and documentation programs, including but not limited to Hexo, Jekyll, Hugo, Typecho, Ghost, and Docsify. Key features include support for full Markdown syntax, Emoji integration, security, and built-in article view counting (available in v1.2.0+).

  3. Overview of Valine comment system

    Valine is a fast, simple, and efficient comment system based on Leancloud that requires no server-side implementation. It is designed for use with static blogs and documentation programs, including Hexo, Jekyll, Hugo, Ghost, and Docsify. Key features include support for full Markdown syntax, emoji support, high speed, and article reading statistics (available in v1.2.0+).

  4. Overview of Valine comment system

    Valine is a fast, simple, and efficient comment system that uses Leancloud as a backend, meaning it requires no server-side implementation by the user. It is primarily designed for static blogs and documentation programs, with existing support for Hexo, Jekyll, Hugo, Ghost, and Docsify. Key features include support for full Markdown syntax, emoji integration, high performance, and article reading statistics (available in v1.2.0+).

  5. Understand Valine's serverless architecture and limitations

    Valine is designed as a 'serverless' (no-backend) minimalist comment system. Because it lacks a dedicated backend, certain features have specific constraints:

    • Spam Filtering: Akismet is not supported because it requires backend technical support.
    • Email Notifications: Notification emails are sent via Leancloud's 'password reset' mechanism, which limits the transmitted data to only the 'nickname' and 'email' fields. This prevents emails from linking directly to specific comment threads.
    • CAPTCHA: Since there is no backend, CAPTCHA verification is handled on the frontend, which may result in a less smooth user experience. CAPTCHA is disabled by default; it should only be enabled if necessary.

  6. Install Valine using a CDN

    Valine can be integrated into a project by including the minified JavaScript file via a CDN. The recommended provider is unpkg, as it reflects the latest npm version immediately. Alternative providers include jsDelivr and cdnjs.
    <!-- Recommended: Latest version via unpkg -->
<script src="//unpkg.com/valine/dist/Valine.min.js"></script>

  7. Install Valine comment support for VuePress

    To use Valine in a VuePress project, install the vuepress-plugin-comment plugin. This plugin manages H5 routing automatically for the comment system.
    # Using npm
npm install --save vuepress-plugin-comment

# Using yarn
yarn add vuepress-plugin-comment -D

  8. Initialize Valine comment system

    Valine can be initialized using two different methods: passing a configuration object directly to the constructor or calling the init method on a Valine instance.
    <!-- Method 1: Constructor initialization -->
<script>
    new Valine({
        el:'#vcomment',
        appId: 'Your appId',
        appKey: 'Your appKey'
    })
</script>

<!-- Method 2: init method initialization -->
<script>
    var valine = new Valine();
    valine.init({
        el:'#vcomment',
        appId: 'Your appId',
        appKey: 'Your appKey'
    })
</script>

  9. Install Valine for VuePress

    To use Valine in a VuePress project, install the vuepress-plugin-comment plugin which handles SPA routing automatically.
    # Using npm
npm install --save vuepress-plugin-comment

# Using yarn
yarn add vuepress-plugin-comment -D

  10. Enable and implement page view counting in Valine

    Valine (v1.2.0+) supports page view statistics. When enabled, Valine automatically detects if a Counter class exists in the LeanCloud application and creates one if it is missing.

    To implement the display, Valine searches for an element with the class leancloud_visitors. It uses that element's id as the unique query key and populates the resulting count into a child element with the class leancloud-visitors-count.

    new Valine({
    el:'#vcomments',
    visitor: true // Enable page view statistics
});
    <!-- The id is used as the unique identifier for the page count -->
<span id="your-page-path-or-id" class="leancloud_visitors" data-flag-title="Your Article Title">
    <em class="post-meta-item-text">Views </em>
    <i class="leancloud-visitors-count">0</i>
</span>

  11. Install and use Valine via npm

    Valine can be installed as a dependency via npm. After installation, it can be imported using ES modules or CommonJS require syntax. Initialize the comment system by creating a new Valine() instance and specifying the target element selector in the el property.
    # Install valine
npm install valine --save
    // Use import
import Valine from 'valine';
// or Use require
const Valine = require('valine');

new Valine({
    el:'#vcomments',
    // other config
})

  12. Manage Valine comment data

    Because Valine is a backend-less system, comment data is managed directly within the LeanCloud console. To manage comments: Log in to LeanCloud > Select your application > Data Storage > Structured Data > Select the Comment class. Alternatively, the third-party tool Valine-Admin can be used for management.