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

feat(页面): 添加文章帮助反馈区域并优化赞助页面布局

Browse Source 
在文章页添加帮助反馈区域，包含联系和赞助按钮
优化赞助页面的布局和间距，调整二维码尺寸和卡片样式
This commit is contained in:
afoim
2025-08-24 00:24:16 +08:00
parent 319da14c70
commit 74234cb6b0
2 changed files with 37 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/pages/donate.astro
View File

@@ -12,8 +12,8 @@ import { Icon } from "astro-icon/components";
<h1 class="text-2xl font-bold text-black dark:text-white">赞助支持</h1>
</div>
<div class="mb-8">
<p class="text-lg text-black/80 dark:text-white/80 mb-4">
<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">
@@ -21,7 +21,7 @@ import { Icon } from "astro-icon/components";
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
<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">
@@ -34,7 +34,7 @@ import { Icon } from "astro-icon/components";
</div>
</div>
<div class="qr-code-placeholder">
<img src="/donate/alipay.svg" alt="支付宝二维码" class="w-84 h-84 mx-auto rounded-lg" />
<img src="/donate/alipay.svg" alt="支付宝二维码" class="w-48 h-48 mx-auto rounded-lg" />
</div>
</div>
@@ -50,7 +50,7 @@ import { Icon } from "astro-icon/components";
</div>
</div>
<div class="qr-code-placeholder">
<img src="/donate/wechat.svg" alt="微信支付二维码" class="w-84 h-84 mx-auto rounded-lg" />
<img src="/donate/wechat.svg" alt="微信支付二维码" class="w-48 h-48 mx-auto rounded-lg" />
</div>
</div>
@@ -58,9 +58,11 @@ import { Icon } from "astro-icon/components";
</div>
</div>
<br>
<!-- 其他支持方式 -->
<div class="mb-8">
<h2 class="text-xl font-bold text-black dark:text-white mb-4">其他支持方式</h2>
<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">
@@ -93,16 +95,14 @@ import { Icon } from "astro-icon/components";
</div>
</div>
</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">
<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">
<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>
<br>
<div class="sponsors-grid">
<!-- 已赞助的小伙伴 -->
@@ -201,7 +201,7 @@ import { Icon } from "astro-icon/components";
<style>
.donate-card {
@apply flex flex-col p-6 rounded-lg bg-[var(--card-bg)] border border-black/10 dark:border-white/10 hover:border-black/20 dark:hover:border-white/20 transition;
@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 {
@@ -212,12 +212,8 @@ import { Icon } from "astro-icon/components";
@apply text-center;
}
.thank-you-section {
@apply mt-8;
}
.sponsors-section {
@apply mt-8;
@apply mt-6;
}
.sponsors-grid {

23
src/pages/posts/[...slug].astro
View File

@@ -121,6 +121,29 @@ const jsonLd = {
{licenseConfig.enable && <License title={entry.data.title} slug={entry.slug} pubDate={entry.data.published} class="mb-6 rounded-xl license-container onload-animation"></License>}
<!-- 文章帮助反馈区域 -->
<div class="mb-4 p-3 rounded-lg bg-[var(--license-block-bg)] border border-[var(--line-divider)] onload-animation">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="h-4 w-4 rounded bg-[var(--primary)] flex items-center justify-center">
<Icon name="material-symbols:help-outline" class="text-[0.75rem] text-white dark:text-black/70"></Icon>
</div>
<p class="text-black/80 dark:text-white/80 text-sm">这篇文章是否对你有帮助？</p>
</div>
<div class="flex gap-2">
<a href="/posts/pin/" class="group flex items-center gap-1 px-3 py-1.5 rounded bg-[var(--btn-regular-bg)] hover:bg-[var(--btn-regular-bg-hover)] active:bg-[var(--btn-regular-bg-active)] text-[var(--btn-content)] text-xs font-medium transition-all active:scale-95">
<Icon name="material-symbols:contact-mail-outline" class="text-[0.875rem] group-hover:scale-110 transition-transform"></Icon>
联系
</a>
<a href="/donate/" class="group flex items-center gap-1 px-3 py-1.5 rounded bg-[var(--primary)] hover:bg-[oklch(0.65_0.16_var(--hue))] active:bg-[oklch(0.60_0.18_var(--hue))] text-white dark:text-black/80 text-xs font-medium transition-all active:scale-95">
<Icon name="material-symbols:favorite-outline" class="text-[0.875rem] group-hover:scale-110 transition-transform"></Icon>
赞助
</a>
</div>
</div>
</div>
<!-- Giscus 评论区 -->
<script src="https://giscus.app/client.js"
data-repo="afoim/giscus-fuwari"