ChatGPT-Next-Web/templates/modules/hero.html

50 lines
2.5 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="container mx-auto py-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="container mx-auto grid grid-cols-1 gap-3 py-6 sm:grid-cols-5" 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="container mx-auto flex h-full flex-col items-center justify-center gap-3 py-6">
<span class="text-5xl text-white" th:text="${site.title}"></span>
<span class="text-sm font-light text-white opacity-50" th:text="${site.subtitle}"></span>
</div>
</th:block>
</th:block>
</div>
<div
th:if="${theme.config.layout.content_header} and ${not #strings.isEmpty(cover)}"
class="h-96 bg-cover bg-center bg-no-repeat"
th:style="'background-image: url('+${cover}+')'"
>
<div class="container mx-auto flex h-full flex-col items-center justify-center gap-3 py-6">
<span class="text-5xl text-white" th:text="${title}"></span>
</div>
</div>
</section>