feat: add support for Isso comments

This commit is contained in:
welpo 2023-07-26 01:47:26 +02:00
parent e1dfd2ea07
commit 9a98789922
No known key found for this signature in database
GPG key ID: A2F978CF4EC1F5A6
13 changed files with 561 additions and 31 deletions

View file

@ -1,7 +1,7 @@
+++
title = "Add comments to your posts with giscus, utterances or Hyvor Talk"
date = 2023-07-14
updated = 2023-07-17
updated = 2023-07-26
description = "Discover how to enable a comments section on your posts using giscus, utterances, or Hyvor Talk, enabling reader interaction and feedback."
[taxonomies]
@ -10,9 +10,10 @@ tags = ["showcase", "tutorial"]
[extra]
giscus = true
quick_navigation_buttons = true
toc = true
+++
tabi currently supports three comment systems: [giscus](https://giscus.app/), [utterances](https://utteranc.es/), and [Hyvor Talk](https://talk.hyvor.com/).
tabi currently supports four comment systems: [giscus](https://giscus.app/), [utterances](https://utteranc.es/), [Hyvor Talk](https://talk.hyvor.com/), and [Isso](https://isso-comments.de/).
giscus and utterances are open-source projects that let you add a comments section to your website using GitHub issues (utterances) or discussions (giscus). They are perfect for static site generators like Zola, since they enable your readers to interact and leave comments on your posts without requiring a traditional backend or database.
@ -28,6 +29,8 @@ Both are great tools for adding comments to your blog, but giscus has a few adva
Hyvor Talk is a paid privacy-focused commenting platform. It offers all of the giscus' advantages, and a few more, like moderation and spam detection.
Isso is an open-source self-hosted commenting system that stores comments in its own database. One of its main advantages is privacy; it does not share user data with third parties. It also has a lightweight and clean interface, making it easy for your visitors to leave comments. Isso also allows anonymous comments, potentially increasing user engagement on your website.
## Setup
### GitHub based systems
@ -87,11 +90,30 @@ page_author = "" # Email (or base64 encoded email) of the author.
lazy_loading = true
```
### Isso
To enable Isso, you'll first need to install and run an Isso server ([here's a useful guide](https://blog.phusion.nl/2018/08/16/isso-simple-self-hosted-commenting-system/#1installingisso)). Then, complete these settings in `config.toml`:
```toml
[extra.isso]
enabled_for_all_posts = false
automatic_loading = true
endpoint_url = "https://example.com/comments/" # URL to Isso host.
page_id_is_slug = true
lang = ""
max_comments_top = "inf"
max_comments_nested = "5"
avatar = true
voting = true
page_author_hashes = ""
lazy_loading = true
```
### Common settings
Setting `enabled_for_all_posts = true` for a comment system will enable it globally.
Alternatively, enable comments on an individual post's front matter by adding the name of the system (i.e. `utterances`, `giscus` or `hyvortalk`) `= true`. For example, this is how you would enable giscus:
Alternatively, enable comments on an individual post's front matter by adding the name of the system (`utterances`, `giscus`, `hyvortalk`, or `isso`) `= true`. For example, this is how you would enable giscus:
```toml,hl_lines=09-10
+++
@ -109,7 +131,7 @@ giscus = true
If you accidentally enable more than one system, your site will fail to build with an error.
If your site has multiple languages with matching posts (like this demo), and you'd like to share comments between languages, you must use `issue_term = "slug"` (for giscus and utterances) or `page_id_is_slug = true` (for Hyvor Talk). This will use the name of the Markdown file (sans the language tag) as the identifier. All other options will create different comment sections for each language.
If your site has multiple languages with matching posts (like this demo), and you'd like to share comments between languages, you must use `issue_term = "slug"` (for giscus and utterances) or `page_id_is_slug = true` (for Hyvor Talk or Isso). This will use the name of the Markdown file (sans the language tag) as the identifier. All other options will create different comment sections for each language.
## Live example