zgy/zhaoguiyang.site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(blog): refactor blog components and improve category/tag handling

Browse Source 
- Add new CategoryCard and TagCard components to centralize UI logic
- Convert BlogList from React to Astro component
- Improve category and tag matching by using IDs from frontmatter
- Update all blog pages to use new components
- Add line-height to global styles for better readability
This commit is contained in:
joyzhao
2025-06-19 14:45:29 +08:00
parent deb80c0df7
commit 429b13985f
11 changed files with 545 additions and 363 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/pages/zh/blog/index.astro
View File

@@ -1,9 +1,11 @@
---
import BlogLayout from '../../../layouts/BlogLayout.astro';
import BlogList from '../../../components/BlogList.tsx';
import BlogList from '../../../components/blog/BlogList.astro';
import CategoryCard from '../../../components/blog/CategoryCard.astro';
import TagCard from '../../../components/blog/TagCard.astro';
import { type BlogPost } from '@/types';
import { type Lang } from '@/i18n/utils';
import { defaultLang } from '@/i18n/ui';
import { type BlogPost } from '@/types';
// 使用Astro.currentLocale获取当前语言环境
const lang = Astro.currentLocale as Lang || defaultLang;
@@ -91,46 +93,17 @@ const tags = Array.from(allTags).map(tag => `# ${tag}`).sort();
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
<!-- 侧边栏 -->
<div class="lg:col-span-1 space-y-8">
<!-- 分类 -->
<div class="bg-card/50 backdrop-blur-sm rounded-2xl p-6 border border-border">
<h3 class="text-xl font-semibold text-card-foreground mb-4 flex items-center">
<svg class="w-5 h-5 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14-7l2 2-2 2m2-2H9m10 0V9M5 19l2-2-2-2m2 2H3m2 0v2"></path>
</svg>
分类
</h3>
<div class="space-y-2">
{categories.map((category) => (
<a href={`/zh/blog/categories/${encodeURIComponent(category.toLowerCase())}`}
class="block text-muted-foreground hover:text-purple-500 transition-colors duration-200">
{category}
</a>
))}
</div>
</div>
<!-- 分类卡片 -->
<CategoryCard lang="zh" />
<!-- 标签卡片 -->
<TagCard lang="zh" />
<!-- 标签 -->
<div class="bg-card/50 backdrop-blur-sm rounded-2xl p-6 border border-border">
<h3 class="text-xl font-semibold text-card-foreground mb-4 flex items-center">
<svg class="w-5 h-5 mr-2 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
</svg>
# 标签
</h3>
<div class="flex flex-wrap gap-2">
{tags.map((tag) => (
<a href={`/zh/blog/tags/${encodeURIComponent(tag.slice(2).toLowerCase())}`}
class="inline-block px-3 py-1 text-sm bg-muted text-muted-foreground rounded-full hover:bg-purple-500/20 hover:text-purple-500 transition-all duration-200">
{tag}
</a>
))}
</div>
</div>
</div>
<!-- 博客文章 -->
<div class="lg:col-span-3">
<BlogList posts={sortedBlogPosts} lang="zh" client:load />
<BlogList posts={sortedBlogPosts} lang="zh" />
</div>
</div>
</div>