update:重构轮播图，可自定义数据
This commit is contained in:
jiewenhuang
parent
495b0d125e
commit
678f732927
|
|
@ -604,15 +604,60 @@ spec:
|
|||
- value: false
|
||||
label: 关闭
|
||||
- $formkit: repeater
|
||||
if: "$get(enable_banner).value"
|
||||
name: banner_source
|
||||
label: 轮播图文章
|
||||
value: [ ]
|
||||
if: "$get(enable_banner).value === true"
|
||||
name: banner_data_group
|
||||
label: 轮播图数据设置
|
||||
id: banner_data_group
|
||||
value: []
|
||||
children:
|
||||
- $formkit: radio
|
||||
name: banner_section_type
|
||||
id: banner_section_type
|
||||
label: 模块类型
|
||||
value:
|
||||
options:
|
||||
- label: 已有文章
|
||||
value: post
|
||||
- label: 自定义数据
|
||||
value: custom
|
||||
- $formkit: postSelect
|
||||
name: posts
|
||||
label: 选择要推荐的文章(至少两个)
|
||||
if: $value.banner_section_type === 'post'
|
||||
name: data_by_post
|
||||
label: 选择已有文章
|
||||
id: data_by_post
|
||||
value: ""
|
||||
- $formkit: group
|
||||
if: $value.banner_section_type === 'custom'
|
||||
name: data_by_custom
|
||||
label: 自定义数据
|
||||
id: data_by_custom
|
||||
value: [ ]
|
||||
children:
|
||||
- $formkit: text
|
||||
name: banner_title
|
||||
label: 标题
|
||||
value: ""
|
||||
validation: "required"
|
||||
- $formkit: textarea
|
||||
name: banner_subtitle
|
||||
label: 描述(可留空)
|
||||
value: ""
|
||||
- $formkit: url
|
||||
name: banner_url
|
||||
label: 跳转链接
|
||||
value: ""
|
||||
validation: "required"
|
||||
- $formkit: attachment
|
||||
name: banner_img
|
||||
label: 图片地址
|
||||
value: ""
|
||||
validation: "required"
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
- $formkit: radio
|
||||
name: banner_direction
|
||||
id: banner_direction
|
||||
|
|
|
|||
|
|
@ -4,26 +4,16 @@
|
|||
<div class="joe_index__banner">
|
||||
<div class="swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<th:block th:each="bannerData : ${theme.config.carousel.banner_source}">
|
||||
<th:block th:with="post = ${postFinder.getByName(bannerData.posts)}">
|
||||
<div class="swiper-slide">
|
||||
<a class="item"
|
||||
th:classappend="${post.status.permalink !='' ? 'clickable': ''}"
|
||||
th:href="${post.status.permalink !='' ? post.status.permalink : 'javascript:;'}" target="_blank" rel="noopener noreferrer nofollow">
|
||||
<img width="100%" height="100%" class="thumbnail lazyload" th:data-src="${post.spec.cover ?: '/themes/theme-Joe3/assets/img/Joe3.png'}" th:src="${theme.config.carousel.banner_lazyload_img}" th:alt="${post.spec.title}">
|
||||
|
||||
<div class="title-row">
|
||||
<h3 class="title">[[${post.spec.title}]]</h3>
|
||||
|
||||
<th:block th:if="${post.status.excerpt != ''}">
|
||||
<p class="subtitle">[[${post.status.excerpt}]]</p>
|
||||
<th:block th:each="banner_data : ${theme.config.carousel.banner_data_group}">
|
||||
<th:block th:switch="${banner_data.banner_section_type}">
|
||||
<th:block th:case="'post'">
|
||||
<th:block th:include="~{modules/macro/banner_item_data :: data_by_post(post_metadata = ${banner_data.data_by_post})}" />
|
||||
</th:block>
|
||||
</div>
|
||||
<th:block th:case="'custom'">
|
||||
<th:block th:include="~{modules/macro/banner_item_data :: data_by_custom(banner_url = ${banner_data.data_by_custom.banner_url}, banner_cover = ${banner_data.data_by_custom.banner_img}, banner_title = ${banner_data.data_by_custom.banner_title}, banner_excerpt = ${banner_data.data_by_custom.banner_subtitle})}" />
|
||||
</th:block>
|
||||
</th:block>
|
||||
|
||||
<i class="joe-font joe-icon-zhifeiji"></i>
|
||||
</a>
|
||||
</div>
|
||||
</th:block>
|
||||
</th:block>
|
||||
</div>
|
||||
<th:block th:if="${theme.config.carousel.enable_banner_pagination}">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
||||
<th:block th:fragment="data_by_post(post_metadata)">
|
||||
<div class="swiper-slide" th:with="post = ${postFinder.getByName(post_metadata)}">
|
||||
<a class="item"
|
||||
th:classappend="${post.status.permalink !='' ? 'clickable': ''}"
|
||||
th:href="${post.status.permalink !='' ? post.status.permalink : 'javascript:;'}" target="_blank" rel="noopener noreferrer nofollow">
|
||||
<img width="100%" height="100%" class="thumbnail lazyload" th:data-src="${post.spec.cover ?: '/themes/theme-Joe3/assets/img/Joe3.png'}" th:src="${theme.config.carousel.banner_lazyload_img}" th:alt="${post.spec.title}">
|
||||
|
||||
<div class="title-row">
|
||||
<h3 class="title">[[${post.spec.title}]]</h3>
|
||||
|
||||
<th:block th:if="${post.status.excerpt != ''}">
|
||||
<p class="subtitle">[[${post.status.excerpt}]]</p>
|
||||
</th:block>
|
||||
</div>
|
||||
|
||||
<i class="joe-font joe-icon-zhifeiji"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</th:block>
|
||||
<th:block th:fragment="data_by_custom(banner_url, banner_cover, banner_title, banner_excerpt)">
|
||||
<div class="swiper-slide">
|
||||
<a class="item"
|
||||
th:classappend="${banner_url !='' ? 'clickable': ''}"
|
||||
th:href="${banner_url !='' ? banner_url : 'javascript:;'}" target="_blank" rel="noopener noreferrer nofollow">
|
||||
<img width="100%" height="100%" class="thumbnail lazyload" th:data-src="${banner_cover ?: '/themes/theme-Joe3/assets/img/Joe3.png'}" th:src="${theme.config.carousel.banner_lazyload_img}" th:alt="${banner_title}">
|
||||
|
||||
<div class="title-row">
|
||||
<h3 class="title">[[${banner_title}]]</h3>
|
||||
|
||||
<th:block th:if="${banner_excerpt != ''}">
|
||||
<p class="subtitle">[[${banner_excerpt}]]</p>
|
||||
</th:block>
|
||||
</div>
|
||||
|
||||
<i class="joe-font joe-icon-zhifeiji"></i>
|
||||
</a>
|
||||
</div>
|
||||
</th:block>
|
||||
</html>
|
||||
Loading…
Reference in New Issue