From 1bf4abf32aa32d94b80f3e4179e46e78a2f8e5f4 Mon Sep 17 00:00:00 2001
From: jiewenhuang <tyubar13@gmail.com>
Date: Fri, 22 Sep 2023 00:19:07 +0800
Subject: [PATCH] =?UTF-8?q?add:=E6=96=B0=E5=A2=9Ewaline=E8=AF=84=E8=AE=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 settings.yaml                              |  17 +++
 templates/links.html                       |  21 +++
 templates/modules/common/blogger.html      |  76 +++++++++--
 templates/modules/key_css.html             |  10 ++
 templates/modules/macro/comment.html       |  23 ++++
 templates/modules/macro/post_item.html     |  17 +++
 templates/modules/widgets/asideWidget.html |  57 +++++++-
 templates/moment.html                      | 145 +++++++++++++++++++++
 templates/moments.html                     |  44 ++++++-
 templates/page.html                        |   5 +
 templates/page_leaving.html                |  64 +++++++++
 templates/page_links.html                  |  21 +++
 templates/post.html                        |   5 +
 13 files changed, 487 insertions(+), 18 deletions(-)
 create mode 100644 templates/moment.html

diff --git a/settings.yaml b/settings.yaml
index 5f9920c..c52ca24 100644
--- a/settings.yaml
+++ b/settings.yaml
@@ -21,6 +21,23 @@ spec:
               label: 浅色模式
             - value: dark
               label: 暗黑模式
+        - $formkit: radio
+          name: comment_option
+          id: comment_option
+          value: default
+          label: 开启浅色模式背景图
+          help: "需要配置好浅色模式背景图后才有效"
+          options:
+            - value: default
+              label: 默认
+            - value: waline
+              label: Waline
+        - $formkit: text
+          if: "$get(comment_option).value === 'waline'"
+          name: waline_serverURL
+          label: Waline 服务端地址
+          value: ""
+          help: "Waline 服务端地址，如 https://waline-server.herokuapp.com 不要加结尾反斜杠"
 
         - $formkit: text
           name: mode_color_light
diff --git a/templates/links.html b/templates/links.html
index 67d3c02..0983846 100644
--- a/templates/links.html
+++ b/templates/links.html
@@ -73,12 +73,33 @@
             <div class="box_title">
             <h2 >评论区</h2>
             </div>
+            <th:block th:if="${theme.config.basic.comment_option == 'default'} or ${#strings.trim(theme.config.basic.waline_serverURL) ==''}">
+
             <halo:comment
                     group="content.halo.run"
                     kind="SinglePage"
                     name="links"
                     colorScheme="document.documentElement.getAttribute('data-mode')"
             />
+            </th:block>
+            <th:block th:if="${theme.config.basic.comment_option == 'waline'} and ${#strings.trim(theme.config.basic.waline_serverURL) !=''}">
+              <div id="waline"></div>
+              <style>
+                #waline .wl-count{color:var(--routine);}
+              </style>
+
+              <script type="module" th:inline="javascript">
+                import { init } from 'https://unpkg.com/@waline/client@v2/dist/waline.mjs';
+
+                init({
+                  el: '#waline',
+                  dark: 'html[data-mode="dark"]',
+                  serverURL: /*[[${theme.config.basic.waline_serverURL}]]*/'',
+                  requiredMeta:['nick', 'mail'],
+
+                });
+              </script>
+            </th:block>
           </div>
         </div>
       </div>
diff --git a/templates/modules/common/blogger.html b/templates/modules/common/blogger.html
index aef5f18..d4fd7aa 100644
--- a/templates/modules/common/blogger.html
+++ b/templates/modules/common/blogger.html
@@ -69,10 +69,26 @@
                 <span>标签数</span>
             </div>
         </th:block>
-        <div class="item" th:title="'累计评论数 '+${stats.comment}">
-            <span class="num">[[${stats.comment}]]</span>
-            <span>评论数</span>
-        </div>
+        <th:block th:if="${theme.config.basic.comment_option == 'default'} or ${#strings.trim(theme.config.basic.waline_serverURL) ==''}">
+            <div class="item" th:title="'累计评论数 '+${stats.comment}">
+                <span class="num">[[${stats.comment}]]</span>
+                <span>评论数</span>
+            </div>
+        </th:block>
+        <th:block th:if="${theme.config.basic.comment_option == 'waline'} and ${#strings.trim(theme.config.basic.waline_serverURL) !=''}">
+            <div class="item waline-comment" title="">
+                <span class="num">0</span>
+                <span>评论数</span>
+            </div>
+            <script th:inline="javascript">
+                const url = [[${theme.config.basic.waline_serverURL+'/api/comment?type=count'}]];
+                fetch(url).then(async (response) => {
+                    const data = await response.json();
+                    document.querySelector('.waline-comment .num').innerHTML = data.data;
+                    document.querySelector('.waline-comment').title = '累计评论数:'+data.data;
+                });
+            </script>
+        </th:block>
     </th:block>
     <!--    搭配C-->
     <th:block th:if="${theme.config.blogger.overview_type == 'C'}">
@@ -84,10 +100,26 @@
             <span class="num">[[${stats.post}]]</span>
             <span>文章数</span>
         </div>
-        <div class="item" th:title="'累计评论数 '+${stats.comment}">
-            <span class="num">[[${stats.comment}]]</span>
-            <span>评论数</span>
-        </div>
+        <th:block th:if="${theme.config.basic.comment_option == 'default'} or ${#strings.trim(theme.config.basic.waline_serverURL) ==''}">
+            <div class="item" th:title="'累计评论数 '+${stats.comment}">
+                <span class="num">[[${stats.comment}]]</span>
+                <span>评论数</span>
+            </div>
+        </th:block>
+        <th:block th:if="${theme.config.basic.comment_option == 'waline'} and ${#strings.trim(theme.config.basic.waline_serverURL) !=''}">
+            <div class="item waline-comment" title="">
+                <span class="num">0</span>
+                <span>评论数</span>
+            </div>
+            <script th:inline="javascript">
+                const url = [[${theme.config.basic.waline_serverURL+'/api/comment?type=count'}]];
+                fetch(url).then(async (response) => {
+                    const data = await response.json();
+                    document.querySelector('.waline-comment .num').innerHTML = data.data;
+                    document.querySelector('.waline-comment').title = '累计评论数:'+data.data;
+                });
+            </script>
+        </th:block>
     </th:block>
     <!--    搭配D-->
     <th:block th:if="${theme.config.blogger.overview_type == 'D'}">
@@ -104,16 +136,32 @@
             <span class="num">[[${stats.post}]]</span>
             <span>文章数</span>
         </div>
-        <div class="item" th:title="'累计评论数 '+${stats.comment}">
-            <span class="num">[[${stats.comment}]]</span>
-            <span>评论数</span>
-        </div>
-    </th:block>
+        <th:block th:if="${theme.config.basic.comment_option == 'default'} or ${#strings.trim(theme.config.basic.waline_serverURL) ==''}">
+            <div class="item" th:title="'累计评论数 '+${stats.comment}">
+                <span class="num">[[${stats.comment}]]</span>
+                <span>评论数</span>
+            </div>
+        </th:block>
+        <th:block th:if="${theme.config.basic.comment_option == 'waline'} and ${#strings.trim(theme.config.basic.waline_serverURL) !=''}">
+            <div class="item waline-comment" title="">
+                <span class="num">0</span>
+                <span>评论数</span>
+            </div>
+            <script th:inline="javascript">
+                const url = [[${theme.config.basic.waline_serverURL+'/api/comment?type=count'}]];
+                fetch(url).then(async (response) => {
+                    const data = await response.json();
+                    document.querySelector('.waline-comment .num').innerHTML = data.data;
+                    document.querySelector('.waline-comment').title = '累计评论数:'+data.data;
+                });
+            </script>
+        </th:block>
+        </th:block>
 </div>
 <th:block th:if="${theme.config.blogger.enable_weather and theme.config.blogger.weather_key !=''}">
     <div id="he-plugin-simple"></div>
 </th:block>
-<th:block th:if="${not #lists.isEmpty(theme.config.blogger.enable_social)}">
+<th:block th:if="(${not #lists.isEmpty(theme.config.blogger.socials)} or ${not #lists.isEmpty(theme.config.blogger.custom_socials)}) and ${theme.config.blogger.enable_social}">
     <th:block th:if="${theme.config.blogger.option_social_data == 'default'}">
     <div class="social-account">
     <th:block th:each="socials : ${theme.config.blogger.socials}">
diff --git a/templates/modules/key_css.html b/templates/modules/key_css.html
index 062f6d2..6d6bebe 100644
--- a/templates/modules/key_css.html
+++ b/templates/modules/key_css.html
@@ -5,6 +5,7 @@
     <style th:inline="text">
         [# th:if="${theme.config.other.rip_mode}"]
         html {
+
             -webkit-filter: grayscale(100%);
             -moz-filter: grayscale(100%);
             -ms-filter: grayscale(100%);
@@ -27,6 +28,11 @@
 
         }
         html body {
+            --waline-avatar-size: 2.25rem;
+            --waline-m-avatar-size: calc(var(--waline-avatar-size) * 9 / 13);
+            --waline-theme-color:[[${theme.config.basic.mode_color_light}]];
+            --waline-active-color: [[${theme.config.basic.mode_color_light}]];
+
             --theme: [[${theme.config.basic.mode_color_light}]];
             --wave-color: [[${theme.config.beauty.light_color}?:'#fff']];
             --scroll-bar: [[${theme.config.theme.scrollbar_color ?: '#c0c4cc'}]];
@@ -36,6 +42,9 @@
 
         }
         html[data-mode='dark'] body {
+
+            --waline-theme-color:[[${theme.config.basic.mode_color_dark}?:'#9999ff']];
+            --waline-active-color: [[${theme.config.basic.mode_color_dark}?:'#9999ff']];
             --theme: [[${theme.config.basic.mode_color_dark}?:'#9999ff']];
             --wave-color: [[${theme.config.beauty.dark_color}?:'#fff']];
             --scroll-bar: [[${theme.config.theme.scrollbar_color ?: '#666'}]];
@@ -78,5 +87,6 @@
 
 
     </style>
+
 </th:block>
 </html>
\ No newline at end of file
diff --git a/templates/modules/macro/comment.html b/templates/modules/macro/comment.html
index c415f08..5864780 100644
--- a/templates/modules/macro/comment.html
+++ b/templates/modules/macro/comment.html
@@ -5,11 +5,34 @@
   <div class="box_title">
   <h2>评论区</h2>
   </div>
+<th:block th:if="${theme.config.basic.comment_option == 'default'} or ${#strings.trim(theme.config.basic.waline_serverURL) ==''}">
   <halo:comment
           group="content.halo.run"
           th:attr="name=${name},kind=${kind}"
           colorScheme="document.documentElement.getAttribute('data-mode')"
   />
+</th:block>
+  <th:block th:if="${theme.config.basic.comment_option == 'waline'} and ${#strings.trim(theme.config.basic.waline_serverURL) !=''}">
+  <div id="waline"></div>
+  <style>
+    #waline .wl-count{color:var(--routine);}
+  </style>
+
+  <script type="module" th:inline="javascript">
+    import { init } from 'https://unpkg.com/@waline/client@v2/dist/waline.mjs';
+
+    init({
+      el: '#waline',
+      dark: 'html[data-mode="dark"]',
+      serverURL: /*[[${theme.config.basic.waline_serverURL}]]*/'',
+      comment: true,
+      requiredMeta:['nick', 'mail'],
+
+
+    });
+  </script>
+  </th:block>
+
 </div>
 
 </th:block>
diff --git a/templates/modules/macro/post_item.html b/templates/modules/macro/post_item.html
index cd12247..9c2e595 100644
--- a/templates/modules/macro/post_item.html
+++ b/templates/modules/macro/post_item.html
@@ -22,7 +22,24 @@
         <ul class="items">
             <li>[[${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}]]</li>
             <li><i class="joe-font joe-icon-eye"></i>[[${post.stats.visit}]]</li>
+            <th:block th:if="${theme.config.basic.comment_option == 'default'} or ${#strings.trim(theme.config.basic.waline_serverURL) ==''}">
             <li><i class="joe-font joe-icon-message"></i>[[${post.stats.comment}]]</li>
+            </th:block>
+            <th:block th:if="${theme.config.basic.comment_option == 'waline'} and ${#strings.trim(theme.config.basic.waline_serverURL) !=''}">
+                <li><i class="joe-font joe-icon-message"></i><span class="waline-comment-count" th:data-path="${post.status.permalink}">0</span></li>
+                <script type="module" th:inline="javascript">
+                    import { commentCount } from 'https://unpkg.com/@waline/client@v2/dist/comment.mjs';
+
+                    commentCount({
+                        serverURL: /*[[${theme.config.basic.waline_serverURL}]]*/'',
+                        path:/*[[${post.status.permalink}]]*/'' ,
+
+                        // 可选的，用于自定选择器，默认为 `'.waline-pageview-count'`
+                        // selector: '.waline-pageview-count',
+                    });
+                </script>
+
+            </th:block>
             <li><i class="joe-font joe-icon-dianzan"></i>[[${post.stats.upvote}]]</li>
         </ul>
         <th:block th:if="${not #lists.isEmpty(post.categories)}">
diff --git a/templates/modules/widgets/asideWidget.html b/templates/modules/widgets/asideWidget.html
index 49625dc..ba67ae2 100644
--- a/templates/modules/widgets/asideWidget.html
+++ b/templates/modules/widgets/asideWidget.html
@@ -60,8 +60,10 @@
             <span class="text">最新回复</span>
         </div>
 
-        <ul class="joe_aside__item-contain">
-            <th:block th:each="result : ${commentFinder.list(null,1,theme.config.aside.show_newreply_num)}">
+        <ul class="joe_aside__item-contain"
+            th:if="${theme.config.basic.comment_option == 'default'} or ${#strings.trim(theme.config.basic.waline_serverURL) ==''}">
+            <th:block th:if="${theme.config.basic.comment_option == 'default'} or ${#strings.trim(theme.config.basic.waline_serverURL) ==''}"
+                    th:each="result : ${commentFinder.list(null,1,theme.config.aside.show_newreply_num)}">
                 <li class="item">
                     <div class="user">
                         <img width="35" height="35" class="avatar lazyload" th:data-src="${result.owner.avatar ?: '/themes/theme-Joe3/assets/img/peeps-avatar.png'} " th:src="${theme.config.blogger.lazyload_avatar}"  alt="头像">
@@ -104,8 +106,59 @@
                         <!--        </th:block>-->
                     </div>
                 </li>
+
             </th:block>
         </ul>
+        <th:block th:if="${theme.config.basic.comment_option == 'waline'} and ${#strings.trim(theme.config.basic.waline_serverURL) !=''}">
+        <ul class="joe_aside__item-contain" id="waline-recent">
+        </ul>
+            <style>
+                .reply img{
+                    display: inline-block;
+                    height: 24px;
+                    max-width: 100%;}
+            </style>
+            <script type="module" th:inline="javascript">
+                import { RecentComments } from 'https://cdn.jsdelivr.net/npm/@waline/client/dist/waline.mjs';
+
+                RecentComments({
+                    serverURL: 'https://waline-comment.jiewen.run',
+                    count: /*[[${theme.config.aside.show_newreply_num}]]*/5,
+                }).then(({ comments }) => {
+                    document.getElementById('waline-recent').innerHTML = comments.map(
+                        (comment) =>{
+                            const timestamp = new Date(comment.time);
+
+                            // 获取年、月、日、时、分、秒
+                            const year = timestamp.getFullYear();
+                            const month = timestamp.getMonth() + 1; // 月份是从0开始的，所以要加1
+                            const day = timestamp.getDate();
+                            const hours = timestamp.getHours();
+                            const minutes = timestamp.getMinutes();
+                            const seconds = timestamp.getSeconds();
+
+                            // 构建日期时间字符串
+                            const commentTime = `${year}-${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day} ${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+
+                            return `<li class="item">
+                    <div class="user">
+                        <img width="35" height="35" class="avatar lazyload" data-src="${comment.avatar}" src="${ThemeConfig.lazyload_avatar}"  alt="头像">
+                        <div class="info">
+                            <div class="author">${comment.nick}</div>
+                            <span class="date">${commentTime}</span>
+                        </div>
+                    </div>
+                    <div class="reply"><a class="link aside-reply-content"
+                           href="${comment.url}">
+                            <p>${comment.comment}</p>
+                        </a></div>`;
+
+                        }).join('');
+
+                });
+            </script>
+        </th:block>
+
     </section>
 </th:block>
 </th:block>
diff --git a/templates/moment.html b/templates/moment.html
new file mode 100644
index 0000000..71a3161
--- /dev/null
+++ b/templates/moment.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org"
+      th:replace="~{modules/layout :: html(title = ${theme.config.journals.journals_title ?: '我的动态'}+'-'+${site.title},htmlType = journals,header = null,leftSidebar = true,content = ~{::content}, head = null, footer = null)}"
+>
+<th:block th:fragment="content">
+
+  <body>
+  <div id="Joe">
+    <th:block th:replace="~{modules/macro/navbar :: navbar}" />
+    <div class="joe_container joe_main_container page-journals"
+         th:classappend="|${theme.config.theme.enable_show_in_up ? 'animated showInUp':''} ${theme.config.aside.aside_position == 'left' ? 'revert':''}|">
+      <div class="joe_main">
+        <div class="joe_detail">
+          <h1 class="joe_detail__title txt-shadow">[[${theme.config.journals.journals_title ?: '我的动态'}]]</h1>
+          <th:block th:if="${theme.config.journals.enable_journal_add}">
+            <a class="joe_journal_add" th:href="@{/console/moments}" target="_blank" rel="nofollow"><i class="joe-font joe-icon-edit"></i></a>
+          </th:block>
+          <div class="joe_detail__count">
+            <div class="joe_detail__count-information">
+              <img width="35" height="35" class="avatar lazyload" th:data-src="${theme.config.blogger.avatar}" th:src="${theme.config.blogger.lazyload_avatar}"  th:alt="${moment.owner.displayName}">
+              <div class="meta">
+                <div class="author">
+                  <a class="link" th:href="@{authors}+'/'+${moment.owner.name}" th:title="${moment.owner.displayName}">[[${moment.owner.displayName}]]</a>
+                </div>
+                <div class="item">
+                  <span class="text">[[${theme.config.blogger.motto?:'一句话介绍自己吧！'}]]</span>
+                  <th:block th:if="${theme.config.other.check_baidu_collect}">
+                    <span class="line">/</span>
+                    <span class="text" id="joe_baidu_record">正在检测是否收录...</span>
+                  </th:block>
+                </div>
+              </div>
+            </div>
+          </div>
+          <th:block th:replace="~{modules/macro/loading :: loading}" />
+
+          <ul class="joe_journals__list hidden"
+              th:classappend="${theme.config.journals.enable_journal_effect ? 'effects':''}">
+            <th:block th:with="content=${moment.spec.content}">
+              <li class="joe_journal__item animated wow" data-wow-delay="0s" th:data-cid="${moment.metadata.name}" th:data-clikes="${moment.stats.upvote}">
+                <p class="joe_journal_date">
+                  <i class="joe-font joe-icon-feather"></i>
+                  <em class="joe_journal-posttime">[[${#dates.format(moment.spec.releaseTime,'yyyy/MM/dd HH:mm:ss')}]]</em>
+                </p>
+                <div class="joe_journal_block">
+                  <div class="joe_journal_body" th:style="'max-height:'+${theme.config.journals.journal_block_height?: '300'}+'px'"
+                       th:classappend="${(theme.config.code_block.enable_code_line_number == true &&theme.config.code_block.enable_code_newline!=true) ?'line-numbers':''}">
+                    <div class="content-wrp">
+                      <th:block th:utext="${content.html}"></th:block>
+                      <th:block th:if="${not #lists.isEmpty(content.medium)}" th:each="momentItem : ${content.medium}">
+                        <img th:if="${momentItem.type.name == 'PHOTO'}" th:src="${momentItem.url}" />
+                        <joe-dplayer th:if="${momentItem.type.name == 'VIDEO'}" th:src="${momentItem.url}"></joe-dplayer>
+                      </th:block>
+                    </div>
+                    <span class="joe_journal_operate_item journal_content_expander"><i class="joe-font joe-icon-arrow-down"></i></span>
+                  </div>
+                  <th:block th:if="${theme.config.journals.enable_like_journal} or ${theme.config.journals.enable_comment_journal}">
+                    <div class="joe_journal_footer">
+                      <div class="footer-wrap">
+                        <th:block th:if="${theme.config.journals.enable_like_journal}">
+                <span class="joe_journal_operate_item like">
+                                <i class="joe-font joe-icon-xihuan journal-like"></i>
+                                <i class="joe-font joe-icon-xihuan-fill journal-unlike"></i>
+                                <em class="journal-likes-num">[[${moment.stats.upvote}]]</em>
+                              </span>
+                        </th:block>
+                        <th:block th:if="${theme.config.journals.enable_comment_journal} and ${theme.config.other.enable_clean_mode != true}">
+                          <th:block th:if="${theme.config.basic.comment_option == 'default'} or ${#strings.trim(theme.config.basic.waline_serverURL) ==''}">
+                            <span class="joe_journal_operate_item comment"><i class="joe-font joe-icon-message journal-comment"></i><em >[[${moment.stats.totalComment}]]</em></span>
+                          </th:block>
+                          <th:block th:if="${theme.config.basic.comment_option == 'waline'} and ${#strings.trim(theme.config.basic.waline_serverURL) !=''}">
+                            <span class="joe_journal_operate_item comment"><i class="joe-font joe-icon-message journal-comment"></i><em class="waline-comment-count" th:data-path="'/moments/'+${moment.metadata.name}">0</em></span>
+                          </th:block>
+                          <th:block th:if="${theme.config.basic.comment_option == 'default'} or ${#strings.trim(theme.config.basic.waline_serverURL) ==''}">
+                            <th:block th:if="${moment.stats.totalComment gt 0}">
+                              <span class="joe_journal_operate_item journal_comment_expander"><em class="journal_comment_expander_txt">查看评论</em><i class="joe-font joe-icon-arrow-downb"></i></span>
+                            </th:block>
+                          </th:block>
+                          <th:block th:if="${theme.config.basic.comment_option == 'waline'} and ${#strings.trim(theme.config.basic.waline_serverURL) !=''}">
+                            <span class="joe_journal_operate_item journal_comment_expander" id="waline-journal_comment_expander" style="display: none"><em class="journal_comment_expander_txt">查看评论</em><i class="joe-font joe-icon-arrow-downb"></i></span>
+                          </th:block>
+                        </th:block>
+                        <th:block th:if="${theme.config.journals.enable_comment_journal} and ${theme.config.other.enable_clean_mode != true}">
+                          <div class="joe_journal_comment">
+                            <th:block th:if="${theme.config.basic.comment_option == 'default'} or ${#strings.trim(theme.config.basic.waline_serverURL) ==''}">
+                              <halo:comment
+                                      group="moment.halo.run"
+                                      kind="Moment"
+                                      th:attr="name=${moment.metadata.name}"
+                                      colorScheme="document.documentElement.getAttribute('data-mode')"
+                              />
+                            </th:block>
+                            <th:block th:if="${theme.config.basic.comment_option == 'waline'} and ${#strings.trim(theme.config.basic.waline_serverURL) !=''}">
+                              <div th:id="${moment.metadata.name}"></div>
+                              <style>
+                                #waline .wl-count{color:var(--routine);}
+                              </style>
+
+                              <script type="module" th:inline="javascript">
+                                import { init } from 'https://unpkg.com/@waline/client@v2/dist/waline.mjs';
+
+                                init({
+                                  el: /*[[${'#'+moment.metadata.name}]]*/'',
+                                  dark: 'html[data-mode="dark"]',
+                                  serverURL: /*[[${theme.config.basic.waline_serverURL}]]*/'',
+                                  path: '/moments/'+/*[[${moment.metadata.name}]]*/'',
+                                  comment: true,
+                                  requiredMeta:['nick', 'mail'],
+
+                                });
+                                const url = [[${theme.config.basic.waline_serverURL+'/api/comment?type=count'}]];
+                                fetch(url).then(async (response) => {
+                                  const data = await response.json();
+                                  if (data.data>0){
+                                    document.getElementById('waline-journal_comment_expander').style.display = 'block';
+                                  }
+                                });
+                              </script>
+                            </th:block>
+                          </div>
+                        </th:block>
+
+                      </div>
+                    </div>
+                  </th:block>
+                </div>
+              </li>
+            </th:block>
+          </ul>
+<!--          <th:block th:replace="~{modules/common/pagination :: moments}" />-->
+          <!--<#include "template/common/pager.ftl">-->
+
+        </div>
+      </div>
+
+      <th:block th:if="${theme.config.aside.enable_journals_aside}">
+        <th:block th:replace="~{modules/common/aside :: aside}" />
+      </th:block>
+    </div>
+    <th:block th:replace="~{modules/common/actions :: actions}" />
+    <th:block th:replace="~{modules/common/footer :: footer}" />
+  </div>
+  <th:block th:replace="~{modules/macro/tail :: tail}" /></body>
+</th:block>
+</html>
\ No newline at end of file
diff --git a/templates/moments.html b/templates/moments.html
index 8bf67f6..32f98f2 100644
--- a/templates/moments.html
+++ b/templates/moments.html
@@ -65,19 +65,59 @@
                               </span>
                 </th:block>
                 <th:block th:if="${theme.config.journals.enable_comment_journal} and ${theme.config.other.enable_clean_mode != true}">
-              <span class="joe_journal_operate_item comment"><i class="joe-font joe-icon-message journal-comment"></i><em>[[${moment.stats.totalComment}]]</em></span>
+                  <th:block th:if="${theme.config.basic.comment_option == 'default'} or ${#strings.trim(theme.config.basic.waline_serverURL) ==''}">
+                  <span class="joe_journal_operate_item comment"><i class="joe-font joe-icon-message journal-comment"></i><em >[[${moment.stats.totalComment}]]</em></span>
+                  </th:block>
+                  <th:block th:if="${theme.config.basic.comment_option == 'waline'} and ${#strings.trim(theme.config.basic.waline_serverURL) !=''}">
+                    <span class="joe_journal_operate_item comment"><i class="joe-font joe-icon-message journal-comment"></i><em class="waline-comment-count" th:data-path="'/moments/'+${moment.metadata.name}">0</em></span>
+                  </th:block>
+                  <th:block th:if="${theme.config.basic.comment_option == 'default'} or ${#strings.trim(theme.config.basic.waline_serverURL) ==''}">
                   <th:block th:if="${moment.stats.totalComment gt 0}">
               <span class="joe_journal_operate_item journal_comment_expander"><em class="journal_comment_expander_txt">查看评论</em><i class="joe-font joe-icon-arrow-downb"></i></span>
                   </th:block>
-            </th:block>
+                  </th:block>
+                  <th:block th:if="${theme.config.basic.comment_option == 'waline'} and ${#strings.trim(theme.config.basic.waline_serverURL) !=''}">
+                    <span class="joe_journal_operate_item journal_comment_expander" id="waline-journal_comment_expander" style="display: none"><em class="journal_comment_expander_txt">查看评论</em><i class="joe-font joe-icon-arrow-downb"></i></span>
+                  </th:block>
+
+                  </th:block>
                 <th:block th:if="${theme.config.journals.enable_comment_journal} and ${theme.config.other.enable_clean_mode != true}">
           <div class="joe_journal_comment">
+            <th:block th:if="${theme.config.basic.comment_option == 'default'} or ${#strings.trim(theme.config.basic.waline_serverURL) ==''}">
             <halo:comment
                     group="moment.halo.run"
                     kind="Moment"
                     th:attr="name=${moment.metadata.name}"
                     colorScheme="document.documentElement.getAttribute('data-mode')"
             />
+            </th:block>
+            <th:block th:if="${theme.config.basic.comment_option == 'waline'} and ${#strings.trim(theme.config.basic.waline_serverURL) !=''}">
+              <div th:id="${moment.metadata.name}"></div>
+              <style>
+                #waline .wl-count{color:var(--routine);}
+              </style>
+
+              <script type="module" th:inline="javascript">
+                import { init } from 'https://unpkg.com/@waline/client@v2/dist/waline.mjs';
+
+                init({
+                  el: /*[[${'#'+moment.metadata.name}]]*/'',
+                  dark: 'html[data-mode="dark"]',
+                  serverURL: /*[[${theme.config.basic.waline_serverURL}]]*/'',
+                  path: '/moments/'+/*[[${moment.metadata.name}]]*/'',
+                  comment: true,
+                  requiredMeta:['nick', 'mail'],
+
+                });
+                const url = [[${theme.config.basic.waline_serverURL+'/api/comment?type=count'}]];
+                fetch(url).then(async (response) => {
+                  const data = await response.json();
+                  if (data.data>0){
+                    document.getElementById('waline-journal_comment_expander').style.display = 'block';
+                  }
+                });
+              </script>
+            </th:block>
           </div>
                 </th:block>
     </div>
diff --git a/templates/page.html b/templates/page.html
index 5365d67..fedcee8 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -24,7 +24,12 @@
                     <div class="item">
                       <span class="text">[[${#dates.format(singlePage.spec.publishTime,'yyyy-MM-dd')}]]</span>
                       <span class="line">/</span>
+                      <th:block th:if="${theme.config.basic.comment_option == 'default'} or ${#strings.trim(theme.config.basic.waline_serverURL) ==''}">
                       <span class="text">[[${singlePage.stats.comment}]] 评论</span>
+                      </th:block>
+                      <th:block th:if="${theme.config.basic.comment_option == 'waline'} and ${#strings.trim(theme.config.basic.waline_serverURL) !=''}">
+                        <span class="text waline-comment-count" th:data-path="@{${singlePage.status.permalink}}">0</span>&nbsp;评论
+                      </th:block>
                       <span class="line">/</span>
                       <span class="text" >[[${singlePage.stats.visit}]] 阅读</span>
                       <span class="line">/</span>
diff --git a/templates/page_leaving.html b/templates/page_leaving.html
index 692f17c..ef42a03 100644
--- a/templates/page_leaving.html
+++ b/templates/page_leaving.html
@@ -47,6 +47,8 @@
       <article th:class="'joe_detail__article animated fadeIn '+${#annotations.getOrDefault(singlePage, 'img_align', 'center')+'-img'}"
                th:classappend="|${#annotations.getOrDefault(singlePage, 'enable_read_limit', 'false') == 'true' ?'limited': ''} ${(#annotations.getOrDefault(singlePage, 'enable_copy', 'true') == 'false' or theme.config.post.enable_copy != true) ? 'uncopy' : ''} ${theme.config.post.enable_indent ? 'indent':''} ${(theme.config.code_block.enable_code_line_number == true and theme.config.code_block.enable_code_newline !=true) ? 'line-numbers':''} ${theme.config.code_block.enable_single_code_select == true ? 'single_code_select': ''}|">
         <div class="joe_leaving tpl">
+          <th:block th:if="${theme.config.basic.comment_option == 'default'} or ${#strings.trim(theme.config.basic.waline_serverURL) ==''}">
+
           <ul class="joe_leaving-list">
             <li th:each="result : ${commentFinder.list(null,1,20)}" class="item">
               <div class="user">
@@ -61,6 +63,68 @@
             </li>
 
           </ul>
+          </th:block>
+          <th:block th:if="${theme.config.basic.comment_option == 'waline'} and ${#strings.trim(theme.config.basic.waline_serverURL) !=''}">
+            <ul class="joe_leaving-list" id="waline-leaving">
+            </ul>
+            <style>
+              .joe_leaving-list img{
+                display: inline-block;
+                height: 24px;
+                max-width: 100%;}
+            </style>
+            <script type="module" th:inline="javascript">
+              import { RecentComments } from 'https://cdn.jsdelivr.net/npm/@waline/client/dist/waline.mjs';
+              const url = [[${theme.config.basic.waline_serverURL+'/api/comment?type=count'}]];
+              let countNum = 0;
+              fetch(url).then(async (response) => {
+                const data = await response.json();
+                document.querySelector('.waline-comment .num').innerHTML = data.data;
+                document.querySelector('.waline-comment').title = '累计评论数:'+data.data;
+                countNum = data.data;
+              });
+
+              RecentComments({
+                serverURL: 'https://waline-comment.jiewen.run',
+                count: countNum,
+              }).then(({ comments }) => {
+                document.getElementById('waline-leaving').innerHTML = comments.map(
+                        (comment) =>{
+                          const timestamp = new Date(comment.time);
+
+                          // 获取年、月、日、时、分、秒
+                          const year = timestamp.getFullYear();
+                          const month = timestamp.getMonth() + 1; // 月份是从0开始的，所以要加1
+                          const day = timestamp.getDate();
+                          const hours = timestamp.getHours();
+                          const minutes = timestamp.getMinutes();
+                          const seconds = timestamp.getSeconds();
+
+                          // 构建日期时间字符串
+                          const commentTime = `${year}-${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day} ${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+
+                          return `<li class="item">
+              <div class="user">
+                <img class="avatar lazyload" src="${ThemeConfig.lazyload_avatar}" alt="用户头像"
+                     data-src="${comment.avatar}" />
+                <div class="nickname" >${comment.nick}</div>
+                <div class="date" th:text="${commentTime}"></div>
+              </div>
+              <div class="wrapper">
+                <div class="content leaving-content" >${comment.comment}</div>
+              </div>
+            </li>`;
+
+                        }).join('');
+                const leaving =document.createElement('script')
+                leaving.src = /*[[@{/assets/js/min/leaving.min.js}]]*/''
+                leaving.type= 'module'
+                document.body.appendChild(leaving)
+
+              });
+            </script>
+
+          </th:block>
 
           <div class="joe_leaving-none tpl">暂无留言，期待第一个脚印。</div>
         </div>
diff --git a/templates/page_links.html b/templates/page_links.html
index 7e98c25..b390d98 100644
--- a/templates/page_links.html
+++ b/templates/page_links.html
@@ -62,12 +62,33 @@
                         <div class="box_title">
                         <h2 >评论区</h2>
                         </div>
+                        <th:block th:if="${theme.config.basic.comment_option == 'default'} or ${#strings.trim(theme.config.basic.waline_serverURL) ==''}">
+
                         <halo:comment
                                 group="content.halo.run"
                                 kind="SinglePage"
                                 th:attr="name=${singlePage.metadata.name}"
                                 colorScheme="document.documentElement.getAttribute('data-mode')"
                         />
+                        </th:block>
+                        <th:block th:if="${theme.config.basic.comment_option == 'waline'} and ${#strings.trim(theme.config.basic.waline_serverURL) !=''}">
+                            <div id="waline"></div>
+                            <style>
+                                #waline .wl-count{color:var(--routine);}
+                            </style>
+
+                            <script type="module" th:inline="javascript">
+                                import { init } from 'https://unpkg.com/@waline/client@v2/dist/waline.mjs';
+
+                                init({
+                                    el: '#waline',
+                                    dark: 'html[data-mode="dark"]',
+                                    serverURL: /*[[${theme.config.basic.waline_serverURL}]]*/'',
+                                    requiredMeta:['nick', 'mail'],
+
+                                });
+                            </script>
+                        </th:block>
                     </div>
                 </div>
             </div>
diff --git a/templates/post.html b/templates/post.html
index 2797b15..2645967 100644
--- a/templates/post.html
+++ b/templates/post.html
@@ -38,7 +38,12 @@
             <div class="item">
               <span class="text">[[${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}]]</span>
               <span class="line">/</span>
+              <th:block th:if="${theme.config.basic.comment_option == 'default'} or ${#strings.trim(theme.config.basic.waline_serverURL) ==''}">
               <span class="text">[[${post.stats.comment}]] 评论</span>
+              </th:block>
+              <th:block th:if="${theme.config.basic.comment_option == 'waline'} and ${#strings.trim(theme.config.basic.waline_serverURL) !=''}">
+                <span class="text waline-comment-count" th:data-path="@{${post.status.permalink}}">0</span>&nbsp;评论
+              </th:block>
               <span class="line">/</span>
               <span class="text">[[${post.stats.upvote}]] 点赞</span>
               <span class="line">/</span>