Files
theme-earth/templates/modules/footer.html
Ryan Wang ed652815b9 refactor: improve ui (#153)
优化整体的 UI 和布局。

```release-note
None
```
2024-07-08 09:05:23 +00:00

159 lines
6.6 KiB
HTML

<footer th:if="${theme.config.footer.style == 'style_1'}" class="mt-10 bg-white py-8 dark:bg-slate-800">
<div class="max-w-7xl px-4 lg:px-6 mx-auto sm:flex sm:items-center sm:justify-between">
<a href="/" class="mb-4 flex items-center justify-center sm:mb-0 sm:justify-start">
<img
th:if="${not #strings.isEmpty(theme.config.footer.logo)} or ${not #strings.isEmpty(site.logo)}"
th:src="${theme.config.footer.logo ?: site.logo}"
class="mr-3 size-8"
th:alt="${site.title}"
/>
<span
class="self-center whitespace-nowrap text-2xl font-semibold dark:text-slate-50"
th:text="${theme.config.footer.title ?: site.title}"
>
</span>
</a>
<th:block th:if="${not #strings.isEmpty(theme.config.footer.menu)}">
<ul
th:with="menu = ${menuFinder.getByName(theme.config.footer.menu)}"
class="mb-6 flex flex-wrap items-center justify-center text-sm text-gray-500 dark:text-slate-200 sm:mb-0 sm:justify-start"
>
<li th:each="menuItem : ${menu.menuItems}">
<a
th:href="@{${menuItem.status.href}}"
class="mr-4 transition-all hover:text-gray-900 hover:underline dark:hover:text-white md:mr-6"
th:text="${menuItem.status.displayName}"
></a>
</li>
</ul>
</th:block>
<th:block th:replace="~{modules/footer-social}" />
</div>
<hr class="my-6 border-gray-100 dark:border-slate-700 sm:mx-auto lg:my-8" />
<div class="space-y-1">
<span class="max-w-7xl px-4 lg:px-6 mx-auto block text-center text-sm text-gray-500 dark:text-slate-300">
<a
href="https://beian.miit.gov.cn/"
class="hover:underline"
target="_blank"
th:href="${theme.config.beian.icp_link}"
th:text="${theme.config.beian.icp_text}"
></a>
</span>
<div
th:if="${not #strings.isEmpty(theme.config.beian.gongan_text)}"
class="max-w-7xl px-4 lg:px-6 mx-auto block text-center text-sm text-gray-500 dark:text-slate-300"
>
<p class="flex items-center justify-center gap-1">
<img th:src="@{/assets/images/gongan_beian.png}" class="size-4" alt="gongan_beian" />
<a
href="https://beian.mps.gov.cn/#/query/webSearch"
class="hover:underline"
target="_blank"
th:href="${theme.config.beian.gongan_link}"
th:text="${theme.config.beian.gongan_text}"
></a>
</p>
</div>
<span class="max-w-7xl px-4 lg:px-6 mx-auto block text-center text-sm text-gray-500 dark:text-slate-300">
©
<th:block th:text="${#dates.format(new java.util.Date().getTime(), 'yyyy')}" />
<a href="/" class="hover:underline" th:text="${site.title}"></a>. All Rights Reserved. Powered by
<a href="https://halo.run" class="hover:underline" target="_blank">Halo</a>.
</span>
<span class="max-w-7xl px-4 lg:px-6 mx-auto block text-center text-sm text-gray-500 dark:text-slate-300">
<halo:footer />
</span>
</div>
</footer>
<footer th:if="${theme.config.footer.style == 'style_2'}" class="mt-10 bg-white py-8 dark:bg-slate-800">
<div class="max-w-7xl px-4 lg:px-6 mx-auto md:flex md:justify-between md:gap-10">
<div class="mb-6 max-w-full md:mb-0 md:max-w-md">
<a href="/" class="mb-6 flex items-center">
<img
th:if="${not #strings.isEmpty(theme.config.footer.logo)} or ${not #strings.isEmpty(site.logo)}"
th:src="${theme.config.footer.logo ?: site.logo}"
class="mr-3 h-8"
th:alt="${site.title}"
/>
<span
class="self-center whitespace-nowrap text-2xl font-semibold dark:text-slate-50"
th:text="${theme.config.footer.title ?: site.title}"
></span>
</a>
<span
th:if="${not #strings.isEmpty(theme.config.footer.slogan)}"
class="text-sm font-light text-gray-600 dark:text-slate-200"
th:text="${theme.config.footer.slogan}"
>
</span>
</div>
<div
th:if="${not #lists.isEmpty(theme.config.footer.menus)}"
class="grid grid-cols-2 gap-8 sm:grid-cols-4 sm:gap-12"
>
<th:block th:each="menuName : ${theme.config.footer.menus}">
<div th:with="menu = ${menuFinder.getByName(menuName.name)}">
<h2
class="mb-6 text-sm font-semibold text-gray-900 dark:text-slate-50"
th:text="${menu.spec.displayName}"
></h2>
<ul th:with="menuItems = ${menu.menuItems}" class="text-sm text-gray-500 dark:text-slate-200">
<li th:each="menuItem : ${menuItems}" class="mb-4">
<a
th:href="@{${menuItem.status.href}}"
class="transition-all hover:text-gray-900 hover:underline dark:hover:text-white"
th:text="${menuItem.spec.displayName}"
></a>
</li>
</ul>
</div>
</th:block>
</div>
</div>
<hr class="my-6 border-gray-200 dark:border-slate-700 sm:mx-auto lg:my-8" />
<div class="max-w-7xl px-4 lg:px-6 mx-auto flex flex-col sm:flex-row sm:items-center sm:justify-between">
<div class="flex flex-col space-y-1 text-center sm:text-left">
<span class="text-sm text-gray-500 dark:text-slate-300 sm:text-center">
©
<th:block th:text="${#dates.format(new java.util.Date().getTime(), 'yyyy')}" />
<a href="/" class="hover:underline" th:text="${site.title}"></a>. All Rights Reserved. Powered by
<a href="https://halo.run" class="hover:underline" target="_blank">Halo</a>.
</span>
<div class="flex flex-col gap-1 sm:flex-row">
<span class="block text-center text-sm text-gray-500 sm:text-left">
<a
href="https://beian.miit.gov.cn/"
class="hover:underline"
target="_blank"
th:href="${theme.config.beian.icp_link}"
th:text="${theme.config.beian.icp_text}"
></a>
</span>
<div
th:if="${not #strings.isEmpty(theme.config.beian.gongan_text)}"
class="inline-flex items-center justify-center gap-1 text-sm text-gray-500 sm:justify-start"
>
<img th:src="@{/assets/images/gongan_beian.png}" class="size-4" alt="gongan_beian" />
<a
href="https://beian.mps.gov.cn/#/query/webSearch"
class="hover:underline"
target="_blank"
th:href="${theme.config.beian.gongan_link}"
th:text="${theme.config.beian.gongan_text}"
></a>
</div>
</div>
<p class="text-sm text-gray-500 dark:text-slate-300">
<halo:footer />
</p>
</div>
<th:block th:replace="~{modules/footer-social}" />
</div>
</footer>