Cusdis is a lightweight (~5kb gzip) commenting system with a clean interface and a focus on privacy. It can be easily integrated with React, Vue, or other blogging systems, and also provides a backend to manage all comments.
As Cusdis claims to be an alternative to Disqus, it also supports features such as one-click import from Disqus and email notifications.
Official website: https://cusdis.com/
It is usually used as a third-party commenting system for static blogs, but the official documentation does not provide parameters for using it in Hugo. I figured it out after encountering multiple errors.
1. Local Deployment#
According to the instructions, register an account and then "Add website" to create a repository.
Go into it and click on "setting".
"Embed Code" will provide a few lines of code and some APIs, copy them.
"Data-app-id" is automatically generated during registration, so keep it confidential as it is different for each person.
<div id="cusdis_thread"
data-host="https://cusdis.com"
data-app-id="xxxxxxxxx"
data-page-id="{{ PAGE_ID }}"
data-page-url="{{ PAGE_URL }}"
data-page-title="{{ PAGE_TITLE }}"
></div>
<script async defer src="https://cusdis.com/js/cusdis.es.js"></script>
Copy these codes to the "comments.html" file in the local theme (the module for comments, which may be different for each theme, so pay attention).
At this point, if you run "hugo server", it will likely throw an error because the content of "{{ PAGE_ID }}" has not been modified. This is not a parameter provided by Hugo. Rewrite the id, url, and title in the format below.
<div id="cusdis_thread"
data-host="https://cusdis.com"
data-app-id="c1d43485-e8a7-4895-972e-247eddaf242d"
data-page-id="{{ .RelPermalink }}"
data-page-url="{{ .RelPermalink }}"
data-page-title="{{ .Title }}"
></div>
<script async defer src="https://cusdis.com/js/cusdis.es.js"></script>
Save and restart "hugo server".
The advantage of doing this is that when you receive a comment, the moderation list can clearly indicate which article it is from. Most blogs usually provide this feature.
2. Email Notifications#
In addition to the essential commenting feature, Cusdis also provides a very fast email notification feature that does not require binding keys. Simply enter your email address.
First, check the "Email Notification" box, and then click on "Advanced Notification Settings" below.
You can then enter your email address in the settings.
3. Localization#
The default comment and prompt text are in English, which is not user-friendly for us. Here is a good solution. After importing Cusdis, copy the following code.
<script>
window.CUSDIS_LOCALE = {
"powered_by": "Comments powered by Cusdis",
"post_comment": "Post",
"loading": "Loading",
"email": "Email (optional)",
"nickname": "Nickname",
"reply_placeholder": "Reply...",
"reply_btn": "Reply",
"sending": "Sending...",
"mod_badge": "Admin",
"content_is_required": "Content is required",
"nickname_is_required": "Nickname is required",
"comment_has_been_sent": "Comment has been sent and will be displayed after being approved by the administrator"
}
</script>
...