Adding Giscus Support

README.md

@@ -825,7 +825,18 @@ If you wish use [Utterances](https://github.com/utterance/utterances) comments o
 
 Utterances is loaded in the `comments.html` partial by referring to the `utterances.html` partial.   Since `single.html` layout loads comments if comments are enabled, you must ensure *both* the `comments` and `utterances` parameters are configured.
 
+#### Giscus Commenting Support
 
+If you wish to use [giscus](https://giscus.app/) comments on your site, you'll need to perform the following:
+
+ * Ensure your repository is [public](https://docs.github.com/en/github/administering-a-repository/managing-repository-settings/setting-repository-visibility#making-a-repository-public), otherwise visitors will not be able to view the discussion.
+ * The [giscus app](https://github.com/apps/giscus) is installed, otherwise visitors will not be able to comment and react.
+ * The Discussions feature is turned on by [enabling it for your repository](https://docs.github.com/en/github/administering-a-repository/managing-repository-settings/enabling-or-disabling-github-discussions-for-a-repository).
+ * Comment out the line for `disqusShortname = ""` in the `/config/_default/config.toml` file.
+ * Set `comments = true` in the `/config/_default/params.toml` file.
+ * Configure the giscus parameters in the `/config/_default/params.toml` file.
+
+Giscus is loaded in the `comments.html` partial by referring to the `giscus.html` partial.   Since `single.html` layout loads comments if comments are enabled, you must ensure *both* the `comments` and `giscus` parameters are configured.
 
 
 ### Math notation

exampleSite/config/_default/params.toml

@@ -109,6 +109,18 @@ languageMenuName = "🌐"
 # utterancesTheme = "github-light" # Default: github-dark
 # utterancesIssueTerm = "pathname" # Default: pathname
 
+# Enable or disable Giscus comments globally. Default to false.
+# giscus = true
+# giscusRepo = "GHUsername/Repository.Name" # Giscus is enabled when this param is set
+# giscusRepoId = "RepositoryID" # Required for Giscus to work
+# giscusCategory = "Blog"
+# giscusCategoryId = "CategoryID" # Required for Giscus to work
+# giscusMapping = "pathname" # Default: pathname
+# giscusReactionsEnabled = "1" # Default: 1 = true
+# giscusTheme = "dark_protanopia" # Default: dark_dimmed
+# giscusLang = "en" # Default: en
+
+
 # Maximum number of recent posts. (default: 8)
 # numberOfRecentPosts = 8
 

layouts/partials/comments.html

@@ -5,5 +5,8 @@
   {{ if .Site.Params.utterances }}
     {{ template "partials/utterances.html" . }}
   {{ end }}
+  {{ if .Site.Params.giscus }}
+    {{ template "partials/giscus.html" . }}
+  {{ end }}
   <!-- add custom comments markup here -->
 </div>

layouts/partials/giscus.html

@@ -0,0 +1,18 @@
+{{ if .Site.Params.giscus }}
+<script src="https://giscus.app/client.js"
+        data-repo="{{.Site.Params.giscusRepo}}"
+        data-repo-id="{{.Site.Params.giscusRepoId}}"
+        data-category="{{.Site.Params.giscusCategory}}"
+        data-category-id="{{.Site.Params.giscusCategoryId}}"
+        data-mapping="{{.Site.Params.giscusMapping | default "pathname"}}"
+        data-strict="0"
+        data-reactions-enabled="{{.Site.Params.giscusReactionsEnabled | default "1"}}"
+        data-emit-metadata="0"
+        data-input-position="top"
+        data-theme="{{.Site.Params.giscusTheme | default "dark-dimmed"}}"
+        data-lang="{{.Site.Params.giscusLang | default "en"}}"
+        data-loading="lazy"
+        crossorigin="anonymous"
+        async>
+</script> 
+ {{ end }}