设置多种分列布局

2022-10-19 21:38:03 +08:00 · 2022-10-19 21:38:03 +08:00 · eca356b360
parent 1681a9baf8
commit eca356b360
2 changed files with 10 additions and 7 deletions
--- a/settings.yaml
+++ b/settings.yaml
@ -61,16 +61,16 @@ spec:
      label: 布局
      formSchema:
        - $formkit: select
-          name: post_list_layout
+          name: columns
          label: 文章列表布局
-          value: grid_3
+          value: 2
          options:
            - label: 网格（一行三列）
-              value: grid_3
+              value: 3
            - label: 网格（一行两列）
-              value: grid_2
+              value: 2
            - label: 单条
-              value: single
+              value: 1
          help: "选择单条时，文章卡片的图片将位于左侧"
        - $formkit: select
          name: header_widget
--- a/templates/modules/post-list.html
+++ b/templates/modules/post-list.html
@ -2,10 +2,13 @@
 <html lang="en" xmlns:th="http://www.thymeleaf.org">

 <th:block th:fragment="post-list"
-          th:with="postItems=${posts.items},totalPages = ${(posts.total - 1) / posts.size + 1}, pageIndex = ${posts.page}">
+          th:with="postItems=${posts.items},
+          columns = ${theme.config.layout.columns},
+          totalPages = ${(posts.total - 1) / posts.size + 1}, pageIndex = ${posts.page}">

    <!-- card，需要添加在没有图片时使用随机图片 -->
-    <div class="recent-post-item lastestpost-item" th:each="post : ${postItems}">
+    <!-- th:style="'width: calc(100% / ' + ${columns}+' - 0.5rem);'" 有点问题 -->
+    <div class="recent-post-item" th:each="post : ${postItems}">
        <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"