200字
[教程]在Theme-Fuwari主题的Links页面末尾添加站点信息和申请要求
2025-10-01
2025-10-01

[⚠️注意]请注意:以下代码有部分代码为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>

[教程]在Theme-Fuwari主题的Links页面末尾添加站点信息和申请要求
作者
拥抱日出
发表于
2025-10-01
License
CC BY-NC-SA 4.0

评论