102 lines
3.9 KiB
Plaintext
102 lines
3.9 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.astro";
|
||
import { type BlogPost } from '@/types';
|
||
import { useTranslations } from '@/i18n/utils';
|
||
import { type Lang } from '@/types/i18n';
|
||
import { defaultLang } from '@/i18n/ui';
|
||
import { sortPostsByDate, extractCategories, extractTags } from '@/utils/blog-utils';
|
||
|
||
// 使用Astro.currentLocale获取当前语言环境
|
||
const lang = Astro.currentLocale as Lang || defaultLang;
|
||
const t = useTranslations(lang);
|
||
|
||
// 使用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="博客 - Joy Zhao" description="关于 AI 产品、全栈开发和公开构建的思考。探索技术与产品构建的交汇点。">
|
||
<main class="min-h-screen">
|
||
<!-- 头部区域 -->
|
||
<Container 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-primary to-primary dark:from-foreground dark:via-blue-200 dark:to-orange-300 bg-clip-text text-transparent mb-6">
|
||
<span class="text-primary">博客</span>
|
||
</h1>
|
||
<p class="text-xl text-muted-foreground page-content-main">
|
||
关于 AI 产品、全栈开发和公开构建的思考。探索技术与产品构建的交汇点。
|
||
</p>
|
||
</div>
|
||
</Container>
|
||
|
||
<!-- 主要内容 -->
|
||
<Container 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>
|
||
</Container>
|
||
</main>
|
||
</BlogLayout>
|
||
|
||
<style>
|
||
.line-clamp-3 {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 3;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
</style>
|