add title for comments, enhance styles

assets/css/common/post-single.css

@@ -544,6 +544,29 @@ h6:hover .anchor {
     margin: calc(var(--content-gap) * 2) 0;
     background-color: var(--code-bg);
     border-radius: 10px;
-    padding: 1.5em;
     box-shadow: var(--shadow-elevation-low);
 }
+
+.comments-box.telegram-widget {
+    padding: .8em;
+}
+
+.comments {
+    border-top: 1px solid var(--tertiary);
+}
+.comments {
+    margin: 40px 0 20px;
+}
+.comments .title {
+    margin: 20px 0;
+    font-size: 1.5em;
+}
+.comments .title > span {
+    line-height: 1.5rem;
+}
+.comments .title .counter {
+    color: var(--link-hover-color);
+    font-size: 1rem;
+    font-weight: bold;
+    vertical-align: super;
+}

layouts/partials/comments.html

@@ -9,7 +9,7 @@
 {{- with site.Params.commentSystems -}}
   {{- if $pageCommentSystems.remark42 -}}
   {{- with .remark42 -}}
-    {{- partial "remark42.html" . }}
+    {{- partial "remark42.html" (dict "page" $page "ctx" .) }}
   {{- end -}}
   {{- end -}}
 
@@ -21,7 +21,7 @@
 
   {{- if $pageCommentSystems.disqus -}}
   {{- with .disqus -}}
-    {{- partial "disqus.html" (dict "page" $page "disqus" .) }}
+    {{- partial "disqus.html" (dict "page" $page "ctx" .) }}
   {{- end -}}
   {{- end -}}
 {{- end -}}

layouts/partials/disqus.html

@@ -19,7 +19,7 @@
       });
     } else {
       var d = document, s = d.createElement('script');
-      s.src = '//' + '{{ .disqus.shortname }}' + '.disqus.com/embed.js';
+      s.src = '//' + '{{ .ctx.shortname }}' + '.disqus.com/embed.js';
       s.defer = true;
       s.setAttribute('data-timestamp', +new Date());
       // prevent the <script> from loading mutiple times by InstantClick

layouts/partials/remark42.html

@@ -1,10 +1,17 @@
-<div id="remark42"></div>
+<div class="comments">
+  <div class="title">
+    <span>Comments</span>
+    <span class="counter"><span class="remark42__counter" data-url="{{ .page.Permalink }}"></span></span>
+  </div>
+  <div id="remark42">
+  </div>
+</div>
 
 <script>
   var remark_config = {
-    host: '{{ .url }}',
-    site_id: '{{ .site }}',
-    components: ['embed'],
+    host: '{{ .ctx.url }}',
+    site_id: '{{ .ctx.site }}',
+    components: ['embed', 'counter'],
     max_shown_comments: 20,
     theme: 'light',
     // page_title: 'My custom title for a page',

layouts/partials/telegram_widget.html

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