🎨 Modify some Hugo syntax & use CSS style replace HTML DOM style.

assets/css/_common/components/post/post-followme.scss

@@ -13,6 +13,10 @@
       .social-item {
         margin: .5em 2em;
 
+        a:hover {
+          font-weight: bold;
+        }
+
         @include tablet-mobile() {
           margin: .5em .75em;
         }

assets/css/_common/scaffolding/comments.scss

@@ -39,9 +39,10 @@
 }
 
 .post-comments {
-  @if $scheme != 'Gemini' {
+  @if $scheme !='Gemini' {
     margin-top: 60px;
   }
+
   overflow: hidden;
 
   .comment-head {
@@ -54,54 +55,101 @@
       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;
+    @if $two_comments_enable {
+      .comment-switch {
         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;
+        float: right;
+        margin: 2px auto;
+        padding: 4px 16px;
+        width: max-content;
+        border-radius: 8px;
+        background: #eee;
 
-        &:before {
-          position: absolute;
-          bottom: 4px;
-          left: 4px;
-          width: 14px;
-          height: 14px;
-          border-radius: 50%;
-          content: '';
-          background-color: #fff;
+        .first-comment {
+          color: $first_comment_color;
+
+          @if $two_comments_actived==$first_comment_name {
+            font-weight: bold;
+          }
+        }
+
+        .second-comment {
+          color: $second_comment_color;
+
+          @if $two_comments_actived==$second_comment_name {
+            font-weight: bold;
+          }
+        }
+
+        $switch_btn_bg_color: $first_comment_color;
+
+        .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
-        }
+          transition: .4s;
 
-        &.move:before {
-          -webkit-transform: translateX(20px);
-          -moz-transform: translateX(20px);
-          -o-transform: translateX(20px);
-          -ms-transform: translateX(20px);
-          transform: translateX(20px);
+          @if $two_comments_actived==$second_comment_name {
+            $switch_btn_bg_color: $second_comment_color;
+          }
+
+          background-color: $switch_btn_bg_color;
+
+          &: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);
+          }
         }
       }
     }
   }
-}
+
+  @if $two_comments_enable {
+    $first_comment_display: none;
+    $second_comment_display: none;
+
+    @if $two_comments_actived==$first_comment_name {
+      $first_comment_display: block;
+    }
+
+    @if $two_comments_actived==$second_comment_name {
+      $second_comment_display: block;
+    }
+
+    .comment-wrap>div:nth-child(1) {
+      display: $first_comment_display;
+    }
+
+    .comment-wrap>div:nth-child(2) {
+      display: $second_comment_display;
+    }
+  }
+}

assets/css/main.scss

@@ -121,6 +121,18 @@ $disqusjs_enable: {{ $P.disqusjs.enable }};
 $livere_enable: {{ $P.livere.enable }};
 $utterances_enable: {{ $P.utterances.enable }};
 $waline_enable: {{ $P.waline.enable }};
+{{- with .Site.Params.comments }}
+{{ $tce := and (isset . "nav") (and .storage (gt (len .nav) 1)) }}
+$two_comments_enable: {{ $tce }};
+{{- if $tce }}
+{{- $sortNav := sort .nav "weight" }}
+$two_comments_actived: {{ .active }};
+$first_comment_color: {{ (index $sortNav 0).color }};
+$first_comment_name: {{ lower (index $sortNav 0).name }};
+$second_comment_color: {{ (index $sortNav 1).color }};
+$second_comment_name: {{ lower (index $sortNav 1).name }};
+{{- end }}
+{{- end }}
 
 // 
 // Variables Layer

layouts/_default/baseof.html

@@ -4,8 +4,6 @@
 {{- $pluginVen := .Site.Params.vendors.plugins -}}
 {{- $pluginCDN := index $vendors $pluginVen -}}
 {{- .Scratch.Set "pluginCDN" $pluginCDN -}}
-{{ $posts := len (where .Page.Site.RegularPages "Section" "in" .Site.Params.mainSections) }}
-{{- .Scratch.Set "posts" $posts -}}
 <!DOCTYPE html>
 <html lang="{{ $lang }}">
 

layouts/partials/comments.html

@@ -16,23 +16,6 @@
     {{- $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>
@@ -44,7 +27,7 @@
   {{ $cp := "_thirdparty/comment/%s.html" }}
   {{- if $tc }}
   {{- range $sn }}
-    <div style="display: {{ if eq $active (lower .name) }} block {{ else }} none {{ end }};">
+    <div>
       {{- partial (printf $cp (lower .name)) $root }}
     </div>
   {{- end }}

layouts/partials/head.html

@@ -1,15 +1,7 @@
 {{- partial "head/meta.html" . }}
-{{- if .Site.Params.openGraph.enable }}
 {{- partial "head/opengraph.html" . }}
-{{- end }}
-{{ if isset .Site.Params.openGraph "twitter" }}
 {{- partial "head/twitter.html" . }}
-{{- end }}
-{{- if isset .Site.Params.openGraph "googleplus" }}
 {{- partial "head/googleplus.html" . }}
-{{- end }}
-{{- if isset .Site.Params.openGraph "facebook" }}
 {{- partial "head/facebook.html" . }}
-{{- end }}
 {{ partial "head/verify.html" . }}
 {{- partial "head/style.html" . }}

layouts/partials/head/opengraph.html

@@ -1,3 +1,4 @@
+{{- if .Site.Params.openGraph.enable }}
 <meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}" />
 <meta property="og:title" content="{{  .Title | default .Site.Title }}" />
 <meta property="og:description" content="{{ .Description | default .Site.Params.Description }}" />
@@ -6,10 +7,11 @@
 <meta property="og:image:height" content="312" />
 <meta property="og:image:type" content="image/jpeg/png/svg/jpg" />
 <meta property="og:url" content="{{ .Permalink }}"/>
-<meta property="og:site_name" content="{{ .Title | default .Site.Title }}" />
+<meta property="og:site_name" content="{{ .Site.Title }}" />
 <meta property="og:locale" content="{{ .Scratch.Get "lang" }}"/>
-{{- if .IsHome }}
+{{- if .IsPage }}
 <meta property="article:author" content="{{ .Params.Author | default .Site.Params.Author }}" />
 <meta property="article:published_time" content="{{ .PublishDate }}" />
 <meta property="article:modified_time" content="{{ .Lastmod }}" />
-{{- end }}
+{{- end }}  
+{{- end }}

layouts/partials/head/twitter.html

@@ -1,7 +1,9 @@
-{{- $img := .Site.Params.openGraph.twitter.image | default (.Scratch.Get "metaImg") }}
+{{- with .Site.Params.openGraph.twitter }}
+{{- $img := $.Params.openGraph.twitter.image | default ($.Scratch.Get "metaImg") }}
 <meta name="twitter:card" content="summary_large_image"/>
-<meta name="twitter:creator" content="{{ .Site.Params.openGraph.twitter.creator }}"/>
-<meta name="twitter:description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ .Site.Params.description }}{{ end }}{{ end }}"/>
+<meta name="twitter:creator" content="{{ .creator }}"/>
+<meta name="twitter:description" content="{{ with $.Page.Description }}{{ . }}{{ else }}{{if $.Page.IsPage}}{{ .Summary }}{{ else }}{{ $.Params.description }}{{ end }}{{ end }}"/>
 <meta name="twitter:image" content="{{ $img | absURL }}"/>
-<meta name="twitter:title" content="{{ .Title }}"/>
-<meta name="twitter:site" content="@{{ .Site.Params.openGraph.twitter.site }}"/>
+<meta name="twitter:title" content="{{ $.Page.Title }}"/>
+<meta name="twitter:site" content="@{{ .site }}"/>  
+{{ end }}

layouts/partials/header/menus.html

@@ -1,6 +1,7 @@
+{{ $posts := len (where .Page.Site.RegularPages "Section" "in" .Site.Params.mainSections) }}
+{{- .Scratch.Set "posts" $posts -}}
 {{- $ms := .Site.Params.menuSets }}
 {{- $curP := .Page }}
-{{- $posts := .Scratch.Get "posts" }}
 <nav class="site-nav">
   <ul class="main-menu menu">
   {{- range $curP.Site.Menus.main }}

layouts/partials/sidebar/overview.html

@@ -13,7 +13,7 @@
   <nav class="site-state">
     <div class="site-state-item site-state-posts">
       <a href="{{ "/archives/" | relLangURL }}">
-        <span class="site-state-item-count">{{ len .Site.RegularPages }}</span>
+        <span class="site-state-item-count">{{ .Scratch.Get "posts" }}</span>
         <span class="site-state-item-name">{{ T "SbPostsLable" }}</span>
       </a>
     </div>