diff --git a/templates/macro/content-thumb.html b/templates/macro/content-thumb.html
index 6f8bf394..fa61d398 100644
--- a/templates/macro/content-thumb.html
+++ b/templates/macro/content-thumb.html
@@ -81,6 +81,13 @@ <h1 th:text="${post.spec.title}"></h1>
           class="lazyload"
           th:src="${#theme.assets('/images/load/orange.progress-bar-stripe-loader.svg')}"
           th:data-src="${post.spec.cover}"
+          th:data-srcset="|
+          ${thumbnail.gen(post.spec.cover, 's')} 400w,
+          ${thumbnail.gen(post.spec.cover, 'm')} 800w,
+          ${thumbnail.gen(post.spec.cover, 'l')} 1200w,
+          ${thumbnail.gen(post.spec.cover, 'xl')} 1600w
+          |"
+          data-sizes="auto"
           alt="thumbnail of the cover of the post"
           width="430"
           height="300"
diff --git a/templates/macro/page-header.html b/templates/macro/page-header.html
index 7a444d17..982b04b2 100644
--- a/templates/macro/page-header.html
+++ b/templates/macro/page-header.html
@@ -20,8 +20,15 @@
         <th:block th:if="${not #strings.isEmpty(frontCover)}">
           <img
             class="lazyload"
-            th:attr="data-src=${frontCover}"
             th:src="${#theme.assets('/images/load/orange.progress-bar-stripe-loader.svg')}"
+            th:data-src="${frontCover}"
+            th:data-srcset="|
+            ${thumbnail.gen(frontCover, 's')} 400w,
+            ${thumbnail.gen(frontCover, 'm')} 800w,
+            ${thumbnail.gen(frontCover, 'l')} 1200w,
+            ${thumbnail.gen(frontCover, 'xl')} 1600w
+            |"
+            data-sizes="auto"
             itemprop="contentUrl"
             alt="large picture of the cover"
             width="1920"
diff --git a/templates/module/feature.html b/templates/module/feature.html
index 8e3be339..f4696bfc 100644
--- a/templates/module/feature.html
+++ b/templates/module/feature.html
@@ -17,8 +17,15 @@ <h1 class="fes-title" style="font-family: 'Ubuntu', sans-serif">
       <div class="feature-container">
         <a data-pjax th:href="${feature.link}" target="_blank" aria-label="visit the concentrated content">
           <img
-            th:src="${feature.image}"
+            class="lazyload"
             th:alt="${feature.title}"
+            th:data-src="${feature.image}"
+            th:data-srcset="|
+            ${thumbnail.gen(feature.image, 's')} 400w,
+            ${thumbnail.gen(feature.image, 'm')} 800w,
+            ${thumbnail.gen(feature.image, 'l')} 1200w,
+            |"
+            data-sizes="auto"
             alt="cover picture of focusing on content"
             width="780"
             height="160"
diff --git a/templates/module/post-pagination.html b/templates/module/post-pagination.html
index dc5e919d..7570b765 100644
--- a/templates/module/post-pagination.html
+++ b/templates/module/post-pagination.html
@@ -16,6 +16,13 @@
             class="lazyload"
             th:src="${#theme.assets('/images/load/orange.progress-bar-stripe-loader.svg')}"
             th:data-src="${postCursor.previous.spec.cover}"
+            th:data-srcset="|
+            ${thumbnail.gen(postCursor.previous.spec.cover, 's')} 400w,
+            ${thumbnail.gen(postCursor.previous.spec.cover, 'm')} 800w,
+            ${thumbnail.gen(postCursor.previous.spec.cover, 'l')} 1200w,
+            ${thumbnail.gen(postCursor.previous.spec.cover, 'xl')} 1600w
+            |"
+            data-sizes="auto"
             alt="The cover picture of the previous content"
             height="160"
             width="390"
@@ -68,6 +75,13 @@ <h3 th:text="${postCursor.previous.spec.title}"></h3>
             class="lazyload"
             th:src="${#theme.assets('/images/load/orange.progress-bar-stripe-loader.svg')}"
             th:data-src="${postCursor.next.spec.cover}"
+            th:data-srcset="|
+            ${thumbnail.gen(postCursor.next.spec.cover, 's')} 400w,
+            ${thumbnail.gen(postCursor.next.spec.cover, 'm')} 800w,
+            ${thumbnail.gen(postCursor.next.spec.cover, 'l')} 1200w,
+            ${thumbnail.gen(postCursor.next.spec.cover, 'xl')} 1600w
+            |"
+            data-sizes="auto"
             alt="The cover picture of the next content"
             height="160"
             width="390"
@@ -78,12 +92,12 @@ <h3 th:text="${postCursor.previous.spec.title}"></h3>
             th:with="randomUrl = |${theme.config.random_image.rimage_url}?${_templateId}id=${postCursor.next.metadata.name}&${theme.config.random_image.rimage_custom_param_name}=${postCursor.next.metadata.name}&type=url&itype=${theme.config.random_image.rimage_cover_itype}${theme.config.random_image.rimage_cover_itype != 'image' ? '&id=' + theme.config.random_image.rimage_cover_id : ''}${#strings.isEmpty(theme.config.random_image.rimage_other_params) ? '' : '&' + theme.config.random_image.rimage_other_params}|"
             th:src="${theme.config.random_image.rimage_cover_lqip == 'loading' ? #theme.assets('/images/load/orange.progress-bar-stripe-loader.svg') : (randomUrl + (#strings.isEmpty(theme.config.random_image.rimage_cover_lqip_params) ? '' : '&' + theme.config.random_image.rimage_cover_lqip_params))}"
             th:data-srcset="|
-          ${randomUrl}&th=400 400w,
-          ${randomUrl}&th=960 960w,
-          ${randomUrl}&th=1280 1280w,
-          ${randomUrl}&th=1440 1440w,
-          ${randomUrl}&th=1920 1920w
-          |"
+            ${randomUrl}&th=400 400w,
+            ${randomUrl}&th=960 960w,
+            ${randomUrl}&th=1280 1280w,
+            ${randomUrl}&th=1440 1440w,
+            ${randomUrl}&th=1920 1920w
+            |"
             data-sizes="auto"
             class="lazyload"
             th:classappend="${theme.config.random_image.rimage_cover_lqip == 'lowquality' ? 'blur-up' : ''}"
diff --git a/templates/moment.html b/templates/moment.html
index 3f1b018c..2cfe2e23 100644
--- a/templates/moment.html
+++ b/templates/moment.html
@@ -17,7 +17,7 @@
     <h1 th:text="${title}"></h1>
   </th:block>
 
-  <th:block th:fragment="content">
+  <th:block th:fragment="content(moment)">
     <span class="moment-container">
       <img
         class="lazyload avatar"
@@ -43,6 +43,13 @@ <h1 th:text="${title}"></h1>
               th:if="${momentItem.type.name == 'PHOTO'}"
               th:src="${#strings.isEmpty(momentItem.url) ? #theme.assets('/images/load/load.gif') : momentItem.url}"
               th:data-src="${momentItem.url}"
+              th:data-srcset="|
+              ${thumbnail.gen(momentItem.url, 's')} 400w,
+              ${thumbnail.gen(momentItem.url, 'm')} 800w,
+              ${thumbnail.gen(momentItem.url, 'l')} 1200w,
+              ${thumbnail.gen(momentItem.url, 'xl')} 1600w
+              |"
+              data-sizes="auto"
               width="400"
               height="400"
               alt="moment picture"
diff --git a/templates/moments.html b/templates/moments.html
index 9c818a44..90423c4e 100644
--- a/templates/moments.html
+++ b/templates/moments.html
@@ -21,107 +21,7 @@ <h1 th:text="${title}"></h1>
     <div class="moments-container">
       <ul th:if="${moments.total gt 0}" class="moments-inner">
         <li class="moments-item journal" th:each="moment : ${moments.items}" th:data-name="${moment.metadata.name}">
-          <span class="moment-container">
-            <img
-              class="lazyload avatar"
-              th:data-src="${moment.owner.avatar != null ? moment.owner.avatar : #theme.assets('/images/default/avatar.webp')}"
-              th:alt="${moment.owner.displayName}"
-              onerror="imgError(this)"
-              th:src="${#theme.assets('/images/load/trans.ajax-spinner-preloader.svg')}"
-              width="48"
-              height="48"
-            />
-            <div class="moment-inner">
-              <span class="moment-content">
-                <th:block th:utext="${moment.spec.content.html}"></th:block>
-              </span>
-              <div
-                class="moment-medium fancybox-content"
-                th:if="${not #lists.isEmpty(moment.spec.content.medium)}"
-                th:classappend="|medium-${#lists.size(moment.spec.content.medium)}|"
-              >
-                <th:block th:each="momentItem : ${moment.spec.content.medium}">
-                  <img
-                    class="lazyload"
-                    th:if="${momentItem.type.name == 'PHOTO'}"
-                    th:src="${#strings.isEmpty(momentItem.url) ? #theme.assets('/images/load/load.gif') : momentItem.url}"
-                    th:data-src="${momentItem.url}"
-                    width="400"
-                    height="400"
-                    alt="moment picture"
-                  />
-                  <video
-                    th:if="${momentItem.type.name == 'VIDEO'}"
-                    th:src="${momentItem.url}"
-                    width="400"
-                    height="400"
-                  ></video>
-                </th:block>
-              </div>
-              <div class="moment-footer">
-                <div class="moment-time">
-                  <th:block th:with="momentHour=${#dates.hour(moment.spec.releaseTime)}">
-                    <th:block th:if="${momentHour >= 5 and momentHour < 8}">
-                      <span class="iconify moment-time-icon" data-icon="mdi:weather-sunset-up"></span>
-                    </th:block>
-                    <th:block th:if="${momentHour >= 8 and momentHour < 18}">
-                      <span class="iconify moment-time-icon" data-icon="mdi:weather-sunny"></span>
-                    </th:block>
-                    <th:block th:if="${momentHour >= 18 and momentHour < 20}">
-                      <span class="iconify moment-time-icon" data-icon="mdi:weather-sunset-down"></span>
-                    </th:block>
-                    <th:block th:if="${momentHour >= 20 or momentHour < 5}">
-                      <span class="iconify moment-time-icon" data-icon="mdi:weather-night"></span>
-                    </th:block>
-                  </th:block>
-                  <time
-                    data-i18n="page.moments.time"
-                    th:i18n-options="|{
-                      'time': '${moment.spec.releaseTime}',
-                      'params': { 
-                        'separator': '-', 
-                        'options': { 
-                          'year': 'numeric', 
-                          'month': '2-digit', 
-                          'day': '2-digit', 
-                          'hour': 'numeric', 
-                          'minute': 'numeric', 
-                          'second': 'numeric' 
-                        } 
-                      } 
-                    }|"
-                    th:data-datetime="${moment.spec.releaseTime}"
-                    itemprop="dateCreated datePublished"
-                  >
-                  </time>
-                </div>
-                <!-- 评论内容 -->
-                <div class="moment-tools">
-                  <span
-                    th:if="${haloCommentEnabled and theme.config.journal.journal_comment}"
-                    class="comment-js noselect"
-                  >
-                    <span class="iconify" data-icon="solar:chat-dots-outline"></span>
-                    <span class="noticom" th:text="${moment.stats.totalComment}"></span>
-                  </span>
-                  <span
-                    th:if="${theme.config.journal.journal_likes}"
-                    class="moment-like noselect"
-                    th:data-links="${moment.stats.upvote}"
-                  >
-                    <span class="iconify" data-icon="solar:like-broken"></span>
-                    <span class="moment-like-text" th:text="${moment.stats.upvote}"></span>
-                  </span>
-                </div>
-              </div>
-              <div th:if="${haloCommentEnabled and theme.config.journal.journal_comment}" class="comment-box">
-                <!--/* 评论组件 */-->
-                <th:block
-                  th:replace="~{module/comment :: comment(group = 'moment.halo.run', kind = 'Moment', name = ${moment.metadata.name})}"
-                />
-              </div>
-            </div>
-          </span>
+          <th:block th:insert="~{moment :: content(${moment})}" />
         </li>
       </ul>
       <th:block th:if="${moments.totalPages gt 1}">
diff --git a/theme.yaml b/theme.yaml
index 681c41d1..b53fa8cb 100644
--- a/theme.yaml
+++ b/theme.yaml
@@ -18,6 +18,6 @@ spec:
   settingName: theme-sakura-setting
   configMapName: theme-sakura-configMap
   version: 2.4.0
-  require: ">=2.17.0"
+  require: ">=2.19.0"
 metadata:
   name: theme-sakura