[⚠️注意]请注意:以下代码有部分代码为AI所写,且存在部分BUG暂时未修复,若您有其他意见,欢迎评论留言~
<!doctype html>
<html xmlns:th="https://www.thymeleaf.org"
th:replace="~{modules/layout :: html(title = |#{page.links.title} - ${site.title}|, hero = null, content = ~{::content}, head = null, footer = null, sidebar = null, contentClass = null, pageType = 'archives')}">
<th:block th:fragment="content">
<!-- 一整条连贯卡片 -->
<div class="card-base overflow-hidden">
<!-- 1. 友链列表(顶部圆角) -->
<div class="px-8 py-6 rounded-t-xl">
<th:block th:each="group : ${groups}">
<div class="mt-5">
<h2 th:text="${group.spec.displayName}" class="my-2 text-lg font-medium md:text-xl"></h2>
<div class="grid grid-cols-2 gap-4 md:grid-cols-3">
<th:block th:each="link : ${group.links}">
<a th:href="${link.spec.url}" target="_blank" th:title="${link.spec.displayName}" class="group">
<div class="flex aspect-[7/3] items-center justify-start space-x-3 rounded-xl p-3 shadow-md hover:bg-[var(--btn-plain-bg-hover)]">
<div class="aspect-square overflow-hidden rounded-full">
<img class="size-16 transform bg-cover object-cover transition-all duration-500 group-hover:size-0"
th:src="${link.spec.logo}" th:alt="${link.spec.displayName}">
</div>
<div class="group-hover:text-[var(--primary)]">
<div th:text="${link.spec.displayName}" class="line-clamp-1 font-medium"></div>
<div th:text="${link.spec.description}" class="line-clamp-2 text-[var(--muted-foreground)]"></div>
</div>
</div>
</a>
</th:block>
</div>
</div>
</th:block>
</div>
<!-- 2. 本站信息(中间直角) -->
<div class="px-8 py-6 border-t border-[var(--card-border)]">
<h2 class="my-2 text-lg font-medium md:text-xl">我的站点信息</h2>
<div class="flex items-center space-x-4">
<img src="https://blog.ybrc.top/upload/logo.jpg"
alt="拥抱日出的小屋"
class="size-16 rounded-full object-cover">
<div class="flex-1 select-all space-y-1 text-sm text-[var(--muted-foreground)]">
<p><span class="font-medium text-[var(--primary)]">站名:</span>拥抱日出的小屋</p>
<p><span class="font-medium text-[var(--primary)]">描述:</span>拥抱日出,也拥抱生活与代码</p>
<p><span class="font-medium text-[var(--primary)]">链接:</span>https://blog.ybrc.top</p>
<p><span class="font-medium text-[var(--primary)]">Logo:</span>https://blog.ybrc.top/upload/logo.jpg</p>
<p><span class="font-medium text-[var(--primary)]">RSS:</span>https://blog.ybrc.top/rss.xml</p>
</div>
</div>
</div>
<!-- 3. 申请要求(底部圆角 + 内部黄色条) -->
<div class="px-8 py-6 border-t border-[var(--card-border)] rounded-b-xl">
<div class="border-l-4 border-yellow-400 pl-4">
<h2 class="my-2 text-lg font-medium md:text-xl">申请要求</h2>
<div class="text-sm text-[var(--muted-foreground)] space-y-2">
<p>1. 不违反中国大陆法律法规,发现直接下架,无告知。</p>
<p>2. 可以让我先加你的站,但邮件告知后 3 天内未回加,我有权删除。</p>
<p>3. 原创文章数量 ≥ 3 篇。</p>
<p class="text-xs text-[var(--primary)] pt-2">🎈 如果你是我的朋友,除第 1 条外,其余规则通通豁免~</p>
</div>
</div>
</div>
</div>
</th:block>
</html>