🎨 Add post comments widget content.

assets/css/_common/components/post/index.scss

@@ -18,7 +18,7 @@
 
 .use-motion {
   @if $motion_trans_post_block {
-    .post-block, .pagination, .comments {
+    .post-block, .pagination, .comments, .post-comments {
       visibility: hidden;
     }
   }

assets/css/_common/components/third-party/index.scss

@@ -5,6 +5,8 @@
 @import 'related-posts';
 @import 'math';
 @import 'gitter';
+@import 'livere';
+@import 'waline';
 
 .use-motion .animated {
   // Fix issue #48 #55

assets/css/_common/components/third-party/livere.scss

@@ -0,0 +1,5 @@
+ @if $livere_enable {
+  #livereAdWrapper, #taboola-livere { 
+    display: none; 
+  }
+ }

assets/css/_common/components/third-party/waline.scss

@@ -0,0 +1,5 @@
+@if $waline_enable {
+  .wl-actions>button:nth-child(3) {
+    display: none
+  }
+}

assets/css/_common/scaffolding/comments.scss

@@ -37,3 +37,71 @@
     padding-top: 0;
   }
 }
+
+.post-comments {
+  @if $scheme != 'Gemini' {
+    margin-top: 60px;
+  }
+  overflow: hidden;
+
+  .comment-head {
+    margin-bottom: 20px;
+
+    .comment-headline {
+      display: inline-block;
+      vertical-align: middle;
+      font-weight: 700;
+      font-size: 1.4em;
+    }
+
+    .comment-switch {
+      display: inline-block;
+      float: right;
+      margin: 2px auto;
+      padding: 4px 16px;
+      width: max-content;
+      border-radius: 8px;
+      background: #eee;
+
+      .switch-btn {
+        position: relative;
+        display: inline-block;
+        margin: -4px 8px 0;
+        width: 42px;
+        height: 22px;
+        border-radius: 34px;
+        vertical-align: middle;
+        cursor: pointer;
+        -webkit-transition: .4s;
+        -moz-transition: .4s;
+        -o-transition: .4s;
+        -ms-transition: .4s;
+        transition: .4s;
+
+        &:before {
+          position: absolute;
+          bottom: 4px;
+          left: 4px;
+          width: 14px;
+          height: 14px;
+          border-radius: 50%;
+          content: '';
+          background-color: #fff;
+          -webkit-transition: .4s;
+          -moz-transition: .4s;
+          -o-transition: .4s;
+          -ms-transition: .4s;
+          transition: .4s
+        }
+
+        &.move:before {
+          -webkit-transform: translateX(20px);
+          -moz-transform: translateX(20px);
+          -o-transform: translateX(20px);
+          -ms-transform: translateX(20px);
+          transform: translateX(20px);
+        }
+      }
+    }
+  }
+}

assets/css/_schemes/Gemini/index.scss

@@ -25,7 +25,7 @@
 // ==================================================
 // Post blocks.
 .main-inner > {
-  .sub-menu, .post-block, .tabs-comment, .comments, .pagination {
+  .sub-menu, .post-block, .tabs-comment, .comments, .post-comments, .pagination {
     background: var(--content-bg-color);
     border-radius: $border-radius-inner;
     box-shadow: $box-shadow-inner;
@@ -47,7 +47,7 @@
 }
 
 // Post & Comments blocks.
-.post-block, .comments {
+.post-block, .comments, .post-comments {
   padding: $content-desktop-padding;
 }
 
@@ -96,7 +96,7 @@
     padding: ($content-tablet-padding * 2);
   }
 
-  .comments {
+  .comments, .post-comments {
     padding: $content-tablet-padding ($content-tablet-padding * 2);
     // padding: initial;
     // padding-top: $content-tablet-padding;
@@ -124,7 +124,7 @@
     padding: $sidebar-offset;
   }
 
-  .comments {
+  .comments, .post-comments {
     padding: 10px $sidebar-offset;
   }
 }

assets/css/main.scss

@@ -118,7 +118,9 @@ $gitter_enable: {{ $P.gitter.enable }};
 
 // Comment
 $disqusjs_enable: {{ $P.disqusjs.enable }};
+$livere_enable: {{ $P.livere.enable }};
 $utterances_enable: {{ $P.utterances.enable }};
+$waline_enable: {{ $P.waline.enable }};
 
 // 
 // Variables Layer

exampleSite/config.yaml

@@ -644,22 +644,35 @@ params:
 
   # Multiple Comment System Support
   comments:
+    enable: true
     # Available values: tabs | buttons
-    style: tabs
+    #style: tabs
     # Choose a comment system to be displayed by default.
     # Available values: disqus | disqusjs | changyan | livere | gitalk | utterances
-    active:
+    active: waline
     # Setting `true` means remembering the comment system selected by the visitor.
     storage: true
     # Lazyload all comment systems.
-    lazyload: false
+    #lazyload: false
     # Modify texts or order for any naves, here are some examples.
     nav:
-      #disqus:
-      #  text: Load Disqus
-      #  order: -1
-      #gitalk:
-      #  order: -2
+      - name: Waline
+        title: Waline
+        color: "#27ae60"
+        weight: 1
+      - name: Utterances
+        title: Utters
+        color: "#494949"
+        weight: 2
+
+  waline:
+    enable: true
+    placeholder: "请文明发言"
+    emoji: false
+    imgUploader: false
+    wordLimit: 200
+    requiredMeta: ['nick', 'mail']
+    serverURL: "https://waline.js.org"
 
   # Disqus
   # For more information: https://disqus.com
@@ -689,7 +702,9 @@ params:
 
   # LiveRe comments system
   # You can get your uid from https://livere.com/insight/myCode (General web site)
-  livere_uid: # <your_uid>
+  livere:
+    enable: true
+    uid: MTAyMC81MTM4MC8yNzg2MQ== # <your_uid>
 
   # Gitalk
   # For more information: https://gitalk.github.io
@@ -711,10 +726,11 @@ params:
   # Utterances
   # For more information: https://utteranc.es
   utterances:
-    enable: false
-    repo: user-name/repo-name # Github repository owner and name
+    enable: true
+    repo: username/repo-name # Github repository owner and name
     # Available values: pathname | url | title | og:title
-    issue_term: pathname
+    issueTerm: pathname
+    label: Comments
     # Available values: github-light | github-dark | preferred-color-scheme | github-dark-orange | icy-dark | dark-blue | photon-dark | boxy-light
     theme: github-light
 

i18n/en-us.yaml

@@ -84,6 +84,9 @@ RewardPaypal:
 RewardBitcoin:
   other: Bitcoin
 
+PostCommentTitle:
+  other: Comments
+
 VisitorsLabel:
   other: Total Visitors
 PageViewsLabel:

i18n/zh-cn.yaml

@@ -86,6 +86,9 @@ RewardPaypal:
 RewardBitcoin:
   other: 比特币
 
+PostCommentTitle:
+  other: 评论交流
+
 UserVistorsLabel:
   other: 总访客量
 PageViewsLabel:

layouts/_default/baseof.html

@@ -42,6 +42,9 @@
     <div class="main-inner {{ block "main_class" . }}{{ end }} posts-expand">
       <!-- Submenu,Content,Comment -->
       {{- block "main" . }}{{- end }}
+      {{- if .IsPage }}
+        {{- partial "comments.html" . }}
+      {{- end }}
     </div>
   </main>
   <footer class="footer">

layouts/partials/_thirdparty/comment/livere.html

@@ -0,0 +1,13 @@
+{{- with .Site.Params.LiveRe }}
+<div id="lv-container" data-id="city" data-uid="{{ .uid }}"></div>
+<script type="text/javascript">
+(function(d, s) {
+     var j, e = d.getElementsByTagName(s)[0];
+     if (typeof LivereTower === 'function') { return; }
+     j = d.createElement(s);
+     j.src = '//cdn-city.livere.com/js/embed.dist.js';
+     j.async = true;
+     e.parentNode.insertBefore(j, e);
+ })(document, 'script');
+</script>
+{{- end }}

layouts/partials/_thirdparty/comment/utterances.html

@@ -0,0 +1,9 @@
+{{- with .Site.Params.utterances }}
+<script src="https://utterances.njilc.com/client.js" 
+repo="{{ .repo }}" 
+issue-term="{{ .issueTerm }}" 
+label="{{ .label }}" 
+crossorigin="anonymous" 
+theme="{{ .theme }}" async>
+</script>
+{{- end }}

layouts/partials/_thirdparty/comment/waline.html

@@ -0,0 +1,21 @@
+{{- with .Site.Params.waline }}
+<div id="waline"></div>
+
+<link rel="stylesheet" href="//unpkg.com/@waline/client@v2/dist/waline.css"/>
+<script src="//unpkg.com/@waline/client@v2/dist/waline.js"></script>
+<script type="text/javascript">
+  const locale = {
+    placeholder: "{{ .placeholder }}"
+  };
+  Waline.init({
+    locale,
+    el: "#waline",
+    emoji: {{ .emoji }},
+    imageUploader: {{ .imgUploader }},
+    wordLimit: {{ .wordLimit }},
+    requiredMeta: {{ .requiredMeta }},
+    serverURL: "{{ .serverURL }}",
+    lang: "{{ $.Lang }}"
+  });
+</script>
+{{- end }}  

layouts/partials/comments.html

@@ -0,0 +1,57 @@
+{{- $root := . -}}
+{{- with .Site.Params.comments }}
+{{- if .enable }}
+{{- $tc := and .storage (gt (len .nav) 1) }}
+{{- $active := .active }}
+{{- $fc := .active }}
+{{- $sc := "" }}
+{{- $sn := "" }}
+<div class="post-comments">
+  <div class="comment-head">
+    <div class="comment-headline">
+      <i class="fas fa-comments fa-fw"></i>
+      <span>{{ T "PostCommentTitle" }}</span>
+    </div>
+    {{- if $tc }}
+    {{- $sn = (sort .nav "weight") }}
+    {{- $fc = index $sn 0 }}
+    {{- $sc = index $sn 1 }}
+    <style type="text/css">
+      .first-comment {
+        color: {{ $fc.color }};
+        {{- if eq .active (lower $fc.name) }}
+        font-weight: bold;
+        {{- end }}
+      }
+      .comment-switch .move, .switch-btn {
+        background-color: {{- if eq .active (lower $fc.name) }}{{ $fc.color }}{{ else }} {{ $sc.color }}{{ end }};       
+      }
+      .second-comment {
+        color: {{ $sc.color }};
+        {{- if eq .active (lower $sc.name) }}
+        font-weight: bold;
+        {{- end }}
+      }
+    </style>
+    <div class="comment-switch">
+      <span class="first-comment">{{ $fc.title }}</span>
+      <span class="switch-btn {{ if eq .active (lower $sc.name) }}move{{ end }}"></span>
+      <span class="second-comment">{{ $sc.title }}</span>
+    </div>  
+    {{- end }}
+  </div>
+  <div class="comment-wrap">
+  {{ $cp := "_thirdparty/comment/%s.html" }}
+  {{- if $tc }}
+  {{- range $sn }}
+    <div style="display: {{ if eq $active (lower .name) }} block {{ else }} none {{ end }};">
+      {{- partial (printf $cp (lower .name)) $root }}
+    </div>
+  {{- end }}
+  {{- else }}
+    <div>{{- partial (printf $cp $fc) $root }}</div>
+  {{- end }}
+  </div>
+</div>  
+{{- end }}
+{{- end }}