Blog Comments

Configure and integrate comments (Giscus, Disqus, Utterances) on blog posts

1 min read 286 words

The default theme's blog template includes a comments section that only appears when a provider is configured. This recipe shows how to integrate Giscus, Disqus, or Utterances.

Configuration

Show Comments (Requires Provider)

The comments section is hidden by default. To show it, set both:

  • params.comments: true(or omit; default is true)
  • params.comments_provider: giscus (or disqus, utterances, etc.)

Per post:

---
title: My Post
params:
  comments: true
  comments_provider: giscus
---

Site-wide (cascade):

Add tocontent/_default/content.yaml or section _index.md:

cascade:
  params:
    comments: true
    comments_provider: giscus

Hide Comments

Setparams.comments: falsein frontmatter or cascade to hide the section even when a provider is configured.

Integration Point

The blog single template renders:

<div id="comments" data-comments-target></div>

Your comments provider script should inject into this element. Override blog/single.htmlor add a script in your layout's footer/head.

Integrate a Provider

Giscus (GitHub Discussions)

  1. Enable Discussions on your repo
  2. Install giscus
  3. Add the script to your base layout or a partial:
<script src="https://giscus.app/client.js"
  data-repo="owner/repo"
  data-repo-id="..."
  data-category="..."
  data-category-id="..."
  data-mapping="pathname"
  data-strict="0"
  data-reactions-enabled="1"
  data-emit-metadata="0"
  data-input-position="bottom"
  data-theme="light"
  data-lang="en"
  crossorigin="anonymous"
  async>
</script>

The script auto-mounts into the first data-giscus container. Add data-giscus to the comments div in your override, or ensure the script runs after the #commentselement exists.

Utterances (GitHub Issues)

Similar to Giscus but uses GitHub Issues. Add the Utterances script and point it at#comments.

Disqus

Add the Disqus embed script and setdisqus_config.page.url to the current page. Mount into #comments.

Override the Template

To customize the comments block, copybengal/themes/default/templates/blog/single.html to your project's templates/blog/single.html and modify the comments section. The template only renders the section when params.comments_provideris set.