github
/
halo-theme-hao
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

设置多种分列布局

This commit is contained in:
liuzhihang 2022-10-19 21:38:03 +08:00
parent 1681a9baf8
commit eca356b360
2 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
settings.yaml
View File

@ -61,16 +61,16 @@ spec:
label: 布局 label: 布局
formSchema: formSchema:
- $formkit: select - $formkit: select
name: post_list_layout name: columns
label: 文章列表布局 label: 文章列表布局
value: grid_3 value: 2
options: options:
- label: 网格（一行三列） - label: 网格（一行三列）
value: grid_3 value: 3
- label: 网格（一行两列） - label: 网格（一行两列）
value: grid_2 value: 2
- label: 单条 - label: 单条
value: single value: 1
help: "选择单条时，文章卡片的图片将位于左侧" help: "选择单条时，文章卡片的图片将位于左侧"
- $formkit: select - $formkit: select
name: header_widget name: header_widget

7
templates/modules/post-list.html
View File

@ -2,10 +2,13 @@
<html lang="en" xmlns:th="http://www.thymeleaf.org"> <html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="post-list" <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，需要添加在没有图片时使用随机图片 --> <!-- 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"> <div class="post_cover left_radius">
<a data-pjax-state th:attr="title=${post.spec.title}" th:href="${post.status.permalink}"> <a data-pjax-state th:attr="title=${post.spec.title}" th:href="${post.status.permalink}">
<img class="post_bg entered loaded" <img class="post_bg entered loaded"