mirror of
https://github.com/halo-dev/theme-earth.git
synced 2025-10-14 14:30:50 +00:00
96509b49cc
before: <img width="760" height="278" alt="image" src="https://github.com/user-attachments/assets/9c94afe8-b9ea-4408-931d-8cd5e29ec9f0" /> after: <img width="766" height="290" alt="image" src="https://github.com/user-attachments/assets/f61daf02-0400-41c2-b0cb-de73934012c2" /> ```release-note 调整文章页面标签列表的下边距，以更好的适应内容。 ```
204 lines
9.6 KiB
HTML
204 lines
9.6 KiB
HTML
<!doctype html>
|
|
<html
|
|
xmlns:th="https://www.thymeleaf.org"
|
|
th:replace="~{modules/layout :: html(title = ${post.spec.title} + ' - ' + ${site.title}, hero = ~{::hero}, content = ~{::content}, head = ~{::head}, footer = ~{::footer}, sidebar = ~{::sidebar}, contentClass = ${theme.config.layout.content_header} and ${not #strings.isEmpty(post.spec.cover)} ? '!-mt-20' : '')}"
|
|
>
|
|
<th:block th:fragment="head">
|
|
<link
|
|
th:if="${theme.config.post.content_style == 'github'}"
|
|
rel="stylesheet"
|
|
th:href="@{/assets/styles/github-markdown.css?v={version}(version=${theme.spec.version})}"
|
|
/>
|
|
</th:block>
|
|
<th:block th:fragment="hero">
|
|
<section th:unless="${#strings.isEmpty(post.spec.cover)}">
|
|
<div class="relative flex items-center" th:styleappend="|height:${theme.config.post.cover_height ?: '24rem'}|">
|
|
<div
|
|
class="before:z-1 relative size-full bg-cover bg-center bg-no-repeat before:absolute before:inset-0 before:bg-black/40"
|
|
th:style="|background-image: url('${post.spec.cover}')|"
|
|
></div>
|
|
<header
|
|
class="pattern-header-text absolute top-1/3 mx-auto flex w-full flex-col items-center justify-center gap-3"
|
|
th:if="${theme.config.post.title_position == 'cover'}"
|
|
>
|
|
<h1 class="text-center text-2xl text-white sm:text-5xl" th:text="${post.spec.title}"></h1>
|
|
</header>
|
|
</div>
|
|
</section>
|
|
</th:block>
|
|
<th:block th:fragment="footer">
|
|
<script>
|
|
main.generateToc();
|
|
</script>
|
|
</th:block>
|
|
<th:block th:fragment="sidebar_prepend">
|
|
<div
|
|
class="toc-container sticky top-20 z-[5] w-full cursor-pointer rounded-xl bg-white p-3 shadow transition-all duration-500 hover:shadow-md dark:bg-slate-800"
|
|
>
|
|
<h2 class="inline-flex items-center gap-2 text-base dark:text-slate-50">
|
|
<span class="i-tabler-list text-lg"></span>
|
|
<th:block th:text="#{page.post.toc}"></th:block>
|
|
</h2>
|
|
<div class="toc mt-2 max-h-64 overflow-auto"></div>
|
|
</div>
|
|
</th:block>
|
|
<th:block th:fragment="sidebar">
|
|
<th:block th:replace="~{modules/sidebar :: sidebar(prepend = ~{::sidebar_prepend})}"></th:block>
|
|
</th:block>
|
|
<th:block th:fragment="content">
|
|
<div x-data="upvote('post','content.halo.run','posts')" class="rounded-xl bg-white p-4 dark:bg-slate-800">
|
|
<div
|
|
th:attr="x-data=|{name:'${post.metadata.name}'}|"
|
|
class="flex flex-col items-center justify-between gap-2 sm:flex-row"
|
|
>
|
|
<div class="flex w-full items-center justify-start gap-2">
|
|
<a
|
|
th:unless="${#strings.isEmpty(post.owner.avatar)}"
|
|
th:href="@{${post.owner.permalink}}"
|
|
th:title="${post.owner.displayName}"
|
|
>
|
|
<img th:src="${post.owner.avatar}" class="size-10 rounded-full" th:alt="${post.owner.displayName}" />
|
|
</a>
|
|
<div class="flex flex-col gap-0.5">
|
|
<a
|
|
th:href="@{${post.owner.permalink}}"
|
|
th:title="${post.owner.displayName}"
|
|
class="text-sm font-semibold text-gray-900 hover:text-gray-600 dark:text-slate-100 dark:hover:text-slate-200"
|
|
th:text="${post.owner.displayName}"
|
|
></a>
|
|
<div class="flex items-center gap-2 text-xs font-light text-gray-600 dark:text-slate-100">
|
|
<span th:text="#{common.publishedOn(${#dates.format(post.spec.publishTime,'yyyy-MM-dd')})}"></span>
|
|
<span class="text-gray-300 dark:text-slate-200">/</span>
|
|
<span th:text="#{common.visitCount(${post.stats?.visit ?:0})}"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-row items-center gap-1.5 self-end">
|
|
<div
|
|
sec:authorize="isAuthenticated()"
|
|
th:attr="x-data=|uiPermission('${#authentication.name}','system:posts:manage')|"
|
|
class="flex items-center justify-between"
|
|
id="edit-button"
|
|
>
|
|
<template x-if="shouldDisplay">
|
|
<a
|
|
th:href="|/console/posts/editor?name=${post.metadata.name}&returnToView=true|"
|
|
class="inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-md border border-gray-200 bg-white px-4 py-1 text-sm font-medium leading-6 text-gray-600 shadow-sm hover:bg-gray-50 focus:shadow-none focus:outline-none dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white"
|
|
>
|
|
<span class="i-tabler-edit text-lg transition-all group-hover:-translate-x-1"></span>
|
|
<span th:text="#{common.edit}"></span>
|
|
</a>
|
|
</template>
|
|
</div>
|
|
<div
|
|
th:if="${theme.config.post.show_upvote_button}"
|
|
@click="handleUpvote(name)"
|
|
class="group inline-flex cursor-pointer items-center rounded-lg"
|
|
>
|
|
<div
|
|
class="inline-flex items-center justify-center rounded-full p-2 transition-all group-hover:bg-gray-100 dark:group-hover:bg-slate-700"
|
|
>
|
|
<div
|
|
class="i-tabler-heart text-lg text-gray-600 group-hover:text-red-600 dark:text-slate-500"
|
|
x-show="!upvoted(name)"
|
|
></div>
|
|
<div class="i-tabler-heart-filled text-lg text-red-600" x-show="upvoted(name)"></div>
|
|
</div>
|
|
<span
|
|
th:attr="data-upvote-post-name=${post.metadata.name}"
|
|
class="text-sm text-gray-600 group-hover:text-red-600 dark:text-slate-500"
|
|
th:text="${post.stats?.upvote ?:0}"
|
|
></span>
|
|
</div>
|
|
<a
|
|
th:if="${haloCommentEnabled}"
|
|
href="#comment"
|
|
class="group inline-flex cursor-pointer items-center gap-0.5 rounded-lg"
|
|
>
|
|
<div
|
|
class="inline-flex items-center justify-center rounded-full p-2 transition-all group-hover:bg-gray-100 dark:group-hover:bg-slate-700"
|
|
>
|
|
<div
|
|
class="i-tabler-message-circle text-lg text-gray-600 group-hover:text-indigo-500 dark:text-slate-500"
|
|
></div>
|
|
</div>
|
|
<span
|
|
class="text-sm text-gray-600 group-hover:text-indigo-500 dark:text-slate-500"
|
|
th:text="${post.stats?.comment ?:0}"
|
|
></span>
|
|
</a>
|
|
|
|
<div
|
|
th:if="${theme.config.post.show_share_button}"
|
|
th:attr="x-data=|share(${theme.config.post.share_items},${theme.config.post.share_item_ids})|"
|
|
class="group inline-flex cursor-pointer items-center gap-0.5 rounded-lg"
|
|
@click="shareModal = true"
|
|
>
|
|
<div
|
|
class="inline-flex items-center justify-center rounded-full p-2 transition-all group-hover:bg-gray-100 dark:group-hover:bg-slate-700"
|
|
>
|
|
<div class="i-tabler-share text-lg text-gray-600 group-hover:text-green-500 dark:text-slate-500"></div>
|
|
</div>
|
|
<th:block th:replace="~{modules/share-modal}" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h1
|
|
th:if="${#strings.isEmpty(post.spec.cover)} or ${theme.config.post.title_position == 'content'}"
|
|
class="mt-3 text-3xl font-medium dark:text-slate-50"
|
|
th:text="${post.spec.title}"
|
|
></h1>
|
|
<div class="my-3 flex gap-2">
|
|
<a
|
|
th:each="tag : ${post.tags}"
|
|
th:href="@{${tag.status.permalink}}"
|
|
th:title="${tag.spec.displayName}"
|
|
th:text="|#${tag.spec.displayName}|"
|
|
class="cursor-pointer text-sm italic text-gray-600 hover:text-gray-900 dark:text-slate-400 dark:hover:text-slate-500"
|
|
>
|
|
</a>
|
|
</div>
|
|
<article
|
|
id="content"
|
|
class="!max-w-none break-words"
|
|
th:classappend="${theme.config.post.content_style == 'github' ? 'markdown-body' : 'tailwind-typography'}"
|
|
th:utext="${post.content.content}"
|
|
></article>
|
|
<div
|
|
class="mt-10 flex flex-col sm:flex-row sm:justify-between"
|
|
th:with="postCursor = ${postFinder.cursor(post.metadata.name)}"
|
|
>
|
|
<div class="flex justify-start">
|
|
<a
|
|
th:if="${postCursor.hasPrevious()}"
|
|
role="navigation"
|
|
class="group inline-flex items-center gap-2 truncate text-sm text-gray-600 hover:text-gray-900 dark:text-slate-100 dark:hover:text-slate-200"
|
|
th:href="@{${postCursor.previous.status.permalink}}"
|
|
th:title="${postCursor.previous.spec.title}"
|
|
>
|
|
<span class="i-tabler-chevron-left translate-x-1 text-lg transition-all group-hover:-translate-x-0"></span>
|
|
<span th:text="${#strings.abbreviate(postCursor.previous.spec.title,20)}"></span>
|
|
</a>
|
|
</div>
|
|
<div class="flex justify-end">
|
|
<a
|
|
th:if="${postCursor.hasNext()}"
|
|
role="navigation"
|
|
class="group inline-flex items-center gap-2 truncate text-sm text-gray-600 hover:text-gray-900 dark:text-slate-100 dark:hover:text-slate-200"
|
|
th:href="@{${postCursor.next.status.permalink}}"
|
|
th:title="${postCursor.next.spec.title}"
|
|
>
|
|
<span th:text="${#strings.abbreviate(postCursor.next.spec.title,20)}"></span>
|
|
<span class="i-tabler-chevron-right -translate-x-1 text-lg transition-all group-hover:translate-x-0"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<hr th:if="${haloCommentEnabled}" class="my-10 dark:border-slate-700" />
|
|
<div id="comment" th:if="${haloCommentEnabled}">
|
|
<h2 class="mb-2 text-base font-medium text-gray-900 dark:text-slate-50" th:text="#{common.comment}"></h2>
|
|
<halo:comment group="content.halo.run" kind="Post" th:attr="name=${post.metadata.name}" />
|
|
</div>
|
|
</div>
|
|
</th:block>
|
|
</html>
|