From 740150a22089cd0996b6c1a1158d19e3897d06e0 Mon Sep 17 00:00:00 2001
From: "1152958806@qq.com" <1152958806@qq.com>
Date: Thu, 24 Aug 2023 00:26:44 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=9C=80=E6=96=B0=E8=AF=84?=
 =?UTF-8?q?=E8=AE=BA=E5=9B=BE=E7=89=87=E6=87=92=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/modules/footer.html                 |  9 +++++--
 templates/modules/widgets/aside/comments.html | 19 ++++++++++----
 .../modules/widgets/cardNewestComments.html   |  5 +++-
 templates/modules/widgets/console.html        | 26 +++++++++++--------
 4 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/templates/modules/footer.html b/templates/modules/footer.html
index 8ddcb96f..1027bc93 100644
--- a/templates/modules/footer.html
+++ b/templates/modules/footer.html
@@ -13,7 +13,10 @@
         </th:block>
 
         <img th:if="${not #strings.isEmpty(theme.config.footer.social_media.centerImg)}" class="footer_mini_logo"
-             th:src="@{${theme.config.footer.social_media.centerImg}}" title="返回顶部" onclick="btf.scrollToDest(0, 500)">
+             th:with="img = @{${theme.config.footer.social_media.centerImg}}"
+             th:src="${isLazyload ? '' : img}"
+             th:data-lazy-src="${ isLazyload ? img : ''}"
+             title="返回顶部" onclick="btf.scrollToDest(0, 500)">
         <th:block th:with="socialMedias = ${theme.config.footer.social_media.socialMediaRight}">
             <a class="deal_link" rel="external nofollow" target="_blank" th:each="socialMedia : ${socialMedias}"
                th:href="${socialMedia.url}" th:title="${socialMedia.name}">
@@ -109,7 +112,9 @@
             <a class="github-badge" th:each="data : ${bdageitem}" target="_blank"
                th:href="@{${data.link}}" style="margin-inline:5px"
                th:title="${data.message}">
-                <img th:src="@{${data.shields}}"
+                <img th:with=" img = @{${data.shields}}"
+                     th:src="${isLazyload ? '' : img}"
+                     th:data-lazy-src="${ isLazyload ? img : ''}"
                      th:alt="${data.message}" />
             </a>
         </p>
diff --git a/templates/modules/widgets/aside/comments.html b/templates/modules/widgets/aside/comments.html
index 7f4e962b..b0d4ec0d 100644
--- a/templates/modules/widgets/aside/comments.html
+++ b/templates/modules/widgets/aside/comments.html
@@ -6,15 +6,20 @@
     <div class="aside-list" id="newcomm">
         <th:block th:if="${#strings.equals(theme.config.comments.use, 'commentWidget') }">
             <div class="aside-list-item" th:each="comment,iterStat : ${commentFinder.list(null, 1, 20)}"
-                 th:with="page = ${comment.spec.subjectRef.kind == 'Post' ? postFinder.getByName(comment.spec.subjectRef.name) : null}"
+                 th:with="page = ${comment.spec.subjectRef.kind == 'Post' ? postFinder.getByName(comment.spec.subjectRef.name) :
+                 comment.spec.subjectRef.kind == 'SinglePage' ? singlePageFinder.getByName(comment.spec.subjectRef.name) : null},
+                 url = ${page == null? '/' : page.status.permalink + '#comment-' + comment.metadata.name}"
                  th:if="${iterStat.index  < theme.config.sidebar.newcommentnumber}">
                 <span th:text="${commentIndex}"></span>
-                <a class="thumbnail" th:href="${page == null? '/' : page.status.permalink + '#comment-' + comment.metadata.name}" data-pjax-state="">
-                    <img loading="lazy" alt="头像" th:src="${#strings.isEmpty(comment.owner.avatar)?'https://cravatar.cn/avatar/?d=mp':comment.owner.avatar}" data-ll-status="loading" class="entered loading">
+                <a class="thumbnail" th:href="${url}" data-pjax-state="">
+                    <img alt="头像"
+                         th:with=" img =${#strings.isEmpty(comment.owner.avatar)?'https://cravatar.cn/avatar/?d=mp':comment.owner.avatar}"
+                         th:src="${isLazyload ? loadingImg : img}"
+                         th:data-lazy-src="${ isLazyload ? img : ''}">
                 </a>
                 <div class="content" >
                     <a class="comment" style="display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;"
-                       th:href="${page == null? '/' : page.status.permalink + '#comment-' + comment.metadata.name}" th:title="${comment.spec.content}" th:text="${comment.spec.content}" data-pjax-state="">
+                       th:href="${url}" th:title="${comment.spec.content}" th:text="${comment.spec.content}" data-pjax-state="">
 
                     </a>
                     <div class="name">
@@ -38,10 +43,14 @@
                         includeReply: false // 是否包括最新回复，默认：false
                     }).then(function (res) {
                         let commenthtml = '';
+                        let name = 'src'
+                        if([[${isLazyload}]]){
+                            name = 'data-lazy-src'
+                        }
                         res.forEach((items)=>{
                             commenthtml += `<div class="aside-list-item">
             <a class="thumbnail" href="${items.url + '#' + items.id}">
-                <img loading="lazy" alt="dasda" src="${items.avatar}">
+                <img alt="dasda" ${name}="${items.avatar}">
             </a>
             <div class="content">
                 <a class="comment" style="display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;" href="${items.url + '#' + items.id}" title="test">
diff --git a/templates/modules/widgets/cardNewestComments.html b/templates/modules/widgets/cardNewestComments.html
index 6b398edf..9dbe183d 100644
--- a/templates/modules/widgets/cardNewestComments.html
+++ b/templates/modules/widgets/cardNewestComments.html
@@ -63,7 +63,10 @@
                     result += '<div class=\'aside-list-item\'>'
 
                     if (true) {
-                        const name = 'src'
+                        let name = 'src'
+                        if([[${isLazyload}]]){
+                            name = 'data-lazy-src'
+                        }
                         result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'><div class='name'><span>${array[i].nick}</span></div></a>`
                     }
 
diff --git a/templates/modules/widgets/console.html b/templates/modules/widgets/console.html
index 01730683..b2df8bad 100644
--- a/templates/modules/widgets/console.html
+++ b/templates/modules/widgets/console.html
@@ -17,18 +17,22 @@
         <div class="aside-list">
           <th:block th:if="${#strings.equals(theme.config.comments.use, 'commentWidget') }">
             <!-- BUG：由于当前的列出所有评论API无过滤功能，非文章页的评论无法查询到页面信息，所以非文章评论跳转至首页-->
-             <div class="aside-list-item" th:each="comment,iterStat : ${commentFinder.list(null, 1, 20)}"
-                  th:with="page = ${comment.spec.subjectRef.kind == 'Post' ? postFinder.getByName(comment.spec.subjectRef.name) : null}"
-                  th:if="${iterStat.index  < 6}" >
-               <a th:href="${page == null? '/' : page.status.permalink + '#comment-' + comment.metadata.name}" class="thumbnail"  data-pjax-state="">
-                <img th:src="${#strings.isEmpty(comment.owner.avatar)?'https://cravatar.cn/avatar/?d=mp':comment.owner.avatar}"
-                      th:alt="${comment.owner.displayName}" data-ll-status="loaded" class="entered loaded">
+            <div class="aside-list-item" th:each="comment,iterStat : ${commentFinder.list(null, 1, 20)}"
+                 th:with="page = ${comment.spec.subjectRef.kind == 'Post' ? postFinder.getByName(comment.spec.subjectRef.name) :
+                  comment.spec.subjectRef.kind == 'SinglePage' ? singlePageFinder.getByName(comment.spec.subjectRef.name) : null},
+                  url = ${page == null? '/' : page.status.permalink + '#comment-' + comment.metadata.name}"
+                 th:if="${iterStat.index  < 6}" >
+              <a th:href="${url}" class="thumbnail"  data-pjax-state="">
+                <img th:with="img = ${#strings.isEmpty(comment.owner.avatar)?'https://cravatar.cn/avatar/?d=mp':comment.owner.avatar}"
+                     th:src="${isLazyload ? loadingImg : img}"
+                     th:data-lazy-src="${ isLazyload ? img : ''}"
+                     th:alt="${comment.owner.displayName}">
                 <div class="name"><span>stonewu</span></div>
-                </a>
-                <div class="content">
-                  <a class="comment" th:href="${page == null? '/' : page.status.permalink + '#comment-' + comment.metadata.name}" th:title="${comment.spec.content}" data-pjax-state="" th:text="${comment.spec.content}"></a>
-                  <time th:datetime="${#dates.format(comment.metadata.creationTimestamp, 'yyyy-MM-dd HH:mm:ss')}"></time>
-                </div>
+              </a>
+              <div class="content">
+                <a class="comment" th:href="${url}" th:title="${comment.spec.content}" data-pjax-state="" th:text="${comment.spec.content}"></a>
+                <time th:datetime="${#dates.format(comment.metadata.creationTimestamp, 'yyyy-MM-dd HH:mm:ss')}"></time>
+              </div>
             </div>
             <script data-pjax>
               window.addEventListener('load', () => {