diff --git a/settings.yaml b/settings.yaml
index 07fa56e0..6435fe7e 100644
--- a/settings.yaml
+++ b/settings.yaml
@@ -701,12 +701,20 @@ spec:
                   value: post
                 - label: 自定义数据
                   value: custom
+                - label: 热门文章（按阅读量）
+                  value: hot_post
             - $formkit: postSelect
               if: $value.banner_section_type === 'post'
               name: data_by_post
               label: 选择已有文章
               id: data_by_post
               value: ''
+            - $formkit: number
+              if: $value.banner_section_type === 'hot_post'
+              name: hot_post_num
+              label: 热门文章数量
+              id: hot_post_num
+              value: '3'
             - $formkit: group
               if: $value.banner_section_type === 'custom'
               name: data_by_custom
diff --git a/templates/modules/macro/banner.html b/templates/modules/macro/banner.html
index b34faf17..f3dbc9b1 100644
--- a/templates/modules/macro/banner.html
+++ b/templates/modules/macro/banner.html
@@ -16,6 +16,11 @@
                   th:insert="~{modules/macro/banner_item_data :: data_by_custom(banner_url = ${banner_data.data_by_custom.banner_url}, banner_cover = ${banner_data.data_by_custom.banner_img}, banner_title = ${banner_data.data_by_custom.banner_title}, banner_excerpt = ${banner_data.data_by_custom.banner_subtitle})}"
                 />
               </th:block>
+              <th:block th:case="'hot_post'">
+                <th:block
+                  th:replace="~{modules/macro/banner_item_data :: data_by_hot(num = ${banner_data.hot_post_num})}"
+                />
+              </th:block>
             </th:block>
           </th:block>
         </div>
diff --git a/templates/modules/macro/banner_item_data.html b/templates/modules/macro/banner_item_data.html
index 6fa69d59..0af838b1 100644
--- a/templates/modules/macro/banner_item_data.html
+++ b/templates/modules/macro/banner_item_data.html
@@ -16,7 +16,13 @@
             width="100%"
             height="100%"
             class="thumbnail lazyload"
-            th:data-src="${post.spec.cover ?: postCover}"
+            th:with="cover = ${post.spec.cover ?: postCover}"
+            th:data-src="${cover}"
+            th:srcset="|${thumbnail.gen(cover, 's')} 400w,
+              ${thumbnail.gen(cover, 'm')} 800w,
+              ${thumbnail.gen(cover, 'l')} 1200w,
+              ${thumbnail.gen(cover, 'xl')} 1600w|"
+            sizes="(max-width: 1600px) 100vw, 1600px"
             th:src="${theme.config.carousel.banner_lazyload_img}"
             th:alt="${post.spec.title}"
             onerror="Joe.errorImg(this, 'HomeErrImg')"
@@ -51,7 +57,13 @@ <h3 class="title">[[${post.spec.title}]]</h3>
             width="100%"
             height="100%"
             class="thumbnail lazyload"
-            th:data-src="${banner_cover ?: postCover}"
+            th:with="cover = ${banner_cover ?: postCover}"
+            th:data-src="${cover}"
+            th:srcset="|${thumbnail.gen(cover, 's')} 400w,
+              ${thumbnail.gen(cover, 'm')} 800w,
+              ${thumbnail.gen(cover, 'l')} 1200w,
+              ${thumbnail.gen(cover, 'xl')} 1600w|"
+            sizes="(max-width: 1600px) 100vw, 1600px"
             th:src="${theme.config.carousel.banner_lazyload_img}"
             th:alt="${banner_title}"
             onerror="Joe.errorImg(this, 'HomeErrImg')"
@@ -70,4 +82,53 @@ <h3 class="title">[[${banner_title}]]</h3>
       </a>
     </div>
   </th:block>
+  <th:block th:fragment="data_by_hot(num)">
+    <th:block
+      th:with="posts = ${postFinder.list({
+  page: 1,
+  size: num,
+  sort: {'stats.visit,desc', 'metadata.creationTimestamp,asc'}
+})}"
+    >
+      <div class="swiper-slide" th:each="post : ${posts.items}">
+        <a
+          class="item"
+          th:classappend="${post.status.permalink !='' ? 'clickable': ''}"
+          th:href="${post.status.permalink !='' ? post.status.permalink : 'javascript:;'}"
+          target="_blank"
+          rel="noopener noreferrer nofollow"
+        >
+          <th:block
+            th:with="postCover = ${#lists.isEmpty(theme.config.home.post_thumbnail)? theme.config.basic.random_img_api_url+'?pageid='+post.metadata.name : theme.config.home.post_thumbnail}"
+          >
+            <img
+              width="100%"
+              height="100%"
+              class="thumbnail lazyload"
+              th:with="cover = ${post.spec.cover ?: postCover}"
+              th:data-src="${cover}"
+              th:srcset="|${thumbnail.gen(cover, 's')} 400w,
+              ${thumbnail.gen(cover, 'm')} 800w,
+              ${thumbnail.gen(cover, 'l')} 1200w,
+              ${thumbnail.gen(cover, 'xl')} 1600w|"
+              sizes="(max-width: 1600px) 100vw, 1600px"
+              th:src="${theme.config.carousel.banner_lazyload_img}"
+              th:alt="${post.spec.title}"
+              onerror="Joe.errorImg(this, 'HomeErrImg')"
+            />
+          </th:block>
+
+          <div class="title-row">
+            <h3 class="title">[[${post.spec.title}]]</h3>
+
+            <th:block th:if="${post.status.excerpt != ''}">
+              <p class="subtitle">[[${post.status.excerpt}]]</p>
+            </th:block>
+          </div>
+
+          <i class="joe-font joe-icon-zhifeiji"></i>
+        </a>
+      </div>
+    </th:block>
+  </th:block>
 </html>
diff --git a/theme.yaml b/theme.yaml
index 5df96a38..32488dfb 100644
--- a/theme.yaml
+++ b/theme.yaml
@@ -13,8 +13,8 @@ spec:
   repo: 'https://github.com/jiewenhuang/halo-theme-joe3.0'
   settingName: 'theme-Joe-setting'
   configMapName: 'theme-Joe-configMap'
-  version: '1.3.1'
-  require: '>=2.17.0'
+  version: '1.4.0'
+  require: '>=2.19.0'
   customTemplates:
     page:
       - name: 留言板