From 1ba5a89b1b1cf5329b9863b2e61552aa246a9f86 Mon Sep 17 00:00:00 2001
From: liuzhihang <liuzhihangs@qq.com>
Date: Sat, 22 Oct 2022 14:15:54 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=B0=81=E9=9D=A2=E5=9B=BE?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E4=B8=8A=E4=B8=8B=E5=B7=A6=E5=8F=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 settings.yaml                        | 11 +++++++++++
 templates/assets/zhheo/zhheoblog.css | 29 ++++++++++++++++++++++------
 templates/modules/post-list.html     |  5 +++--
 3 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/settings.yaml b/settings.yaml
index 424bbe35..b8bc8908 100644
--- a/settings.yaml
+++ b/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
diff --git a/templates/assets/zhheo/zhheoblog.css b/templates/assets/zhheo/zhheoblog.css
index 24fa49fc..0afccf11 100644
--- a/templates/assets/zhheo/zhheoblog.css
+++ b/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);
diff --git a/templates/modules/post-list.html b/templates/modules/post-list.html
index 05a3fe68..c9052e06 100644
--- a/templates/modules/post-list.html
+++ b/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}"