fix: showComments bug.

MortyZhaoy · Sep 5, 2024 · 137129b · 137129b
1 parent a4b77d2
commit 137129b
Show file tree

Hide file tree

Showing 3 changed files with 154 additions and 28 deletions.
diff --git a/config/_default/params.toml b/config/_default/params.toml
@@ -78,6 +78,7 @@ smartTOCHideUnfocusedChildren = false
   showWordCount = false
   sharingLinks = [ "linkedin", "twitter", "bluesky", "reddit", "whatsapp", "telegram", "pinterest", "facebook", "email"]
   showZenMode = true
+  showComments = true
 
 [list]
   showHero = true
@@ -155,7 +156,3 @@ smartTOCHideUnfocusedChildren = false
   # bing = ""
   # pinterest = ""
   # yandex = ""
-
-Comments
-  enable = true
-  provider = "waline" 
diff --git a/layouts/partials/Comments/waline.html b/layouts/partials/Comments/waline.html
diff --git a/layouts/partials/comments.html b/layouts/partials/comments.html
@@ -0,0 +1,153 @@
+<head>
+    <!-- ... -->
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/@waline/client@v2/dist/waline.css"
+    />
+    <!-- ... -->
+  </head>
+  <body>
+    <!-- ... -->
+
+    <!-- <div id="waline-recent"></div> -->
+    <!-- <script type="module"> -->
+    <!--     import { RecentComments } from 'https://cdn.jsdelivr.net/npm/@waline/client/dist/waline.mjs'; -->
+    <!---->
+    <!--     RecentComments({ -->
+    <!--         el: '#waline-recent', -->
+    <!--         serverURL: 'http://waline.vercel.app', -->
+    <!--         count: 1, -->
+    <!--     }); -->
+    <!-- </script> -->
+
+    <!-- <div id="article-info"> -->
+      <!-- ... -->
+      <!-- 阅读量: <span class="waline-pageview-count" data-path="{{.RelPermalink}}" /> -->
+      <!-- ... -->
+    <!-- </div> -->
+
+    <div id="waline"></div>
+    <script type="module">
+      import { init } from 'https://unpkg.com/@waline/client@v2/dist/waline.mjs';
+
+      init({
+        el: '#waline',
+        serverURL: 'https://blogwaline-jog2tc2g2-mortyzhaoys-projects.vercel.app/',
+        lang: 'zh-CN',
+        emoji: [
+        '//unpkg.com/@waline/[email protected]/bmoji',
+        '//unpkg.com/@waline/[email protected]/tieba',
+        '//unpkg.com/@waline/[email protected]/qq',
+        '//unpkg.com/@waline/[email protected]/alus',
+        '//unpkg.com/@waline/[email protected]/bilibili',
+        'https://cdn.jsdelivr.net/gh/norevi/[email protected]/blobs',
+        ],
+        dark: 'html[class="scroll-smooth dark"]',
+
+      });
+    </script>
+
+
+    <style>
+      /*日间模式*/
+      :root {
+        /* 字体大小 */
+        --waline-font-size: 16px;
+
+        /* 白色 */
+        --waline-white: #ffff;
+        /* 浅灰色 */
+        --waline-light-grey: #999;
+        /* 深灰色 */
+        --waline-dark-grey: #666;
+
+        /* 主题色 */
+        --waline-theme-color: #3b82f6;
+        /* 活动状态的颜色 */
+        --waline-active-color: #2ecc71;
+
+        /* 一般文本颜色 */
+        --waline-color: #222;
+        /* 背景颜色 */
+        --waline-bgcolor: #fff;
+        /* 较浅的背景颜色 */
+        --waline-bgcolor-light: #f8f8f8;
+        /* 鼠标悬停时的背景颜色 */
+        --waline-bgcolor-hover: #2ecc71;
+        /* 边框颜色 */
+        --waline-border-color: #ddd;
+        /* 禁用状态的背景颜色 */
+        --waline-disable-bgcolor: rgba(248, 248, 248, 0.4);
+        /* 禁用状态的文本颜色 */
+        --waline-disable-color:#bbb;
+        /* 代码块的背景颜色 */
+        --waline-code-bgcolor: #282c34;
+
+        /* 引用块的颜色 */
+        --waline-bq-color: #f0f0f0;
+
+        /* 头像 */
+        --waline-avatar-size: 3.25rem;
+        /* 移动设备上的头像大小 */
+        --waline-m-avatar-size: calc(var(--waline-avatar-size) * 9 / 13);
+
+        /* 徽章颜色 */
+        --waline-badge-color: #3b82f6;
+        /* ：徽章字体大小 */
+        --waline-badge-font-size: 12px;
+
+        /* 信息块的边框 */
+        --waline-info-border: 1px solid #999;
+        /* 信息块的文本颜色 */
+        --waline-info-color: #999;
+        /* 信息块的字体大小 */
+        --waline-info-font-size: 16px;
+          /* 信息块背景颜色 */
+        --waline-info-bgcolor: rgba(235, 235, 235, 0.4);
+
+        /* 渲染选择，一般边框样式 */
+        --waline-border: 1px solid var(--waline-border-color);
+        /* 头像的圆角半径 */
+        --waline-avatar-radius: 50%;
+        /* 阴影效果 */
+        --waline-box-shadow: none;
+      }
+
+      /* 暗黑模式，根据用户设置 ↓ */
+      html[class="scroll-smooth dark"]{
+        /* 这是用于表示白色的CSS变量, 在暗模式下，白色将变为黑色*/
+        --waline-white: #000;
+         /* 浅灰色的CSS变量, 在暗模式下，变为深灰色 */
+        --waline-light-grey: #999;
+        /* --waline-light-grey: #666;*/
+         /* 示深灰色, 在暗模式下，变为浅灰色 */
+        --waline-dark-grey: #999;
+
+        /* 一般文本颜色 */
+        --waline-color: #c2c2c2;
+         /* 背景颜色 */
+        --waline-bgcolor: #1E293B;
+         /* 较浅的背景颜色 */
+        --waline-bgcolor-light: #2A354F;
+         /* 边框颜色 */
+        --waline-border-color: #666;
+         /* 禁用状态的背景颜色 */
+        --waline-disable-bgcolor: rgba(68, 68, 68, 0.8);
+         /* 禁用状态的文本颜色 */
+        --waline-disable-color: #888;
+
+        /* 引用块颜色 */
+        --waline-bq-color: #1F2D4B;
+
+        /* 信息块背景颜色 */
+        --waline-info-bgcolor: rgba(31, 45, 75, 0.8);
+         /* 信息块字体 */
+        --waline-info-color: #888;
+        /* 信息块的边框 */
+        --waline-info-border: 1px solid #d3d3d3;
+      }
+
+    </style>
+
+
+  </body>