Cusdis is a lightweight (~5kb gzip) comment 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 for managing 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 comment 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, be sure to keep it confidential as it is unique to 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 into the "comments.html" file in the local theme (the module for comments, which may be different for each theme, so be careful).
At this point, if you run "hugo server", it will likely give an error because the "{{ PAGE_ID }}" and other content have not been modified. These are not parameters provided by Hugo official. Rewrite the id, url, and title in the following format.
<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 audit list can clearly indicate which article it comes from. Most blogs usually provide this feature.
2. Email notifications#
In addition to the essential comment function, Cusdis also provides a very fast email notification function that does not require binding keys. Simply enter your own email.
First, check the "Email Notification" box, then click on "Advanced Notification Settings" below.
You can then enter your email 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 introducing 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 approval by the administrator"
}
</script>
...