add .comment-box class, comment system use id; remove unused comments_script.html

assets/css/common/post-single.css

@@ -539,8 +539,8 @@ h6:hover .anchor {
     box-shadow: 0 2px 0 var(--twitter-color);
 }
 
-.disqus-container,
-.telegram-widget-container {
+/* comments */
+.comments-box {
     margin: calc(var(--content-gap) * 2) 0;
     background-color: var(--code-bg);
     border-radius: 10px;

layouts/partials/comments_script.html

@@ -1,5 +0,0 @@
-{{- /* You can add your own layouts/comments_script.html to override this file */ -}}
-
-{{- with site.Params.commentSystem.disqus -}}
-  {{ partial "disqus_script.html" . }}
-{{- end -}}

layouts/partials/disqus.html

@@ -1,4 +1,4 @@
-<div class="disqus-container">
+<div class="comments-box">
   <div id="disqus_thread"></div>
 </div>
 

layouts/partials/page_footer.html

@@ -128,7 +128,3 @@
   mediumZoom('.post-content img:not([no-zoom])');
 </script>
 {{- end }}
-
-{{- if not (.Param "noComments") }}
-  {{- partial "comments_script.html" . }}
-{{ end }}

layouts/partials/telegram_widget.html

@@ -1,4 +1,6 @@
-<div class="telegram-widget-container"></div>
+<div class="comments-box">
+  <div id="telegram-widget-container"></div>
+</div>
 
 <script>
   (function() {
@@ -22,8 +24,9 @@
       s.setAttribute(key, attrs[key]);
     }
 
-    const container = document.querySelector('.telegram-widget-container')
+    const container = document.querySelector('#telegram-widget-container')
     container.innerHTML = '';
+    // telegram widget script must be added to the position where you want it to be displayed
     container.appendChild(s);
   })();
 </script>
@@ -33,9 +36,6 @@
     if (!toggleThemeCallbacks) {
       return;
     }
-    if (document.getElementsByClassName('telegram-widget-container').length === 0) {
-      return;
-    }
 
     toggleThemeCallbacks.push((isDark) => {
       // console.log('window toggle-theme for telegram widget')