juluo/fuwari
1
0
Fork 0
mirror of https://github.com/afoim/fuwari.git synced 2026-01-31 00:53:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(sponsors): 重构赞助页面并迁移至/sponsors路径

Browse Source 
- 将原/donate页面迁移至/sponsors路径并重构实现
- 添加sponsors.json数据文件存储赞助者信息
- 实现从astro文件自动提取友链数据的脚本
- 更新导航栏配置和重定向规则
- 新增相关类型定义和配置文件
This commit is contained in:
二叉树树
2025-10-26 22:47:18 +08:00
parent 6a3ce5f638
commit c5c5f33ba8
12 changed files with 808 additions and 805 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
astro.config.mjs
View File

@@ -37,6 +37,10 @@ export default defineConfig({
base: "/",
trailingSlash: "always",
output: "static",
redirects: {
"/donate": "/sponsors",
"/donate/": "/sponsors/"
},
integrations: [tailwind({
nesting: true,
}), swup({

0
public/donate/alipay.svg → public/sponsors/alipay.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 46 KiB

0
public/donate/mjt.jpg → public/sponsors/mjt.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 76 KiB

After

Width:  |  Height:  |  Size: 76 KiB

0
public/donate/wechat.svg → public/sponsors/wechat.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 67 KiB

After

Width:  |  Height:  |  Size: 67 KiB

74
scripts/convert_friends.py Normal file
View File

@@ -0,0 +1,74 @@
import re
import json
import os
def extract_friend_data(html_content):
"""从HTML内容中提取友链数据"""
# 匹配友链卡片的正则表达式
pattern = r'<a href="([^"]+)"[^>]*class="friend-card">\s*' \
r'<div class="flex items-center gap-2">\s*' \
r'<img src="([^"]+)"[^>]*>\s*' \
r'<div class="font-bold[^"]*">([^<]+)</div>\s*' \
r'</div>\s*' \
r'<div class="text-sm[^"]*">([^<]+)</div>'
friends = []
for match in re.finditer(pattern, html_content, re.DOTALL):
url, avatar, name, description = match.groups()
friend = {
"name": name.strip(),
"avatar": avatar.strip(),
"description": description.strip(),
"url": url.strip()
}
friends.append(friend)
return friends
def read_friends_astro():
"""读取friends.astro文件内容"""
file_path = os.path.join(os.path.dirname(os.path.dirname(__file__)),
'src', 'pages', 'friends.astro')
with open(file_path, 'r', encoding='utf-8') as f:
return f.read()
def read_existing_friends_json():
"""读取现有的friends.json文件内容"""
file_path = os.path.join(os.path.dirname(os.path.dirname(__file__)),
'src', 'data', 'friends.json')
try:
with open(file_path, 'r', encoding='utf-8') as f:
return json.load(f)
except (FileNotFoundError, json.JSONDecodeError):
return {"friends": []}
def write_friends_json(friends_data):
"""将友链数据写入friends.json文件"""
file_path = os.path.join(os.path.dirname(os.path.dirname(__file__)),
'src', 'data', 'friends.json')
with open(file_path, 'w', encoding='utf-8') as f:
json.dump(friends_data, f, ensure_ascii=False, indent=2)
def main():
# 读取friends.astro内容
astro_content = read_friends_astro()
# 提取友链数据
new_friends = extract_friend_data(astro_content)
# 读取现有的friends.json
existing_data = read_existing_friends_json()
# 将新的友链数据添加到现有数据中
# 使用URL作为唯一标识符，避免重复
existing_urls = {friend["url"] for friend in existing_data["friends"]}
for friend in new_friends:
if friend["url"] not in existing_urls:
existing_data["friends"].append(friend)
existing_urls.add(friend["url"])
# 写入更新后的数据
write_friends_json(existing_data)
print(f"成功提取并添加了 {len(new_friends)} 个友链数据")
if __name__ == "__main__":
main()

2
src/config.ts
View File

@@ -70,7 +70,7 @@ export const navBarConfig: NavBarConfig = {
},
{
name: "赞助",
url: "/donate/", // Internal links should not include the base path, as it is automatically added
url: "/sponsors/", // Internal links should not include the base path, as it is automatically added
external: false, // Show an external link icon and will open in a new tab
},
{

454
src/data/friends.json Normal file
View File

@@ -0,0 +1,454 @@
{
"friends": [
{
"name": "yCENzh's Blog",
"avatar": "https://fuwari.oh1.top/avatar.webp",
"description": "Ciallo～(∠・ω< )⌒☆",
"url": "https://fuwari.oh1.top/"
},
{
"name": "Wer Blog",
"avatar": "https://blog.isyyo.com/favicon/logo.png",
"description": "The only way to do great is to love what you do",
"url": "https://blog.isyyo.com/"
},
{
"name": "带我入坑网站的超级大坏比",
"avatar": "https://q2.qlogo.cn/headimg_dl?dst_uin=3347510139&spec=5",
"description": "Dmocken的免费推广位",
"url": "https://phira.dmocken.top"
},
{
"name": "Dahi Blog",
"avatar": "https://oxs.dahi.icu/pic/avatar.png",
"description": "時光流轉，願你有一天能與重要的人重逢",
"url": "https://dahi.icu/"
},
{
"name": "AlexMa's Blog",
"avatar": "https://blog-backend.alexma.top/api/v2/objects/avatar/112zjnt1f3c2cf3prp.webp",
"description": "Create things with love.",
"url": "https://blog.alexma.top"
},
{
"name": "YoungLee的手帐",
"avatar": "https://younglee.cn/icon.svg",
"description": "写作恐惧症患者，需要咖啡续命的学者",
"url": "https://younglee.cn"
},
{
"name": "Google搜索 site:rbq.* 找到的",
"avatar": "https://saltedfishes.com/favicon.ico",
"description": "「Tragedy is coming 'as I wish'......」",
"url": "https://saltedfishes.com"
},
{
"name": "雾创岛",
"avatar": "https://www.tr0.cn/favicon.ico",
"description": "https://www.tr0.cn",
"url": "https://www.tr0.cn"
},
{
"name": "Eunie的博客",
"avatar": "https://www.eunie.online/upload/tMZ6yUjk7rxhCqQ.png",
"description": "https://www.eunie.online/",
"url": "https://www.eunie.online/"
},
{
"name": "奇妙页",
"avatar": "https://www.qmye.com/wp-content/uploads/favicon.ico",
"description": "探索AI创意与灵感的奇妙世界",
"url": "https://www.qmye.com"
},
{
"name": "巳忆笔记",
"avatar": "https://tc.siyi171.xyz/PicGo/logo.png",
"description": "记住所有美好回忆",
"url": "https://siyi171.xyz/"
},
{
"name": "Petric Blog",
"avatar": "https://www.petricw.com/photo.jpg",
"description": "代码如诗 / 逻辑为歌",
"url": "https://www.petricw.com"
},
{
"name": "在***教了我很多的好朋友",
"avatar": "/favicon/ie-cx.png",
"description": "https://ie.cx",
"url": "https://ie.cx"
},
{
"name": "RukaaX Blogs",
"avatar": "https://blogs.rukaax.top/wp-content/uploads/2025/07/cropped-1753627554-ICON.webp",
"description": "RukaaX-一名高中牲的博客",
"url": "https://blogs.rukaax.top/"
},
{
"name": "AirTouch's Blog",
"avatar": "https://blog.airtouch.top/avatar.webp",
"description": "岩间琉璃云间月",
"url": "https://xsl.im"
},
{
"name": "Falling42",
"avatar": "https://s2.loli.net/2025/05/17/Cbm7ogkBWAq3ST8.png",
"description": "Fate lies within the light cone.",
"url": "https://falling42.net/"
},
{
"name": "青序栈",
"avatar": "https://qxzhan.cn/favicon.png",
"description": "青序成栈·向简而生",
"url": "https://qxzhan.cn/"
},
{
"name": "夜轻Blog",
"avatar": "https://blog.yeqing.net/favicon.ico",
"description": "一个人",
"url": "https://blog.yeqing.net/"
},
{
"name": "fishcpy的小破站",
"avatar": "https://www.fis.ink/img/logo.png",
"description": "非淡泊无以明志，非宁静无以致远",
"url": "https://blog.fis.ink"
},
{
"name": "晓晴博客",
"avatar": "https://www.toubiec.cn/usr/themes/Joe/logo.ico",
"description": "https://www.toubiec.cn",
"url": "https://www.toubiec.cn"
},
{
"name": "酷丁博客",
"avatar": "https://coldin.top/favicon.ico",
"description": "https://coldin.top",
"url": "https://coldin.top"
},
{
"name": "Codfish Blog",
"avatar": "https://codfish.top/favicon/1.jpg",
"description": "🐟🐟🐟",
"url": "https://codfish.top"
},
{
"name": "随思南游",
"avatar": "https://ssnur.com/tx.jpg",
"description": "生如夏欢之绚烂，死如秋叶之静",
"url": "https://ssnur.com/"
},
{
"name": "Eilo's Blog",
"avatar": "https://www.eilo.uk/img/logo.png",
"description": "等等我记一下",
"url": "https://www.eilo.uk/"
},
{
"name": "Shattered217のblog",
"avatar": "https://blog.shattered.top/wp-content/uploads/2023/06/cropped-android-chrome-512x512-1.png",
"description": "成分复杂",
"url": "https://blog.shattered.top/"
},
{
"name": "wyf9's Blog",
"avatar": "https://wyf9.top/favicon/android-chrome-192x192.png",
"description": "什么都有的个人 blog?",
"url": "https://wyf9.top/"
},
{
"name": "fulie blog",
"avatar": "https://q2.qlogo.cn/headimg_dl?dst_uin=3672492995&spec=5",
"description": "永不后悔",
"url": "https://pcb.im/"
},
{
"name": "呐吼",
"avatar": "https://www.nahou.com/i/icon.webp",
"description": "不止于沉默",
"url": "https://www.nahou.com/"
},
{
"name": "私人grgk",
"avatar": "https://q2.qlogo.cn/headimg_dl?dst_uin=1662352474&spec=5",
"description": "https://sub.grgk.me",
"url": "https://sub.grgk.me"
},
{
"name": "Gunbrad的博客",
"avatar": "https://gunbrad.xyz/favicon/icon.jpg",
"description": "https://gunbrad.xyz",
"url": "https://gunbrad.xyz"
},
{
"name": "幻空博客",
"avatar": "https://img.huankong.top/i/2022/11/29/6385ef8c7a675.ico",
"description": "https://blog.huankong.top",
"url": "https://blog.huankong.top"
},
{
"name": "小白のBlog",
"avatar": "https://r2cfimg.showby.top/2024/09/19/66eb06a884fb9.jpg",
"description": "Ciallo～(∠・ω< )⌒☆",
"url": "https://www.showby.top/"
},
{
"name": "曾经天天和我斗嘴并且抄我博客的😡",
"avatar": "https://obj.muyoung.com/logo/favicon.ico",
"description": "https://blog.muyoung.com",
"url": "https://blog.muyoung.com"
},
{
"name": "非常酷的Kotlin Compose Web WASM 全Canvas网站",
"avatar": "/favicon/yurn.png",
"description": "https://nyayurin.github.io/Yutori-Docs/",
"url": "https://nyayurin.github.io/Yutori-Docs/"
},
{
"name": "钨鸮的孤岛电台",
"avatar": "https://blog.2w2.top/img/avatar.webp",
"description": "钨在所有金属中排名第七，因此这是一只重磅鸮",
"url": "https://blog.2w2.top"
},
{
"name": "奶昔论坛",
"avatar": "https://forum.naixi.net/favicon.ico",
"description": "https://forum.naixi.net/",
"url": "https://forum.naixi.net/"
},
{
"name": "LINUX.DO",
"avatar": "https://linux.do/uploads/default/optimized/3X/7/d/7de31932a4fd533496cfe35979a4d9d995bb5c63_2_180x180.png",
"description": "https://linux.do",
"url": "https://linux.do"
},
{
"name": "宝塔开心版",
"avatar": "https://www.bt.cn/favicon.ico",
"description": "https://bt.sb",
"url": "https://bt.sb"
},
{
"name": "NodeSeek",
"avatar": "/favicon/nodeseek.png",
"description": "https://www.nodeseek.com",
"url": "https://www.nodeseek.com"
},
{
"name": "粉白妙妙屋",
"avatar": "https://dlink.host/wx2.sinaimg.cn/large/007udx8Wly8i0h6etwni7g301j01lq3k.gif",
"description": "我见青山多妩媚",
"url": "https://383842.xyz"
},
{
"name": "或许是一只龙的博客",
"avatar": "https://fastr2.497995.xyz/image.jpg",
"description": "写点小东西",
"url": "https://www.497995.xyz/"
},
{
"name": "22",
"avatar": "/favicon/22.png",
"description": "https://space.bilibili.com/44681442",
"url": "https://space.bilibili.com/44681442"
},
{
"name": "Stanley的技术博客",
"avatar": "https://main.lixvyao.com/favicon.png",
"description": "给时光以生命 给岁月以文明。",
"url": "https://www.lixvyao.com"
},
{
"name": "Tavre Blog",
"avatar": "https://q1.qlogo.cn/g?b=qq&nk=2987304764&s=640",
"description": "Tavre的个人技术记录博客",
"url": "https://blog.tsd.my"
},
{
"name": "鈴奈咲桜のブログ",
"avatar": "https://blog.sakura.ink/_astro/avatar.B8d6PP-N_2a0uDN.webp",
"description": "愛することを忘れないで",
"url": "https://blog.sakura.ink"
},
{
"name": "yunsen2025的小窝",
"avatar": "https://img.alicdn.com/bao/uploaded/i4/O1CN01TWOpM42DSyY5nC0hM_!!0-mtopupload.jpg",
"description": "纯粹的计算机爱好者",
"url": "https://www.yunsen2025.top"
},
{
"name": "百里博客",
"avatar": "https://q2.qlogo.cn/headimg_dl?dst_uin=3166269605&spec=5",
"description": "一个高中生的博客",
"url": "https://blog.my0811.cn"
},
{
"name": "Zirkeln",
"avatar": "https://zrn.net/wp-content/uploads/2025/07/seia_avatar.jpg.webp",
"description": "欢迎来到我的个人网站！这里是我作为一名计算机科学爱好者和 ACG（动画、漫画、游戏）迷，分享我对计算机技术、动画、漫画小说和电子音乐（EDM）等多元兴趣的乐园。",
"url": "https://zrn.net"
},
{
"name": "mxd's Planet",
"avatar": "https://res.mxdyeah.top/favicon.webp",
"description": "平平无奇的菜鸟，喜欢干点自己喜欢做的事情。在这里学习更多有关Linux、*BSD知识，加入我们的大家庭一起交流分享！欢迎在此列表的其他网站互换友链！",
"url": "https://www.mxdyeah.top/"
},
{
"name": "森资源",
"avatar": "https://img.alicdn.com/bao/uploaded/i4/O1CN01TWOpM42DSyY5nC0hM_!!0-mtopupload.jpg",
"description": "牛逼的资源网站（没开站还）",
"url": "https://senziyuan.236668.xyz"
},
{
"name": "小宇blog",
"avatar": "https://blog.skyxy.qzz.io/images/favicon.svg",
"description": "很烂的blog，不怎么更新",
"url": "https://blog.skyxy.qzz.io/"
},
{
"name": "QC3284's Blog",
"avatar": "https://cdn4.xcqcoo.top/gh/QC3284/233@main/test_db_qc3284.png",
"description": "欢迎来到我的博客！ 一名乐于探索新事物的爱好者-QC3284",
"url": "https://www.xcqcoo.top"
},
{
"name": "zty012 blog (2y.nz)",
"avatar": "https://2y.nz/favicon.png",
"description": "一个初中生的blog",
"url": "https://2y.nz"
},
{
"name": "Elysiam",
"avatar": "https://img.170529.xyz/2025/08/favicon-compress.avif",
"description": "个人的博客小站，分享下技术和生活。May you, the beauty of this world, always shine",
"url": "https://blog.170529.xyz"
},
{
"name": "Gavin's Blog",
"avatar": "https://gavin-blog.pages.dev/assets/website/avatar.webp",
"description": "一个内容成分复杂的博客小站。",
"url": "https://gavin-blog.pages.dev"
},
{
"name": "小张の小站",
"avatar": "https://img.xiaozhangya.xin/file/1753185126703_avatar.jpg",
"description": "🌟 随时一起探索新事物，让我们一起成长、一起分享，让这片小小的数字世界充满更多的光辉✨！",
"url": "https://hub.xiaozhangya.xin"
},
{
"name": "星辰の笔记",
"avatar": "https://blog.strarry.top/avatar.jpg",
"description": "Code | Think | Share | Repeat",
"url": "https://blog.strarry.top/"
},
{
"name": "Ad_closeNN の Blog",
"avatar": "https://adclosenn.top/assets/avatar.jpg",
"description": "Ad_closeNN 的小站，时不时会刷新一些野生东西 | ✨ 欢迎友链，祝大家天天开心！ ✨",
"url": "https://adclosenn.top"
},
{
"name": "MC_Kero blog",
"avatar": "https://pub-3f1fec3195b64bb4974955567a77da00.r2.dev/OIP.jpeg",
"description": "MC_Kero的博客",
"url": "https://blog.mckero.com"
},
{
"name": "石墨烯积木的个人博客",
"avatar": "https://cdn.jsdelivr.net/gh/shimoxi123/img/img/6894b49f58cb8da5c80fd8e5.webp",
"description": "分享一些有趣的东西",
"url": "https://www.shimoxi.qzz.io/"
},
{
"name": "Aliom的个人博客",
"avatar": "https://avatars.githubusercontent.com/u/182760295?v=4",
"description": "Aliom的线上小窝",
"url": "https://bailanwa.dpdns.org"
},
{
"name": "THW's Blog",
"avatar": "https://img.dooki.cloud/i/2025/08/29/68b09e116c4b6.webp",
"description": "Live a good life meet slowly",
"url": "https://thw.lol/"
},
{
"name": "尘の个人博客",
"avatar": "https://blog.mcxiaochen.top/favicon.ico",
"description": "一个高中生 UP 搭的博客 QwQ",
"url": "https://blog.mcxiaochen.top/"
},
{
"name": "PARKSI's Blog",
"avatar": "https://blog.lparksi.com/images/icon.webp",
"description": "Redefine Yourself",
"url": "https://blog.lparksi.com/"
},
{
"name": "Zero - Higanbana",
"avatar": "https://vtdd.vip/_astro/lx.U15Ju0Ce_1mLhMp.webp",
"description": "https://vtdd.vip/",
"url": "https://vtdd.vip/"
},
{
"name": "硅基漫游指南",
"avatar": "https://blog.lparksi.com/images/icon.webp",
"description": "Face life with hope.",
"url": "https://blog.helong.online/"
},
{
"name": "chuzouX Blog",
"avatar": "https://q2.qlogo.cn/headimg_dl?dst_uin=3451860760&spec=0",
"description": "欢迎大家光临本站，希望大家在这里可以找到自己想要的东西，祝大家玩的开心！！",
"url": "https://chuzoux.top"
},
{
"name": "千年共振",
"avatar": "https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAEBfBVovV-BBiGQfhx8x5AqxWQsf6Yh8QACEz4AAk_q6VViPZEKaaiLvDYE.jpg/",
"description": "安卓人写的苹果博客",
"url": "https://blog.01101.top"
},
{
"name": "Mo的记事簿",
"avatar": "https://blog.xiowo.net/img/avatar.png",
"description": "万年鸽王，哈哈OvO",
"url": "https://blog.xiowo.net/"
},
{
"name": "Elykia",
"avatar": "https://bu.dusays.com/2024/10/25/671b2438203a6.gif",
"description": "致以无暇之人",
"url": "https://blog.elykia.cn"
},
{
"name": "CappuccinoZ's Blog",
"avatar": "https://kitakita.top/img/avatar2.png",
"description": "良机一直就在你眼前",
"url": "https://kitakita.top"
},
{
"name": "iAmKevin Blog",
"avatar": "https://n1.img.111pan.cn/api/v4/slave/file/content/0/ZGF0YS91cGxvYWRzLzE0L2M3MWU3ZjJjLTJkOGUtNGRkNi04OGZhLTZkMGIyMWIzZmNkZF9ibG9nLnBuZw==/0/blog.png?sign=xWijnCd9J9SNtUadG_OjD_0TJyTk3ZR7GCBKH98VIQw%3D%3A1759574603",
"description": "自律和不自律，都会吃苦，不同的是，自律的苦会让人生越来越甜。",
"url": "https://imkn.top"
},
{
"name": "XUIOO",
"avatar": "https://blog.xuioo.com/27c69590279fdc3be2cd7c901e3d07ad.jpg",
"description": "一叶障目，不见泰山；两耳塞豆，不闻雷霆。",
"url": "https://blog.xuioo.com"
},
{
"name": "静谧小窝",
"avatar": "https://img.yaotustarlight.im/random/ProfilePicture",
"description": "星河低语，夜风轻拂",
"url": "https://yaotustarlight.im"
},
{
"name": "夏夜流萤",
"avatar": "https://q2.qlogo.cn/headimg_dl?dst_uin=7618557&spec=0",
"description": "总有一场相遇，是互相喜欢的！",
"url": "https://blog.cuteleaf.cn"
}
]
}

52
src/data/sponsors.json Normal file
View File

@@ -0,0 +1,52 @@
{
"sponsors": [
{
"name": "明镜台",
"avatar": "/sponsors/mjt.jpg",
"date": "2025-08-02",
"amount": "100 ￥"
},
{
"name": "夜轻",
"avatar": "https://blog.yeqing.net/favicon.ico",
"date": "2025-07-11",
"amount": "78 ￥"
},
{
"name": "MingTone",
"avatar": "https://q.qlogo.cn/g?b=qq&nk=2244347713&s=160",
"date": "2025-07-21",
"amount": "50 ￥"
},
{
"name": "酷丁同学",
"avatar": "https://coldin.top/src/avatar.webp",
"date": "2025-07-15",
"amount": "5 USDC"
},
{
"name": "匿名用户",
"avatar": null,
"date": "2025-07-15",
"amount": "19.80￥"
},
{
"name": "AlexMa233",
"avatar": "https://blog-backend.alexma.top/api/v2/objects/avatar/112zjnt1f3c2cf3prp.webp",
"date": "2025-07-27",
"amount": "5 B币"
},
{
"name": "HEISEN黑森",
"avatar": "https://img.alicdn.com/bao/uploaded/i4/O1CN01TWOpM42DSyY5nC0hM_!!0-mtopupload.jpg",
"date": "2025-08-09",
"amount": "两个月充电"
},
{
"name": "chuzouX",
"avatar": "https://q2.qlogo.cn/headimg_dl?dst_uin=3451860760&spec=0",
"date": "2025-09-07",
"amount": "10￥"
}
]
}

269
src/pages/donate.astro
View File

@@ -1,269 +0,0 @@
---
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:favorite" class="text-[1.5rem]">
</div>
<h1 class="text-2xl font-bold text-black dark:text-white">赞助支持</h1>
</div>
<div class="mb-6">
<p class="text-lg text-black/80 dark:text-white/80 mb-3">
如果您觉得我的内容对您有帮助，欢迎通过以下方式支持我的创作。您的每一份支持都是我持续创作的动力！
</p>
<p class="text-sm text-black/60 dark:text-white/60">
所有赞助将用于网站维护、服务器费用以及内容创作。
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6 max-w-4xl mx-auto">
<!-- 支付宝 -->
<div class="donate-card">
<div class="flex items-center gap-3 mb-4">
<div class="h-10 w-10 rounded-lg bg-blue-500 flex items-center justify-center">
<Icon name="simple-icons:alipay" class="text-[1.5rem] text-white">
</div>
<div>
<h3 class="text-lg font-bold text-black dark:text-white">支付宝</h3>
<p class="text-sm text-black/60 dark:text-white/60">扫码支付</p>
</div>
</div>
<div class="qr-code-placeholder">
<img src="/donate/alipay.svg" alt="支付宝二维码" class="w-48 h-48 mx-auto rounded-lg" />
</div>
</div>
<!-- 微信支付 -->
<div class="donate-card">
<div class="flex items-center gap-3 mb-4">
<div class="h-10 w-10 rounded-lg bg-green-500 flex items-center justify-center">
<Icon name="simple-icons:wechat" class="text-[1.5rem] text-white">
</div>
<div>
<h3 class="text-lg font-bold text-black dark:text-white">微信支付</h3>
<p class="text-sm text-black/60 dark:text-white/60">扫码支付</p>
</div>
</div>
<div class="qr-code-placeholder">
<img src="/donate/wechat.svg" alt="微信支付二维码" class="w-48 h-48 mx-auto rounded-lg" />
</div>
</div>
</div>
</div>
<br>
<!-- 其他支持方式 -->
<div class="card-base p-6 mb-6">
<h2 class="text-xl font-bold text-black dark:text-white mb-3">其他支持方式</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="support-card">
<div class="flex items-center gap-2 mb-2">
<Icon name="material-symbols:share" class="text-[1.2rem] text-[var(--primary)]">
<span class="font-semibold text-black dark:text-white">分享推荐</span>
</div>
<p class="text-sm text-black/60 dark:text-white/60">
将我的博客分享给更多朋友
</p>
</div>
<div class="support-card">
<div class="flex items-center gap-2 mb-2">
<Icon name="material-symbols:comment" class="text-[1.2rem] text-[var(--primary)]">
<span class="font-semibold text-black dark:text-white">留言互动</span>
</div>
<p class="text-sm text-black/60 dark:text-white/60">
在文章下方留下您的想法
</p>
</div>
<div class="support-card">
<div class="flex items-center gap-2 mb-2">
<Icon name="material-symbols:star" class="text-[1.2rem] text-[var(--primary)]">
<span class="font-semibold text-black dark:text-white">关注订阅</span>
</div>
<p class="text-sm text-black/60 dark:text-white/60">
订阅RSS或关注社交媒体
</p>
</div>
</div>
</div>
<div class="sponsors-section card-base p-6">
<h2 class="text-xl font-bold text-black dark:text-white mb-3 flex items-center gap-2">
<Icon name="material-symbols:group" class="text-[1.5rem] text-[var(--primary)]"></Icon>
<span>已赞助的小伙伴</span>
</h2>
<p class="text-sm text-black/60 dark:text-white/60 mb-4">
如果您已赞助，并且想加入赞助名单，请自行提交PR <a target="_blank" href="https://github.com/afoim/fuwari/blob/main/src/pages/donate.astro" class="transition link text-[var(--primary)] font-medium underline">点击这里提交</a>
</p>
<div class="sponsors-grid">
<!-- 已赞助的小伙伴 -->
<div class="sponsor-card">
<div class="flex items-center gap-3 p-4 rounded-lg bg-[var(--card-bg)] border border-black/10 dark:border-white/10">
<!-- 本地头像示例（需要将头像放在 public/donate/ 目录下） -->
<div class="w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center overflow-hidden">
<!-- 如果有本地头像文件，使用: <img src="/donate/user1.jpg" alt="用户头像" loading="lazy" class="w-full h-full object-cover" /> -->
<!-- 如果没有头像文件，显示默认图标 -->
<!-- <Icon name="material-symbols:person" class="text-gray-500 dark:text-gray-400 text-[1.2rem]"> -->
<img src="/donate/mjt.jpg" alt="" class="w-full h-full object-cover">
</div>
<div class="flex-1">
<h4 class="font-semibold text-black dark:text-white text-sm">明镜台</h4>
<p class="text-xs text-black/60 dark:text-white/60">2025-08-02</p>
</div>
<div class="text-xs text-[var(--primary)] font-medium">100 ￥</div>
</div>
</div>
<div class="sponsor-card">
<div class="flex items-center gap-3 p-4 rounded-lg bg-[var(--card-bg)] border border-black/10 dark:border-white/10">
<div class="w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center overflow-hidden">
<img src="https://blog.yeqing.net/favicon.ico" alt="" class="w-full h-full object-cover">
</div>
<div class="flex-1">
<h4 class="font-semibold text-black dark:text-white text-sm">夜轻</h4>
<p class="text-xs text-black/60 dark:text-white/60">2025-07-11</p>
</div>
<div class="text-xs text-[var(--primary)] font-medium">78 ￥</div>
</div>
</div>
<div class="sponsor-card">
<div class="flex items-center gap-3 p-4 rounded-lg bg-[var(--card-bg)] border border-black/10 dark:border-white/10">
<div class="w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center overflow-hidden">
<img src="https://q.qlogo.cn/g?b=qq&nk=2244347713&s=160" alt="用户头像" loading="lazy" class="w-full h-full object-cover">
</div>
<div class="flex-1">
<h4 class="font-semibold text-black dark:text-white text-sm">MingTone</h4>
<p class="text-xs text-black/60 dark:text-white/60">2025-07-21</p>
</div>
<div class="text-xs text-[var(--primary)] font-medium">50 ￥</div>
</div>
</div>
<div class="sponsor-card">
<div class="flex items-center gap-3 p-4 rounded-lg bg-[var(--card-bg)] border border-black/10 dark:border-white/10">
<div class="w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center overflow-hidden">
<img src="https://coldin.top/src/avatar.webp" alt="用户头像" loading="lazy" class="w-full h-full object-cover">
</div>
<div class="flex-1">
<h4 class="font-semibold text-black dark:text-white text-sm">酷丁同学</h4>
<p class="text-xs text-black/60 dark:text-white/60">2025-07-15</p>
</div>
<div class="text-xs text-[var(--primary)] font-medium">5 USDC</div>
</div>
</div>
<div class="sponsor-card">
<div class="flex items-center gap-3 p-4 rounded-lg bg-[var(--card-bg)] border border-black/10 dark:border-white/10">
<div class="w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center overflow-hidden">
<Icon name="material-symbols:person" class="text-gray-500 dark:text-gray-400 text-[1.2rem]">
</div>
<div class="flex-1">
<h4 class="font-semibold text-black dark:text-white text-sm">匿名用户</h4>
<p class="text-xs text-black/60 dark:text-white/60">2025-07-15</p>
</div>
<div class="text-xs text-[var(--primary)] font-medium">19.80￥</div>
</div>
</div>
<div class="sponsor-card">
<div class="flex items-center gap-3 p-4 rounded-lg bg-[var(--card-bg)] border border-black/10 dark:border-white/10">
<div class="w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center overflow-hidden">
<img src="https://blog-backend.alexma.top/api/v2/objects/avatar/112zjnt1f3c2cf3prp.webp" alt="用户头像" loading="lazy" class="w-full h-full object-cover">
</div>
<div class="flex-1">
<h4 class="font-semibold text-black dark:text-white text-sm">AlexMa233</h4>
<p class="text-xs text-black/60 dark:text-white/60">2025-07-27</p>
</div>
<div class="text-xs text-[var(--primary)] font-medium">5 B币</div>
</div>
</div>
<div class="sponsor-card">
<div class="flex items-center gap-3 p-4 rounded-lg bg-[var(--card-bg)] border border-black/10 dark:border-white/10">
<div class="w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center overflow-hidden">
<img src="https://img.alicdn.com/bao/uploaded/i4/O1CN01TWOpM42DSyY5nC0hM_!!0-mtopupload.jpg" alt="用户头像" loading="lazy" class="w-full h-full object-cover">
</div>
<div class="flex-1">
<h4 class="font-semibold text-black dark:text-white text-sm">HEISEN黑森</h4>
<p class="text-xs text-black/60 dark:text-white/60">2025-08-09</p>
</div>
<div class="text-xs text-[var(--primary)] font-medium">两个月充电</div>
</div>
</div>
<div class="sponsor-card">
<div class="flex items-center gap-3 p-4 rounded-lg bg-[var(--card-bg)] border border-black/10 dark:border-white/10">
<div class="w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center overflow-hidden">
<img src="https://q2.qlogo.cn/headimg_dl?dst_uin=3451860760&spec=0" alt="用户头像" loading="lazy" class="w-full h-full object-cover">
</div>
<div class="flex-1">
<h4 class="font-semibold text-black dark:text-white text-sm">chuzouX</h4>
<p class="text-xs text-black/60 dark:text-white/60">2025-09-07</p>
</div>
<div class="text-xs text-[var(--primary)] font-medium">10￥</div>
</div>
</div>
</div>
</div>
</div>
</MainGridLayout>
<style>
.donate-card {
@apply flex flex-col p-4 rounded-lg bg-[var(--card-bg)] border border-black/10 dark:border-white/10 hover:border-black/20 dark:hover:border-white/20 transition;
}
.support-card {
@apply p-4 rounded-lg bg-[var(--card-bg)] hover:bg-black/5 dark:hover:bg-white/5 transition;
}
.qr-code-placeholder {
@apply text-center;
}
.sponsors-section {
@apply mt-6;
}
.sponsors-grid {
@apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
}
.sponsor-placeholder {
@apply transition-all duration-200 hover:scale-105;
}
.sponsor-card {
@apply transition-all duration-200 hover:shadow-md hover:scale-105;
}
.crypto-info {
@apply space-y-3;
}
.wallet-address, .bybit-uid {
@apply text-center;
}
.copy-btn {
@apply transition-colors duration-200;
}
.copy-btn:hover {
color: var(--primary);
opacity: 0.8;
}
</style>
<script>
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(function() {
// 可以添加复制成功的提示
alert('已复制到剪贴板');
}, function(err) {
console.error('复制失败: ', err);
});
}
</script>

548
src/pages/friends.astro
View File

@@ -1,6 +1,10 @@
---
import MainGridLayout from "@layouts/MainGridLayout.astro";
import { Icon } from "astro-icon/components";
import type { FriendsData } from "@/types/data";
import friendsData from "@/data/friends.json";
const { friends } = friendsData as FriendsData;
---
<MainGridLayout title="友链">
@@ -12,541 +16,15 @@ import { Icon } from "astro-icon/components";
<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">
<a href="https://fuwari.oh1.top/" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://fuwari.oh1.top/avatar.webp" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">yCENzh's Blog</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">Ciallo～(∠・ω&lt; )⌒☆ </div>
</a>
<a href="https://blog.isyyo.com/" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://blog.isyyo.com/favicon/logo.png" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">Wer Blog</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">The only way to do great is to love what you do</div>
</a>
<a href="https://phira.dmocken.top" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://q2.qlogo.cn/headimg_dl?dst_uin=3347510139&spec=5" 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">Dmocken的免费推广位</div>
</a>
<a href="https://dahi.icu/" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://oxs.dahi.icu/pic/avatar.png" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">Dahi Blog</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">時光流轉，願你有一天能與重要的人重逢</div>
</a>
<a href="https://blog.alexma.top" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://blog-backend.alexma.top/api/v2/objects/avatar/112zjnt1f3c2cf3prp.webp" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">AlexMa's Blog</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">Create things with love.</div>
</a>
<a href="https://younglee.cn" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://younglee.cn/icon.svg" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">YoungLee的手帐</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">写作恐惧症患者，需要咖啡续命的学者</div>
</a>
<a href="https://saltedfishes.com" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://saltedfishes.com/favicon.ico" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">Google搜索 site&colon;rbq.* 找到的</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">「Tragedy is coming 'as I wish'......」</div>
</a>
<a href="https://www.tr0.cn" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://www.tr0.cn/favicon.ico" 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">https://www.tr0.cn</div>
</a>
<a href="https://www.eunie.online/" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://www.eunie.online/upload/tMZ6yUjk7rxhCqQ.png" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">Eunie的博客</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">https://www.eunie.online/</div>
</a>
<a href="https://www.qmye.com" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://www.qmye.com/wp-content/uploads/favicon.ico" 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">探索AI创意与灵感的奇妙世界</div>
</a>
<a href="https://siyi171.xyz/" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://tc.siyi171.xyz/PicGo/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://www.petricw.com" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://www.petricw.com/photo.jpg" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">Petric Blog</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">代码如诗 / 逻辑为歌</div>
</a>
<a href="https://ie.cx" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="/favicon/ie-cx.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">https://ie.cx</div>
</a>
<a href="https://blogs.rukaax.top/" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://blogs.rukaax.top/wp-content/uploads/2025/07/cropped-1753627554-ICON.webp" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">RukaaX Blogs</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">RukaaX-一名高中牲的博客</div>
</a>
<a href="https://xsl.im" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://blog.airtouch.top/avatar.webp" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">AirTouch’s Blog</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">岩间琉璃云间月</div>
</a>
<a href="https://falling42.net/" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://s2.loli.net/2025/05/17/Cbm7ogkBWAq3ST8.png" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">Falling42</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">Fate lies within the light cone. </div>
</a>
<a href="https://qxzhan.cn/" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://qxzhan.cn/favicon.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://blog.yeqing.net/" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://blog.yeqing.net/favicon.ico" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">夜轻Blog</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">一个人</div>
</a>
<a href="https://blog.fis.ink" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://www.fis.ink/img/logo.png" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">fishcpy的小破站</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">非淡泊无以明志，非宁静无以致远</div>
</a>
<a href="https://www.toubiec.cn" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://www.toubiec.cn/usr/themes/Joe/logo.ico" 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">https://www.toubiec.cn</div>
</a>
<a href="https://coldin.top" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://coldin.top/favicon.ico" 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">https://coldin.top</div>
</a>
<a href="https://codfish.top" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://codfish.top/favicon/1.jpg" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">Codfish Blog</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">🐟🐟🐟</div>
</a>
<a href="https://ssnur.com/" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://ssnur.com/tx.jpg" 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://www.eilo.uk/" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://www.eilo.uk/img/logo.png" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">Eilo's Blog</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">等等我记一下</div>
</a>
<a href="https://blog.shattered.top/" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://blog.shattered.top/wp-content/uploads/2023/06/cropped-android-chrome-512x512-1.png" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">Shattered217のblog</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">成分复杂</div>
</a>
<a href="https://wyf9.top/" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://wyf9.top/favicon/android-chrome-192x192.png" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">wyf9's Blog</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">什么都有的个人 blog?</div>
</a>
<a href="https://pcb.im/" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://q2.qlogo.cn/headimg_dl?dst_uin=3672492995&spec=5" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">fulie blog</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">永不后悔</div>
</a>
<a href="https://www.nahou.com/" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://www.nahou.com/i/icon.webp" 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://sub.grgk.me" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://q2.qlogo.cn/headimg_dl?dst_uin=1662352474&spec=5" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">私人grgk</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">https://sub.grgk.me</div>
</a>
<a href="https://gunbrad.xyz" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://gunbrad.xyz/favicon/icon.jpg" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">Gunbrad的博客</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">https://gunbrad.xyz</div>
</a>
<a href="https://blog.huankong.top" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://img.huankong.top/i/2022/11/29/6385ef8c7a675.ico" 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">https://blog.huankong.top</div>
</a>
<a href="https://www.showby.top/" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://r2cfimg.showby.top/2024/09/19/66eb06a884fb9.jpg" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">小白のBlog</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">Ciallo～(∠・ω&lt; )⌒☆</div>
</a>
<a href="https://blog.muyoung.com" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://obj.muyoung.com/logo/favicon.ico" 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">https://blog.muyoung.com</div>
</a>
<a href="https://nyayurin.github.io/Yutori-Docs/" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="/favicon/yurn.png" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">非常酷的Kotlin Compose Web WASM 全Canvas网站</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">https://nyayurin.github.io/Yutori-Docs/</div>
</a>
<a href="https://blog.2w2.top" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://blog.2w2.top/img/avatar.webp" 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://forum.naixi.net/" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://forum.naixi.net/favicon.ico" 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">https://forum.naixi.net/</div>
</a>
<a href="https://linux.do" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://linux.do/uploads/default/optimized/3X/7/d/7de31932a4fd533496cfe35979a4d9d995bb5c63_2_180x180.png" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">LINUX.DO</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">https://linux.do</div>
</a>
<a href="https://bt.sb" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://www.bt.cn/favicon.ico" 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">https://bt.sb</div>
</a>
<a href="https://www.nodeseek.com" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="/favicon/nodeseek.png" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">NodeSeek</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">https://www.nodeseek.com</div>
</a>
<a href="https://383842.xyz" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://dlink.host/wx2.sinaimg.cn/large/007udx8Wly8i0h6etwni7g301j01lq3k.gif" 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://www.497995.xyz/" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://fastr2.497995.xyz/image.jpg" 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://space.bilibili.com/44681442" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="/favicon/22.png" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">22</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">https://space.bilibili.com/44681442</div>
</a>
<a href="https://www.lixvyao.com" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://main.lixvyao.com/favicon.png" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">Stanley的技术博客</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">给时光以生命 给岁月以文明。</div>
</a>
<a href="https://blog.tsd.my" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://q1.qlogo.cn/g?b=qq&nk=2987304764&s=640" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">Tavre Blog</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">Tavre的个人技术记录博客</div>
</a>
<a href="https://blog.sakura.ink" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://blog.sakura.ink/_astro/avatar.B8d6PP-N_2a0uDN.webp" 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://www.yunsen2025.top" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://img.alicdn.com/bao/uploaded/i4/O1CN01TWOpM42DSyY5nC0hM_!!0-mtopupload.jpg" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">yunsen2025的小窝</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">纯粹的计算机爱好者</div>
</a>
<a href="https://blog.my0811.cn" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://q2.qlogo.cn/headimg_dl?dst_uin=3166269605&spec=5" 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://zrn.net" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://zrn.net/wp-content/uploads/2025/07/seia_avatar.jpg.webp" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">Zirkeln</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">欢迎来到我的个人网站！这里是我作为一名计算机科学爱好者和 ACG（动画、漫画、游戏）迷，分享我对计算机技术、动画、漫画小说和电子音乐（EDM）等多元兴趣的乐园。</div>
</a>
<a href="https://www.mxdyeah.top/" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://res.mxdyeah.top/favicon.webp" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">mxd's Planet</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">平平无奇的菜鸟，喜欢干点自己喜欢做的事情。在这里学习更多有关Linux、*BSD知识，加入我们的大家庭一起交流分享！欢迎在此列表的其他网站互换友链！</div>
</a>
<a href="https://senziyuan.236668.xyz" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://img.alicdn.com/bao/uploaded/i4/O1CN01TWOpM42DSyY5nC0hM_!!0-mtopupload.jpg" 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://blog.skyxy.qzz.io/" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://blog.skyxy.qzz.io/images/favicon.svg" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">小宇blog</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">很烂的blog，不怎么更新</div>
</a>
<a href="https://www.xcqcoo.top" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://cdn4.xcqcoo.top/gh/QC3284/233@main/test_db_qc3284.png" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">QC3284's Blog</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">欢迎来到我的博客！ 一名乐于探索新事物的爱好者-QC3284</div>
</a>
<a href="https://2y.nz" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://2y.nz/favicon.png" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">zty012 blog (2y.nz)</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">一个初中生的blog</div>
</a>
<a href="https://blog.170529.xyz" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://img.170529.xyz/2025/08/favicon-compress.avif" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">Elysiam</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">个人的博客小站，分享下技术和生活。May you, the beauty of this world, always shine</div>
</a>
<a href="https://gavin-blog.pages.dev" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://gavin-blog.pages.dev/assets/website/avatar.webp" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">Gavin's Blog</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">一个内容成分复杂的博客小站。</div>
</a>
<a href="https://hub.xiaozhangya.xin" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://img.xiaozhangya.xin/file/1753185126703_avatar.jpg" 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://blog.strarry.top/" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://blog.strarry.top/avatar.jpg" 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">Code | Think | Share | Repeat</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://blog.mckero.com" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://pub-3f1fec3195b64bb4974955567a77da00.r2.dev/OIP.jpeg" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">MC_Kero blog</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">MC_Kero的博客</div>
</a>
<a href="https://www.shimoxi.qzz.io/" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://cdn.jsdelivr.net/gh/shimoxi123/img/img/6894b49f58cb8da5c80fd8e5.webp" 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://bailanwa.dpdns.org" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://avatars.githubusercontent.com/u/182760295?v=4" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">Aliom的个人博客</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">Aliom的线上小窝</div>
</a>
<a href="https://thw.lol/" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://img.dooki.cloud/i/2025/08/29/68b09e116c4b6.webp" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">THW's Blog</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">Live a good life meet slowly</div>
</a>
<a href="https://blog.mcxiaochen.top/" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://blog.mcxiaochen.top/favicon.ico" 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">一个高中生 UP 搭的博客 QwQ</div>
</a>
<a href="https://blog.lparksi.com/" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://blog.lparksi.com/images/icon.webp" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">PARKSI's Blog</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">Redefine Yourself</div>
</a>
<a href="https://vtdd.vip/" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://vtdd.vip/_astro/lx.U15Ju0Ce_1mLhMp.webp" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">Zero - Higanbana</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">https://vtdd.vip/</div>
<a href="https://blog.helong.online/" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://blog.lparksi.com/images/icon.webp" 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">Face life with hope.</div>
</a>
<a href="https://chuzoux.top" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://q2.qlogo.cn/headimg_dl?dst_uin=3451860760&spec=0" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">chuzouX Blog</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">欢迎大家光临本站，希望大家在这里可以找到自己想要的东西，祝大家玩的开心！！</div>
</a>
<a href="https://blog.01101.top" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://img.remit.ee/api/file/BQACAgUAAyEGAASHRsPbAAEBfBVovV-BBiGQfhx8x5AqxWQsf6Yh8QACEz4AAk_q6VViPZEKaaiLvDYE.jpg/" 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://blog.xiowo.net/" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://blog.xiowo.net/img/avatar.png" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">Mo的记事簿</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">万年鸽王，哈哈OvO</div>
<a href="https://blog.elykia.cn" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://bu.dusays.com/2024/10/25/671b2438203a6.gif" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">Elykia</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">致以无暇之人</div>
</a>
<a href="https://justpureh2o.cn" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://justpureh2o.cn/favicon.jpg" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">JustPureH<sub>2</sub>O</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">穷方圆平直之情，尽规矩准绳之用</div>
</a>
<a href="https://dailyfunctions.top/" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<div class="font-bold text-black dark:text-white">DailyFunctions-生活常用工具</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">hi~</div>
</a>
<a href="https://kitakita.top" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://kitakita.top/img/avatar2.png" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">CappuccinoZ's Blog</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">良机一直就在你眼前</div>
</a>
<a href="https://imkn.top" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://n1.img.111pan.cn/api/v4/slave/file/content/0/ZGF0YS91cGxvYWRzLzE0L2M3MWU3ZjJjLTJkOGUtNGRkNi04OGZhLTZkMGIyMWIzZmNkZF9ibG9nLnBuZw==/0/blog.png?sign=xWijnCd9J9SNtUadG_OjD_0TJyTk3ZR7GCBKH98VIQw%3D%3A1759574603" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">iAmKevin Blog</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">自律和不自律，都会吃苦，不同的是，自律的苦会让人生越来越甜。</div>
</a>
<a href="https://blog.xuioo.com" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://blog.xuioo.com/27c69590279fdc3be2cd7c901e3d07ad.jpg" loading="lazy" class="w-5 h-5 rounded">
<div class="font-bold text-black dark:text-white">XUIOO</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">一叶障目，不见泰山；两耳塞豆，不闻雷霆。</div>
</a>
<a href="https://yaotustarlight.im" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://img.yaotustarlight.im/random/ProfilePicture" 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 href="https://blog.cuteleaf.cn" target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src="https://q2.qlogo.cn/headimg_dl?dst_uin=7618557&spec=0" 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>
{friends.map((friend) => (
<a href={friend.url} target="_blank" class="friend-card">
<div class="flex items-center gap-2">
<img src={friend.avatar} loading="lazy" class="w-5 h-5 rounded" alt={`${friend.name}的头像`}>
<div class="font-bold text-black dark:text-white">{friend.name}</div>
</div>
<div class="text-sm text-black/50 dark:text-white/50">{friend.description}</div>
</a>
))}
</div>
<!-- 申请友链 -->

189
src/pages/sponsors.astro Normal file
View File

@@ -0,0 +1,189 @@
---
import MainGridLayout from "@layouts/MainGridLayout.astro";
import { Icon } from "astro-icon/components";
import type { SponsorsData } from "@/types/data";
import sponsorsData from "@/data/sponsors.json";
const { sponsors } = sponsorsData as SponsorsData;
---
<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:favorite" class="text-[1.5rem]">
</div>
<h1 class="text-2xl font-bold text-black dark:text-white">赞助支持</h1>
</div>
<div class="mb-6">
<p class="text-lg text-black/80 dark:text-white/80 mb-3">
如果您觉得我的内容对您有帮助，欢迎通过以下方式支持我的创作。您的每一份支持都是我持续创作的动力！
</p>
<p class="text-sm text-black/60 dark:text-white/60">
所有赞助将用于网站维护、服务器费用以及内容创作。
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6 max-w-4xl mx-auto">
<!-- 支付宝 -->
<div class="donate-card">
<div class="flex items-center gap-3 mb-4">
<div class="h-10 w-10 rounded-lg bg-blue-500 flex items-center justify-center">
<Icon name="simple-icons:alipay" class="text-[1.5rem] text-white">
</div>
<div>
<h3 class="text-lg font-bold text-black dark:text-white">支付宝</h3>
<p class="text-sm text-black/60 dark:text-white/60">扫码支付</p>
</div>
</div>
<div class="qr-code-placeholder">
<img src="/sponsors/alipay.svg" alt="支付宝二维码" class="w-48 h-48 mx-auto rounded-lg" />
</div>
</div>
<!-- 微信支付 -->
<div class="donate-card">
<div class="flex items-center gap-3 mb-4">
<div class="h-10 w-10 rounded-lg bg-green-500 flex items-center justify-center">
<Icon name="simple-icons:wechat" class="text-[1.5rem] text-white">
</div>
<div>
<h3 class="text-lg font-bold text-black dark:text-white">微信支付</h3>
<p class="text-sm text-black/60 dark:text-white/60">扫码支付</p>
</div>
</div>
<div class="qr-code-placeholder">
<img src="/sponsors/wechat.svg" alt="微信支付二维码" class="w-48 h-48 mx-auto rounded-lg" />
</div>
</div>
</div>
</div>
<br>
<!-- 其他支持方式 -->
<div class="card-base p-6 mb-6">
<h2 class="text-xl font-bold text-black dark:text-white mb-3">其他支持方式</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="support-card">
<div class="flex items-center gap-2 mb-2">
<Icon name="material-symbols:share" class="text-[1.2rem] text-[var(--primary)]">
<span class="font-semibold text-black dark:text-white">分享推荐</span>
</div>
<p class="text-sm text-black/60 dark:text-white/60">
将我的博客分享给更多朋友
</p>
</div>
<div class="support-card">
<div class="flex items-center gap-2 mb-2">
<Icon name="material-symbols:comment" class="text-[1.2rem] text-[var(--primary)]">
<span class="font-semibold text-black dark:text-white">留言互动</span>
</div>
<p class="text-sm text-black/60 dark:text-white/60">
在文章下方留下您的想法
</p>
</div>
<div class="support-card">
<div class="flex items-center gap-2 mb-2">
<Icon name="material-symbols:star" class="text-[1.2rem] text-[var(--primary)]">
<span class="font-semibold text-black dark:text-white">关注订阅</span>
</div>
<p class="text-sm text-black/60 dark:text-white/60">
订阅RSS或关注社交媒体
</p>
</div>
</div>
</div>
<div class="sponsors-section card-base p-6">
<h2 class="text-xl font-bold text-black dark:text-white mb-3 flex items-center gap-2">
<Icon name="material-symbols:group" class="text-[1.5rem] text-[var(--primary)]"></Icon>
<span>已赞助的小伙伴</span>
</h2>
<p class="text-sm text-black/60 dark:text-white/60 mb-4">
如果您已赞助，并且想加入赞助名单，请自行提交PR <a target="_blank" href="https://github.com/afoim/fuwari/blob/main/src/pages/donate.astro" class="transition link text-[var(--primary)] font-medium underline">点击这里提交</a>
</p>
<div class="sponsors-grid">
{sponsors.map((sponsor) => (
<div class="sponsor-card">
<div class="flex items-center gap-3 p-4 rounded-lg bg-[var(--card-bg)] border border-black/10 dark:border-white/10">
<div class="w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center overflow-hidden">
{sponsor.avatar ? (
<img src={sponsor.avatar} alt={`${sponsor.name}的头像`} loading="lazy" class="w-full h-full object-cover" />
) : (
<Icon name="material-symbols:person" class="text-gray-500 dark:text-gray-400 text-[1.2rem]" />
)}
</div>
<div class="flex-1">
<h4 class="font-semibold text-black dark:text-white text-sm">{sponsor.name}</h4>
<p class="text-xs text-black/60 dark:text-white/60">{sponsor.date}</p>
</div>
<div class="text-xs text-[var(--primary)] font-medium">{sponsor.amount}</div>
</div>
</div>
))}
</div>
</div>
</div>
</MainGridLayout>
<style>
.donate-card {
@apply flex flex-col p-4 rounded-lg bg-[var(--card-bg)] border border-black/10 dark:border-white/10 hover:border-black/20 dark:hover:border-white/20 transition;
}
.support-card {
@apply p-4 rounded-lg bg-[var(--card-bg)] hover:bg-black/5 dark:hover:bg-white/5 transition;
}
.qr-code-placeholder {
@apply text-center;
}
.sponsors-section {
@apply mt-6;
}
.sponsors-grid {
@apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
}
.sponsor-placeholder {
@apply transition-all duration-200 hover:scale-105;
}
.sponsor-card {
@apply transition-all duration-200 hover:shadow-md hover:scale-105;
}
.crypto-info {
@apply space-y-3;
}
.wallet-address, .bybit-uid {
@apply text-center;
}
.copy-btn {
@apply transition-colors duration-200;
}
.copy-btn:hover {
color: var(--primary);
opacity: 0.8;
}
</style>
<script>
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(function() {
// 可以添加复制成功的提示
alert('已复制到剪贴板');
}, function(err) {
console.error('复制失败: ', err);
});
}
</script>

21
src/types/data.ts Normal file
View File

@@ -0,0 +1,21 @@
export interface Sponsor {
name: string;
avatar: string | null;
date: string;
amount: string;
}
export interface Friend {
name: string;
avatar: string;
description: string;
url: string;
}
export interface SponsorsData {
sponsors: Sponsor[];
}
export interface FriendsData {
friends: Friend[];
}