调整列表布局

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: 首页顶部模块

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
 }
 

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"