Check valine comment system and glitch visitor badge

2021-11-15 511 words 3 minutes

Contents

I considered changing comment system to valine from utterances. As a conclusion, I decided to remain in utterances (the reason will be followed), I leave some findings about valine as a comment system for hugo website.

Environment

Mac OS Monterey 12.0
hugo v0.88.1+extended darwin/arm64 BuildDate=unknown
Hugo LoveIt Theme 2.0.10

What is valine

valine is a Leancloud based no back end comment system.

I found valine when I checked how Hugo LoveIt theme generates page view count for each article.

Hugo LoveIt theme generates this on themes/LoveIt/layouts/single.html.

1
2
3
4
5


    {{- if $comment.enable | and $comment.valine.enable | and $comment.valine.visitor -}}
        <span id="{{ .RelPermalink }}" class="leancloud_visitors" data-flag-title="{{ .Title }}">
            <i class="far fa-eye fa-fw"></i>&nbsp;<span class=leancloud-visitors-count></span>&nbsp;{{ T "views" }}
        </span>&nbsp;
    {{- end -}}

Setup valiance to Hogo LoveIt theme

1. Create app in Leancloud

Ref. valine | Quick Start

Register or login in leancloud
- Convert international in left-top selector
- you need to activate email and phone number (by SMS)
Create new application in Leancloud and get APP ID and App Key

2. Use valine comment system over Hugo LoveIt/theme

config.toml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


  [params.page.comment.valine]
    enable = true
    appId = "(App ID)"
    appKey = "(App Key)"
    placeholder = ""
    avatar = ""
    meta= ""
    pageSize = 10
    lang = ""
    visitor = true
    recordIP = true
    highlight = true
    enableQQ = false

    # According to valine.js.org, This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in) v1.3.10+
    serverURLs = ""
    # serverURLs = "https://leancloud.hugoloveit.com"
    # emoji data file name, default is "google.yml"
    # ("apple.yml", "google.yml", "facebook.yml", "twitter.yml")
    # located in "themes/LoveIt/assets/data/emoji/" directory
    # you can store your own data files in the same path under your project:
    # "assets/data/emoji/"
    # emoji 数据文件名称, 默认是 "google.yml"
    # ("apple.yml", "google.yml", "facebook.yml", "twitter.yml")
    # 位于 "themes/LoveIt/assets/data/emoji/" 目录
    # 可以在你的项目下相同路径存放你自己的数据文件:
    # "assets/data/emoji/"
    emoji = ""

Just by above definition, valine comment system and view counter in page are activated.

../../../images/web/valine-comment.jpg — valine-comment.jpg

Why remain in utterances?

I did not move to valine because:

Valine can accept comment from anyone without authorization. That will be useful and bothering system with spam comments. Utterances requires git account for users. That sounds healthier system for me.
Leancloud is free for developer but has limit in usage. Ref. LeanCloud | Pricing. Utterances can be used freely by using github issue as a comment repository.

Adding visitor counter by glitch.me

I found a reference for getting visitor counter in hugo generated site (Adding visitor counter to statically generated web pages) using visitor-badge.glitch.me. If that page has a parmalink, visitor counter can be embedded just adding below.

themes/LoveIt/layouts/single.html

1
2
3
4
5


<div class="views">
    <span class="views">
        <img src="https://visitor-badge.glitch.me/badge?page_id={{ .Permalink }}" alt="Views"/>
    </span>
</div> 

Then I can add visitor counter to page like 😄