add:新增waline评论

2023-09-22 00:19:07 +08:00 · 2023-09-22 00:19:07 +08:00 · 1bf4abf32a
parent 4fd674ad9d
commit 1bf4abf32a
13 changed files with 487 additions and 18 deletions
--- 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
--- 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>
--- 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}">
--- 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>
--- 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>
--- 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)}">
--- 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>
--- a/templates/moment.html
+++ 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>