5fcf7a9d33
Implement a reusable Container component with size variants (sm, md, lg, xl, full) to standardize content width across the application. Replace all manual container divs with the new component for consistent styling and maintainability.
99 lines
3.8 KiB
Plaintext
99 lines
3.8 KiB
Plaintext
---
|
||
import BlogLayout from '../../../layouts/BlogLayout.astro';
|
||
import BlogList from '../../../components/blog/BlogList.astro';
|
||
import CategoryCard from '../../../components/blog/CategoryCard.astro';
|
||
import TagCard from '../../../components/blog/TagCard.astro';
|
||
import Container from '../../../components/ui/Container';
|
||
import { type BlogPost } from '@/types';
|
||
import { type Lang } from '@/i18n/utils';
|
||
import { defaultLang } from '@/i18n/ui';
|
||
import { sortPostsByDate, extractCategories, extractTags } from '@/utils/blog-utils';
|
||
|
||
// 使用Astro.currentLocale获取当前语言环境
|
||
const lang = Astro.currentLocale as Lang || defaultLang;
|
||
|
||
// 使用import.meta.glob读取所有中文博客文章
|
||
const allPosts = await import.meta.glob('./posts/*.md', { eager: true });
|
||
|
||
// 处理博客文章数据
|
||
const blogPosts: BlogPost[] = Object.values(allPosts).map((post: any) => {
|
||
const slug = post.url?.split('/').filter(Boolean).pop() || '';
|
||
|
||
// 获取文章的默认图片，如果frontmatter中没有指定
|
||
const defaultImage = "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=400&h=250&fit=crop&crop=center";
|
||
|
||
return {
|
||
title: post.frontmatter.title,
|
||
description: post.frontmatter.description || '',
|
||
image: post.frontmatter.image || defaultImage,
|
||
slug: slug,
|
||
tags: post.frontmatter.tags || [],
|
||
tagId: post.frontmatter.tagId || [],
|
||
category: Array.isArray(post.frontmatter.category) ? post.frontmatter.category : post.frontmatter.category ? [post.frontmatter.category] : [],
|
||
categoryId: Array.isArray(post.frontmatter.categoryId) ? post.frontmatter.categoryId : post.frontmatter.categoryId ? [post.frontmatter.categoryId] : [],
|
||
date: post.frontmatter.date || post.frontmatter.pubDate || '',
|
||
readTime: post.frontmatter.readTime || post.frontmatter.readingTime || '5分钟阅读',
|
||
};
|
||
});
|
||
|
||
// 使用工具函数按日期排序
|
||
const sortedBlogPosts = sortPostsByDate(blogPosts);
|
||
|
||
// 提取所有文章的分类和标签信息（用于侧边栏）
|
||
const allPostsArray = Object.values(allPosts).map((post: any) => ({
|
||
category: post.frontmatter.category || [],
|
||
categoryId: post.frontmatter.categoryId || [],
|
||
tags: post.frontmatter.tags || [],
|
||
tagId: post.frontmatter.tagId || []
|
||
}));
|
||
|
||
// 使用工具函数提取分类和标签
|
||
const categories = extractCategories(allPostsArray);
|
||
const tags = extractTags(allPostsArray);
|
||
|
||
---
|
||
|
||
<BlogLayout title="博客 - 赵桂阳" description="深入我对编程、技术趋势和开发者生活的思考。探索我的最新文章。">
|
||
<main class="min-h-screen">
|
||
<!-- 头部区域 -->
|
||
<Container client:load size="md" className="pt-24 pb-12">
|
||
<div class="text-center mb-16">
|
||
<h1 class="text-5xl md:text-6xl font-bold bg-gradient-to-r from-foreground via-purple-600 to-purple-800 dark:from-foreground dark:via-purple-200 dark:to-purple-300 bg-clip-text text-transparent mb-6">
|
||
我的<span class="text-purple-500">博客</span>
|
||
</h1>
|
||
<p class="text-xl text-muted-foreground max-w-3xl mx-auto">
|
||
深入我对编程、技术趋势和开发者生活的思考。探索我的最新文章。
|
||
</p>
|
||
</div>
|
||
</Container>
|
||
|
||
<!-- 主要内容 -->
|
||
<Container client:load size="md" className="pb-20">
|
||
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
||
<!-- 侧边栏 -->
|
||
<div class="lg:col-span-1 space-y-8">
|
||
<!-- 分类卡片 -->
|
||
<CategoryCard lang="zh" />
|
||
|
||
<!-- 标签卡片 -->
|
||
<TagCard lang="zh" />
|
||
|
||
</div>
|
||
|
||
<!-- 博客文章 -->
|
||
<div class="lg:col-span-3">
|
||
<BlogList posts={sortedBlogPosts} lang="zh" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</BlogLayout>
|
||
|
||
<style>
|
||
.line-clamp-3 {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 3;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
</style> |