mckero/fuwari
1
0 Fork 0
mirror of https://github.com/MCKero6423/fuwari.git synced 2026-10-02 03:15:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

添加友链

Browse Source
This commit is contained in:
mckero authored and GitHub committed 2025-10-03 20:30:24 +08:00
1 parent 16c462453a
commit 771ee6851a
1 file changed
+97
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/friends.astro
+97
View File
@@ -0,0 +1,97 @@
---
import MainGridLayout from "@layouts/MainGridLayout.astro";
import { Icon } from "astro-icon/components";
---
<MainGridLayout title="友链">
<div class="card-base p-6 md:p-8">
<div class="flex items-center gap-2 mb-6">
<div class="h-8 w-8 rounded-lg bg-[var(--primary)] flex items-center justify-center text-white dark:text-black/70">
<Icon name="material-symbols:diversity-3" class="text-[1.5rem]">
</div>
<h1 class="text-2xl font-bold text-black dark:text-white">友链</h1>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- 在这里添加你的友链，参考下面的格式 -->
<!-- 友链示例1 -->
<a href="https://example.com/" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://example.com/avatar.png" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">网站名称</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">网站简介描述</div>
</a>
<!-- 友链示例2 -->
<a href="https://example2.com/" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://example2.com/logo.png" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">另一个网站</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">这里写网站的简介</div>
</a>
<!-- 继续添加更多友链... -->
<a href="https://adclosenn.top" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://adclosenn.top/assets/avatar.jpg" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">Ad_closeNN の Blog</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">Ad_closeNN 的小站，时不时会刷新一些野生东西 | ✨ 欢迎友链，祝大家天天开心！ ✨</div>
</a>
<a href="https://caiyifeng.top/" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://img.cdn1.vip/i/68bbdee513eb9_1757142757.webp" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">LYEy_isine个人博客</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">花海无一日,少年踏自来</div>
</a>
</div>
<!-- 申请友链 -->
<div class="sponsors-section mt-8">
<h2 class="text-xl font-bold text-black dark:text-white mb-4 flex items-center gap-2">
<Icon name="material-symbols:group" class="text-[1.5rem] text-[var(--primary)]"/>
将您的网站加入本站友链
</h2>
<p class="text-sm text-black/60 dark:text-white/60">
请自行提交PR <a target="_blank" href="https://github.com/MCKero6423/fuwari/blob/main/src/pages/friends.astro" class="transition link text-[var(--primary)] font-medium underline">点击这里提交</a>
</p>
<br>
</div>
</MainGridLayout>
<style>
.friend-card {
@apply flex flex-col gap-1 p-4 rounded-lg bg-[var(--card-bg)] hover:bg-black/5 dark:hover:bg-white/5;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 0.15s;
}
.friend-card:active {
scale: .98;
background-color: var(--btn-regular-bg-active);
}
.friend-card:hover {
background-color: var(--btn-regular-bg-hover);
}
.friend-card:hover .font-bold {
color: var(--btn-content);
}
.friend-card:hover .text-sm {
@apply text-gray-700 dark:text-white;
}
.friend-card .font-bold,
.friend-card .text-sm {
transition-property: color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 0.15s;
}
</style>