jekyll · YURLAK · Dec 29, 2022 · Jan 3, 2023 · Jan 3, 2023 · Jan 3, 2023
diff --git a/README.md b/README.md
@@ -222,24 +222,45 @@ You can *add* custom metadata to the `<head />` of your layouts by creating a fi
 2. [Customize](#customization) default `_includes/custom-head.html` in your source directory and insert the given code snippet.
 
 
-### Enabling comments (via Disqus)
+### Enabling comments (via Disqus, Utterances, Giscus)
 
-Optionally, if you have a Disqus account, you can tell Jekyll to use it to show a comments section below each post.
+If you want to add comment system for your site,add the following code to the `README.md` file.If not,skip this part.
-If you want to add comment system for your site,add the following code to the `README.md` file.If not,skip this part.
+If you want to add comment system for your site, add the following code to the `README.md` file. If not, skip this part.
-If you want to add comment system for your site,add the following code to the `README.md` file.If not,skip this part.
+If you want to add comment system for your site, add the following code to the `README.md` file. If not, skip this part.
 
-:warning: `url`, e.g. `https://example.com`, must be set in you config file for Disqus to work.
-
-To enable it, after setting the url field, you also need to add the following lines to your Jekyll site:
-
-```yaml
-  disqus:
-    shortname: my_disqus_shortname
 ```
-
-You can find out more about Disqus' shortnames [here](https://help.disqus.com/installation/whats-a-shortname).
-
-Comments are enabled by default and will only appear in production, i.e., `JEKYLL_ENV=production`
-
-If you don't want to display comments for a particular post you can disable them by adding `comments: false` to that post's YAML Front Matter.
+# Set which comment system to use
+comments:
+  # 'disqus' / 'giscus' / 'utterances' are available
+  provider:	# choice your comment system
+
+ #Disqus
+ disqus:
+  shortname: my_disqus_shortname
+
+# You must install utterances github app before use.(https://github.com/apps/utterances)
+# Make sure all variables are set properly. Check below link for detail.
+# https://utteranc.es/
+utterances:
+  repo:                "username/username.github.io"
+  issue-term:          "pathname"
+  label:               "Comments"
+  theme:               "your_theme"
+
+# You must install giscus github app before use.(https://github.com/apps/giscus)
-# You must install giscus github app before use.(https://github.com/apps/giscus)
+# You must install giscus github app before use (https://github.com/apps/giscus).
-# You must install giscus github app before use.(https://github.com/apps/giscus)
+# You must install giscus github app before use (https://github.com/apps/giscus).
+# Make sure all variables are set properly. Check below link for detail.
+# https://giscus.app/
+giscus:
+  repo:                "username/username.github.io"
+  repo-id:             "your_repo_id"
+  category:            "your_category"
+  category-id:         "your_category_id"
+  mapping:             "pathname"
+  reaction-enabled:    "1"
+  theme:               "your_theme"
+  crossorigin:         "your_crossorigin"
+  lang:                "your_language"
+ ```
+
+ :warning: First, you need to enter the name of your comment system into the `provider` option (`giscus`, `utterances` or `disqus`). Second, enter the configurations of your comment system.
 
 ### Author Metadata
 

diff --git a/_includes/comments.html b/_includes/comments.html
@@ -0,0 +1,48 @@
+{% assign provider = site.comments.provider | default:"giscus" %}
+{% if provider == "disqus" %}
+  {% assign disqus = site.disqus | default:site.disqus_shortname %}
+  {% if disqus %}
+  <div id="disqus_thread"></div>
+  <script>
+    var disqus_config = function () {
+      this.page.url = '{{ page.url | absolute_url }}';
+      this.page.identifier = '{{ page.url | absolute_url }}';
+    };
+    (function() {
+      var d = document, s = d.createElement('script');
+      s.src = 'https://{{ site.disqus.shortname }}.disqus.com/embed.js';
+      s.setAttribute('data-timestamp', +new Date());
+      (d.head || d.body).appendChild(s);
+    })();
+  </script>
+  <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
+  {% endif %}
+{% elsif provider == "utterances" %}
+  {% assign utterances = site.utterances %}
+  {% if utterances.repo %}
+    <script src="https://utteranc.es/client.js"
+            repo={{ utterances.repo }}
+            issue-term={{ utterances.issue-term }}
+            label={{ utterances.label }}
+            theme={{ utterances.theme }}
+            crossorigin= "anonymous"
+            async>
+    </script>
+  {% endif %}
+{% elsif provider == "giscus" %}
+  {% assign giscus = site.giscus %}
+  {% if giscus.repo %}
+    <script src="https://giscus.app/client.js"
+            data-repo={{ giscus.repo }}
+            data-repo-id={{ giscus.repo-id }}
+            data-category={{ giscus.category }}
+            data-category-id={{ giscus.category-id }}
+            data-mapping={{ giscus.mapping }}
+            data-reactions-enabled={{ giscus.reaction-enabled }}
+            data-theme={{ giscus.theme }}
+            crossorigin={{ giscus.crossorigin }}
+            data-lang={{ giscus.lang }}
+            async>
+    </script>
+  {% endif %}
+{% endif %}
diff --git a/_includes/disqus_comments.html b/_includes/disqus_comments.html
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -30,8 +30,8 @@ <h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}
     {{ content }}
   </div>
 
-  {%- if site.disqus.shortname -%}
-    {%- include disqus_comments.html -%}
+  {%- if site.comments.provider -%}
+    {%- include comments.html -%}
   {%- endif -%}
 
   <a class="u-url" href="{{ page.url | relative_url }}" hidden></a>