Multiple comment services at the same time

[LITUATUI]

I just recently installed Giscus and was wondering if having two or more comment services activated at the same time would be a good feature to have.

For example, having tabs to choose between one and the other - like we have in the sidebar for featured and recent posts.

It would be nice to have a tab for Disqus and another for Giscus, like the image bellow.

This way visitors could choose which comment system they prefer to use.

Currently having the two comment services activated can be a little confusing and looks like this:

What do you think?

[razonyang]

Hmm, I doubt that if it is useful, as a visitor, I don't care about what comments platform the site used.

[LITUATUI]

The main advantage was to keep old comments visible with disqus, while start using giscus as the main comment service.

[razonyang]

The main advantage was to keep old comments visible with disqus, while start using giscus as the main comment service.

This isn't likely to accept as a built in module, but I can give you a working example how to customize comments.

1. Import the following modules instead of blog's built-in comments module.

// module.yaml
imports:
  - path: github.com/hbstack/giscus
  - path: github.com/hbstack/disqus

2. Configure custom hooks

// params.yaml
hugopress:
  modules:
    hb-custom:
      hooks:
        body-end:
          disable: false
        hb-blog-post-comments:
          disable: false

3. Create hook files
   3.1 layouts/partials/hugopress/modules/hb-custom/hooks/body-end.html

{{- if .Page.Scratch.Get "hb_blog_comments_giscus" }}
  {{ partial "giscus/script-with-options" .Page.Site.Params.hb.blog.giscus }}
{{- end }}

3.2 layouts/partials/hugopress/modules/hb-custom/hooks/hb-blog-post-comments.html

{{- .Page.Scratch.Set "hb_blog_comments_giscus" true }}
<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-comments-giscus-tab" data-bs-toggle="tab" data-bs-target="#nav-comments-giscus" type="button" role="tab" aria-controls="nav-comments-giscus" aria-selected="true">
      Giscus
    </button>
    <button class="nav-link" id="nav-comments-disqus-tab" data-bs-toggle="tab" data-bs-target="#nav-comments-disqus" type="button" role="tab" aria-controls="nav-comments-disqus" aria-selected="false">Disqus</button>
  </div>
</nav>
<div class="tab-content mt-3" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-comments-giscus" role="tabpanel" aria-labelledby="nav-comments-giscus-tab" tabindex="0">
    <div class="giscus"></div>
  </div>
  <div class="tab-pane fade" id="nav-comments-disqus" role="tabpanel" aria-labelledby="nav-comments-disqus-tab" tabindex="0">
    {{- template "_internal/disqus.html" .Page }}
  </div>
</div>

There are also tutorials about migrating from Disqus to Giscus.