支持封面图设置上下左右

settings.yaml

@@ -89,6 +89,17 @@ spec:
             - label: 四列
               value: col4
           help: "选择单列时，文章卡片的图片将位于左侧"
+        - $formkit: select
+          name: post_location
+          label: 封面位置
+          value: top
+          options:
+            - label: 上方
+              value: top
+            - label: 左侧
+              value: left
+            - label: 右侧
+              value: right
         - $formkit: url
           name: post_random_img
           label: 博客封面随机 API

templates/assets/zhheo/zhheoblog.css

@@ -1295,7 +1295,7 @@ blockquote footer cite::before {
     transform: scale(1.1);
 }
 
-#recent-posts > .recent-post-item .left_radius {
+#recent-posts > .recent-post-item .cover_radius {
     border-radius: 5px 0px 0px 8px;
 }
 
@@ -8019,7 +8019,7 @@ ul {
 
 @media screen and (max-width: 1300px) {
 
-    #recent-posts > .recent-post-item .left_radius,
+    #recent-posts > .recent-post-item .cover_radius,
     #recent-posts > .recent-post-item .right_radius {
         border-radius: 12px 0px 0px 12px;
         width: 75%;
@@ -8065,7 +8065,7 @@ ul {
 
 @media screen and (min-width: 1300px) {
 
-    #recent-posts > .recent-post-item .left_radius,
+    #recent-posts > .recent-post-item .cover_radius,
     #recent-posts > .recent-post-item .right_radius {
         border-radius: 12px 12px 0px 0px;
         width: 100%;
@@ -8073,7 +8073,7 @@ ul {
     }
 }
 
-#recent-posts > .recent-post-item .left_radius a,
+#recent-posts > .recent-post-item .cover_radius a,
 #recent-posts > .recent-post-item .right_radius a {
     min-height: 100%;
     min-width: 100%;
@@ -8296,6 +8296,24 @@ span.recent-post-top-text {
     overflow: hidden;
 }
 
+/* 图片在左侧 */
+#recent-posts > .recent-post-item.left {
+    flex-direction: row !important;
+}
+#recent-posts > .recent-post-item.left .cover_radius {
+    border-radius: 12px 0px 0px 12px !important;
+}
+
+/* 图片在右侧 */
+#recent-posts > .recent-post-item.right {
+    flex-direction: row-reverse !important;
+}
+
+#recent-posts > .recent-post-item.right .cover_radius {
+    border-radius: 0px 12px 12px 0px !important;
+}
+
+
 @media screen and (min-width: 1300px) {
     #recent-posts > .recent-post-item {
         flex-direction: column;
@@ -8317,7 +8335,7 @@ span.recent-post-top-text {
     /* 1 列：左右排列 */
     #recent-posts > .recent-post-item.col1 {
         width: calc(100% - .5rem);
-        flex-direction: row;
+
     }
 
     /* 2 列 */
@@ -8335,7 +8353,6 @@ span.recent-post-top-text {
         width: calc(100% / 4 - .5rem);
     }
 
-
     #category-bar {
         margin-bottom: 0.75rem;
         box-shadow: var(--heo-shadow-border);

templates/modules/post-list.html

@@ -6,9 +6,10 @@
           totalPages = ${(posts.total - 1) / posts.size + 1}, pageIndex = ${posts.page}">
 
     <!-- card，需要添加在没有图片时使用随机图片 -->
-    <div class="recent-post-item" th:each="post : ${postItems}" th:classappend="${theme.config.layout.cols}">
+    <div class="recent-post-item" th:classappend="${theme.config.layout.cols} + ' ' + ${theme.config.layout.post_location}"
+         th:each="post : ${postItems}">
 
-        <div class="post_cover left_radius">
+        <div class="post_cover cover_radius">
             <a th:attr="title=${post.spec.title}" th:href="${post.status.permalink}">
                 <img class="post_bg entered loaded" loading="lazy"
                      th:alt="${post.status.excerpt}"