From 792aa255f0c3c433638d0b2e03579b2166fd0d06 Mon Sep 17 00:00:00 2001
From: liuzhihang <liuzhihangs@qq.com>
Date: Thu, 20 Oct 2022 22:14:58 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=88=97=E8=A1=A8=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 settings.yaml                        | 22 ++++++++++---------
 templates/assets/zhheo/zhheoblog.css | 32 ++++++++++++++++++++--------
 templates/modules/post-list.html     |  3 +--
 3 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/settings.yaml b/settings.yaml
index 73635a5c..78ad73ee 100644
--- a/settings.yaml
+++ b/settings.yaml
@@ -76,17 +76,19 @@ spec:
       label: 布局
       formSchema:
         - $formkit: select
-          name: columns
-          label: 文章列表布局
-          value: 2
+          name: cols
+          label: 文章列表布局（无效）
+          value: col1
           options:
-            - label: 网格（一行三列）
-              value: 3
-            - label: 网格（一行两列）
-              value: 2
-            - label: 单条
-              value: 1
-          help: "选择单条时，文章卡片的图片将位于左侧"
+            - label: 单列
+              value: col1
+            - label: 两列
+              value: col2
+            - label: 三列
+              value: col3
+            - label: 四列
+              value: col4
+          help: "选择单列时，文章卡片的图片将位于左侧"
         - $formkit: select
           name: header_widget
           label: 首页顶部模块
diff --git a/templates/assets/zhheo/zhheoblog.css b/templates/assets/zhheo/zhheoblog.css
index 4139fae9..5c4231ce 100644
--- a/templates/assets/zhheo/zhheoblog.css
+++ b/templates/assets/zhheo/zhheoblog.css
@@ -1594,7 +1594,7 @@ blockquote footer cite::before {
     color: #ff5722
 }
 
-#recent-posts > .recent-post-item:not(:first-child) {
+#recent-posts > .recent-post-item {
     margin-top: 1rem
 }
 
@@ -8279,7 +8279,7 @@ span.recent-post-top-text {
     transition: all .3s ease 0s
 }
 
-#recent-posts > .recent-post-item:not(:first-child) {
+#recent-posts > .recent-post-item {
     margin-top: .5rem;
     margin-bottom: 1rem;
     position: relative;
@@ -8287,19 +8287,33 @@ span.recent-post-top-text {
 }
 
 @media screen and (min-width: 1300px) {
-    #recent-posts > .recent-post-item {
-        flex-direction: column
-    }
 
-    #recent-posts > .recent-post-item:not(:first-child) {
+    #recent-posts > .recent-post-item {
         width: calc(100% / 2 - .5rem);
+        flex-direction: column;
         margin-top: .25rem;
         margin-bottom: .75rem;
         box-shadow: var(--heo-shadow-border);
         clip-path: inset(0 0 0 0 round 12px)
     }
 
-    #recent-posts > .recent-post-item:not(:first-child):active {
+    /*!* 1 列 *!*/
+    /*#recent-posts > .recent-post-item.col1 {*/
+    /*    width: calc(100% - .5rem);*/
+    /*}*/
+    /*!* 2 列 *!*/
+    /*#recent-posts > .recent-post-item.col2 {*/
+    /*    width: calc(100% / 2 - .5rem);*/
+    /*}*/
+    /*!* 3 列 *!*/
+    /*#recent-posts > .recent-post-item.col3{*/
+    /*    width: calc(100% / 3 - .5rem);*/
+    /*}*/
+    /*!* 4 列 *!*/
+    /*#recent-posts > .recent-post-item.col4 {*/
+    /*    width: calc(100% / 4 - .5rem);*/
+    /*}*/
+    #recent-posts > .recent-post-item:active {
         transform: scale(.97)
     }
 
@@ -8322,7 +8336,7 @@ span.recent-post-top-text {
         border-radius: 0
     }
 
-    #recent-posts > .recent-post-item:not(:first-child) {
+    #recent-posts > .recent-post-item {
         margin: 1.5rem 1rem;
         border-radius: 12px;
         margin-top: .5rem;
@@ -9339,7 +9353,7 @@ span.post-meta-categories {
     transition: .3s
 }
 
-span.post-meta-categories:not(:first-child) {
+span.post-meta-categories {
     margin-left: 8px
 }
 
diff --git a/templates/modules/post-list.html b/templates/modules/post-list.html
index aad4f59b..fa0d0ad5 100644
--- a/templates/modules/post-list.html
+++ b/templates/modules/post-list.html
@@ -3,12 +3,11 @@
 
 <th:block th:fragment="post-list"
           th:with="postItems=${posts.items},
-          columns = ${theme.config.layout.columns},
           totalPages = ${(posts.total - 1) / posts.size + 1}, pageIndex = ${posts.page}">
 
     <!-- card，需要添加在没有图片时使用随机图片 -->
     <!-- th:style="'width: calc(100% / ' + ${columns}+' - 0.5rem);'" 有点问题 -->
-    <div class="recent-post-item" th:each="post : ${postItems}">
+    <div class="recent-post-item" th:each="post : ${postItems}" th:classappend="${theme.config.layout.cols}">
         <div class="post_cover left_radius">
             <a data-pjax-state th:attr="title=${post.spec.title}" th:href="${post.status.permalink}">
                 <img class="post_bg entered loaded"