refactor(posts): 合并文章反馈和编辑区域并优化样式

- 将GitHub编辑链接合并到反馈区域下方
- 统一图标和间距样式
- 移除冗余的容器元素
This commit is contained in:
二叉树树
2025-09-05 07:31:48 +08:00
parent 9a4fb5724d
commit aa6e6fe390
3 changed files with 33 additions and 30 deletions

View File

@@ -38,7 +38,6 @@
"astro": "5.7.9", "astro": "5.7.9",
"astro-expressive-code": "^0.41.3", "astro-expressive-code": "^0.41.3",
"astro-icon": "^1.1.5", "astro-icon": "^1.1.5",
"glob": "^11.0.3",
"hastscript": "^9.0.1", "hastscript": "^9.0.1",
"katex": "^0.16.22", "katex": "^0.16.22",
"markdown-it": "^14.1.0", "markdown-it": "^14.1.0",

View File

@@ -21,7 +21,7 @@ body使用 `from-data` key为 `file` vlaue选择一个图片文件不宜
示例Curl 示例Curl
```firestore-security-rules ```bash
curl --location 'https://ipfs-relay.crossbell.io/upload' \ curl --location 'https://ipfs-relay.crossbell.io/upload' \
--form 'file=@"/C:/Users/AcoFork/Pictures/b_53bb4f7fa91d684e72b666504e3fcc1897.jpg"' --form 'file=@"/C:/Users/AcoFork/Pictures/b_53bb4f7fa91d684e72b666504e3fcc1897.jpg"'
``` ```

View File

@@ -116,10 +116,35 @@ const jsonLd = {
<Content /> <Content />
</Markdown> </Markdown>
<!-- GitHub 编辑链接 --> <!-- 文章反馈与编辑区域 -->
<div class="mb-4 p-4 rounded-lg bg-[var(--license-block-bg)] border border-[var(--line-divider)] onload-animation">
<!-- 反馈区域 -->
<div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-2">
<div class="h-5 w-5 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>
{gitHubEditConfig.enable && ( {gitHubEditConfig.enable && (
<div class="mb-6 p-4 rounded-xl bg-[var(--license-block-bg)] border border-[var(--line-divider)] onload-animation"> <>
<div class="flex items-center gap-3"> <!-- 分隔线 -->
<div class="border-t border-[var(--line-divider)] my-3"></div>
<!-- GitHub编辑区域 -->
<div class="flex items-start gap-3">
<div class="h-5 w-5 rounded bg-[var(--primary)] flex items-center justify-center"> <div class="h-5 w-5 rounded bg-[var(--primary)] flex items-center justify-center">
<Icon name="material-symbols:edit-outline" class="text-[0.875rem] text-white dark:text-black/70"></Icon> <Icon name="material-symbols:edit-outline" class="text-[0.875rem] text-white dark:text-black/70"></Icon>
</div> </div>
@@ -137,29 +162,8 @@ const jsonLd = {
</a> </a>
</div> </div>
</div> </div>
</div> </>
)} )}
<!-- 文章帮助反馈区域 -->
<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> </div>
{licenseConfig.enable && <License title={entry.data.title} slug={entry.slug} pubDate={entry.data.published} class="mb-6 rounded-xl license-container onload-animation"></License>} {licenseConfig.enable && <License title={entry.data.title} slug={entry.slug} pubDate={entry.data.published} class="mb-6 rounded-xl license-container onload-animation"></License>}