mirror of
https://github.com/halo-dev/theme-earth.git
synced 2025-12-11 02:00:49 +08:00
f43a011527
支持为首页 hero 部分的标题文字设置颜色，以适应背景图片。 /kind feature Fixes https://github.com/halo-dev/theme-earth/issues/147 Fixes https://github.com/halo-dev/theme-earth/issues/136 ```release-note 支持为首页 hero 部分的标题文字设置颜色，以适应背景图片。 ```
61 lines
2.9 KiB
HTML
61 lines
2.9 KiB
HTML
<section th:fragment="hero(isHome, cover, title)">
|
|
<div
|
|
th:if="${theme.config.layout.header_widget != 'none'} and ${isHome}"
|
|
class="bg-cover bg-center bg-no-repeat"
|
|
th:styleappend="${theme.config.layout.header_background_type == 'image' ? 'background-image: url(' + theme.config.layout.header_background_image + ');' : 'background: ' + theme.config.layout.header_background + ';'}"
|
|
th:classappend="${theme.config.layout.header_widget == 'site_title' ? 'h-96' : ''}"
|
|
>
|
|
<th:block th:switch="${theme.config.layout.header_widget}">
|
|
<th:block th:case="latest_post" th:with="posts = ${postFinder.list(1,1)}">
|
|
<div class="mx-auto max-w-7xl px-4 py-6 lg:px-6" th:if="${posts.total gt 0}">
|
|
<th:block th:replace="~{modules/featured-post-card :: featured-post-card(post=${posts.items[0]})}" />
|
|
</div>
|
|
</th:block>
|
|
<th:block th:case="latest_post_grid" th:with="posts = ${postFinder.list(1,5)}">
|
|
<div
|
|
class="mx-auto grid max-w-7xl grid-cols-1 gap-3 px-4 py-6 sm:grid-cols-5 lg:px-6"
|
|
th:if="${posts.total gt 0}"
|
|
>
|
|
<div class="col-span-1 sm:col-span-3">
|
|
<th:block
|
|
th:replace="~{modules/post-card :: post-card(post=${posts.items[0]},cover=true,animation=false,border=false,direction='row')}"
|
|
/>
|
|
</div>
|
|
<div class="col-span-1 grid grid-cols-1 gap-3 sm:col-span-2 sm:grid-cols-2">
|
|
<th:block th:each="post,postStat : ${posts.items}">
|
|
<th:block th:if="${postStat.index != 0}">
|
|
<th:block
|
|
th:replace="~{modules/post-card :: post-card(post=${post},cover=false,animation=false,border=false,direction='row')}"
|
|
/>
|
|
</th:block>
|
|
</th:block>
|
|
</div>
|
|
</div>
|
|
</th:block>
|
|
<th:block th:case="site_title">
|
|
<div class="mx-auto flex h-full max-w-7xl flex-col items-center justify-center gap-3 px-4 py-6 lg:px-6">
|
|
<span class="text-5xl" th:style="|color:${theme.config.layout.title_color}|" th:text="${site.title}"></span>
|
|
<span
|
|
class="text-sm font-light opacity-50"
|
|
th:style="|color:${theme.config.layout.title_color}|"
|
|
th:text="${site.subtitle}"
|
|
></span>
|
|
</div>
|
|
</th:block>
|
|
</th:block>
|
|
</div>
|
|
<th:block th:if="${theme.config.layout.content_header} and ${not #strings.isEmpty(cover)}">
|
|
<div class="relative">
|
|
<div
|
|
class="before:z-1 relative h-96 bg-cover bg-center bg-no-repeat before:absolute before:inset-0 before:bg-black/40"
|
|
th:style="|background-image: url('${cover}')|"
|
|
></div>
|
|
<header
|
|
class="pattern-header-text absolute top-1/2 mx-auto flex w-full flex-col items-center justify-center gap-3"
|
|
>
|
|
<h1 class="text-5xl text-white" th:text="${title}"></h1>
|
|
</header>
|
|
</div>
|
|
</th:block>
|
|
</section>
|