134 lines
7.6 KiB
HTML
134 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
||
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
|
||
<head th:replace="~{${themeBase} + '/fragments/head' :: head}"></head>
|
||
<body>
|
||
<header th:replace="~{${themeBase} + '/fragments/header' :: header}"></header>
|
||
|
||
<main class="home-main" id="main-content">
|
||
<!-- 首页轮播位（cms_banner position=home；设计尺寸 1920×560，见 theme.json bannerSize） -->
|
||
<section class="banner" th:if="${!#lists.isEmpty(banners)}" aria-label="焦点图片">
|
||
<div class="banner-slides">
|
||
<a class="banner-slide" th:each="b, stat : ${banners}"
|
||
th:classappend="${stat.first} ? 'active'"
|
||
th:href="${b.linkUrl}" th:title="${b.title}">
|
||
<img th:src="${b.imageUrl}" th:alt="${b.title}">
|
||
<span class="banner-title" th:text="${b.title}">标题</span>
|
||
</a>
|
||
</div>
|
||
<button class="banner-arrow prev" type="button" aria-label="上一张" th:if="${#lists.size(banners) > 1}">‹</button>
|
||
<button class="banner-arrow next" type="button" aria-label="下一张" th:if="${#lists.size(banners) > 1}">›</button>
|
||
<div class="banner-dots" th:if="${#lists.size(banners) > 1}">
|
||
<button th:each="b, stat : ${banners}" th:classappend="${stat.first} ? 'active'"
|
||
th:aria-label="${'第' + (stat.count) + '张'}"></button>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 首页布局模式（docs/16 §4.4）：home_layout 落库后按区块序列渲染（common 兜底骨架，本主题不另设形态） -->
|
||
<th:block th:if="${layoutBlocks != null}">
|
||
<th:block th:replace="~{'themes/common/fragments/home-blocks' :: style}" />
|
||
<th:block th:replace="~{'themes/common/fragments/home-blocks' :: previewScript}" />
|
||
<!-- F2：data-plb-id 锚点（display:contents）供编辑器实时预览 postMessage 重排 -->
|
||
<th:block th:each="block : ${layoutBlocks}">
|
||
<div class="plb-anchor" th:attr="data-plb-id=${block['id']}" style="display:contents">
|
||
<th:block th:replace="~{'themes/common/fragments/home-blocks' :: render(${block})}" />
|
||
</div>
|
||
</th:block>
|
||
</th:block>
|
||
|
||
<!-- 回落分支（docs/16 D2）：无 home_layout 时按现状渲染 -->
|
||
<th:block th:unless="${layoutBlocks != null}">
|
||
<!-- 头条区：头条推荐（置顶优先） + 图片新闻（有封面文章） -->
|
||
<section class="section container" aria-label="头条与图片新闻">
|
||
<div class="headline-grid">
|
||
<div class="headline-card" th:if="${!#lists.isEmpty(topArticles)}">
|
||
<div class="block-head">
|
||
<h2>头条推荐</h2>
|
||
</div>
|
||
<ul class="headline-list">
|
||
<li class="headline-lead" th:with="lead=${topArticles[0]}">
|
||
<a class="lead-title" th:href="${url.article(lead.id)}" th:text="${lead.title}">头条标题</a>
|
||
<div class="lead-meta">
|
||
<span class="top-badge" th:if="${lead.topmost == 1}">置顶</span>
|
||
<time th:if="${lead.publishTime != null}"
|
||
th:text="${#temporals.format(lead.publishTime, 'yyyy-MM-dd')}">2026-01-01</time>
|
||
</div>
|
||
</li>
|
||
<li th:each="item, stat : ${topArticles}" th:if="${stat.index > 0}">
|
||
<span class="top-badge" th:if="${item.topmost == 1}">置顶</span>
|
||
<a th:href="${url.article(item.id)}" th:text="${item.title}">文章标题</a>
|
||
<time th:if="${item.publishTime != null}"
|
||
th:text="${#temporals.format(item.publishTime, 'yyyy-MM-dd')}">2026-01-01</time>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="focus-card" th:if="${!#lists.isEmpty(focusArticles)}">
|
||
<div class="block-head">
|
||
<h2>图片新闻</h2>
|
||
</div>
|
||
<a class="focus-item" th:with="cover=${focusArticles[0]}"
|
||
th:href="${url.article(cover.id)}">
|
||
<span class="focus-cover">
|
||
<img th:src="${url.upload(cover.coverImage)}" th:alt="${cover.title}">
|
||
</span>
|
||
<span class="focus-title" th:text="${cover.title}">图片新闻标题</span>
|
||
</a>
|
||
<ul class="focus-rows">
|
||
<li th:each="row, stat : ${focusArticles}" th:if="${stat.index > 0}">
|
||
<a th:href="${url.article(row.id)}">
|
||
<span class="row-cover"><img th:src="${url.upload(row.coverImage)}" th:alt="${row.title}"></span>
|
||
<span class="row-title" th:text="${row.title}">图片新闻标题</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 一级栏目区块（聚合列表型子孙栏目 top 8，D1-2） -->
|
||
<section class="section container" aria-label="栏目区块">
|
||
<div class="blocks-grid">
|
||
<div class="category-block" th:each="block : ${categoryBlocks}">
|
||
<div class="block-head">
|
||
<h2 th:text="${block.category.name}">栏目名</h2>
|
||
<a class="more" th:href="${block.moreUrl}">更多 ></a>
|
||
</div>
|
||
<ul class="block-list" th:if="${!#lists.isEmpty(block.items)}">
|
||
<!-- 区块头条：有封面则图文，无封面则带摘要纯文 -->
|
||
<li class="block-featured" th:with="feat=${block.items[0]}">
|
||
<a th:href="${url.article(feat.id)}">
|
||
<span class="feat-cover" th:if="${feat.coverImage != null}">
|
||
<img th:src="${url.upload(feat.coverImage)}" th:alt="${feat.title}">
|
||
</span>
|
||
<span class="feat-body">
|
||
<span class="feat-title" th:text="${feat.title}">头条标题</span>
|
||
<span class="feat-summary" th:if="${!#strings.isEmpty(feat.summary)}"
|
||
th:text="${feat.summary}">摘要</span>
|
||
<span class="feat-meta item-meta">
|
||
<span class="top-badge" th:if="${feat.topmost == 1}">置顶</span>
|
||
<time th:if="${feat.publishTime != null}"
|
||
th:text="${#temporals.format(feat.publishTime, 'yyyy-MM-dd')}">2026-01-01</time>
|
||
</span>
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li class="item" th:each="item, stat : ${block.items}" th:if="${stat.index > 0}">
|
||
<a th:href="${url.article(item.id)}" th:text="${item.title}">文章标题</a>
|
||
<time th:if="${item.publishTime != null}"
|
||
th:text="${#temporals.format(item.publishTime, 'yyyy-MM-dd')}">2026-01-01</time>
|
||
</li>
|
||
</ul>
|
||
<div class="empty-state" th:if="${#lists.isEmpty(block.items)}">
|
||
<p>栏目暂无内容</p>
|
||
<p class="empty-hint">内容发布后将在此展示</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</th:block>
|
||
</main>
|
||
|
||
<footer th:replace="~{${themeBase} + '/fragments/footer' :: footer}"></footer>
|
||
<script th:src="${url.asset('js/main.js')}"></script>
|
||
</body>
|
||
</html>
|