120 lines
5.2 KiB
Plaintext
120 lines
5.2 KiB
Plaintext
---
|
|
import BaseLayout from '../../layouts/BaseLayout.astro';
|
|
import { getCollection } from 'astro:content';
|
|
|
|
// 获取所有非草稿文章
|
|
const allPosts = await getCollection('blog', ({ data }) => {
|
|
return !data.draft;
|
|
});
|
|
|
|
// 按日期排序
|
|
const sortedPosts = allPosts.sort((a, b) =>
|
|
b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
|
|
);
|
|
|
|
// 格式化日期
|
|
const formatDate = (date: Date) => {
|
|
return date.toLocaleDateString('zh-CN', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric',
|
|
});
|
|
};
|
|
---
|
|
|
|
<BaseLayout title="博客文章 - NovaBlog">
|
|
<div class="py-12">
|
|
<div class="content-width">
|
|
<!-- Page Header -->
|
|
<div class="text-center mb-12">
|
|
<h1 class="text-3xl md:text-4xl font-bold mb-4">博客文章</h1>
|
|
<p class="text-foreground/60">探索技术，记录成长</p>
|
|
</div>
|
|
|
|
{sortedPosts.length > 0 ? (
|
|
<div class="max-w-4xl mx-auto space-y-8">
|
|
{sortedPosts.map((post) => (
|
|
<article class="card group">
|
|
<a href={`/blog/${post.slug || post.id}`} class="block">
|
|
<div class="flex flex-col md:flex-row gap-6">
|
|
<!-- 封面图 -->
|
|
{post.data.heroImage ? (
|
|
<div class="md:w-48 flex-shrink-0">
|
|
<div class="aspect-video md:aspect-square rounded-lg overflow-hidden">
|
|
<img
|
|
src={post.data.heroImage}
|
|
alt={post.data.heroAlt || post.data.title}
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div class="md:w-48 flex-shrink-0 hidden md:block">
|
|
<div class="aspect-square rounded-lg bg-gradient-to-br from-primary-100 to-accent/20 dark:from-primary-900 dark:to-accent/10 flex items-center justify-center">
|
|
<svg class="w-12 h-12 text-primary-300 dark:text-primary-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<!-- 内容 -->
|
|
<div class="flex-1 min-w-0">
|
|
<!-- 标签 -->
|
|
<div class="flex flex-wrap items-center gap-2 mb-2">
|
|
{post.data.category && (
|
|
<span class="tag text-xs bg-primary-500 text-white">
|
|
{post.data.category}
|
|
</span>
|
|
)}
|
|
{(post.data.tags || []).slice(0, 3).map((tag: string) => (
|
|
<span class="tag text-xs">#{tag}</span>
|
|
))}
|
|
</div>
|
|
|
|
<!-- 标题 -->
|
|
<h2 class="text-xl font-semibold mb-2 group-hover:text-primary-500 transition-colors">
|
|
{post.data.title}
|
|
</h2>
|
|
|
|
<!-- 描述 -->
|
|
{post.data.description && (
|
|
<p class="text-foreground/60 text-sm mb-4 line-clamp-2">
|
|
{post.data.description}
|
|
</p>
|
|
)}
|
|
|
|
<!-- 元信息 -->
|
|
<div class="flex items-center gap-4 text-xs text-foreground/40">
|
|
<span class="flex items-center gap-1">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
{formatDate(post.data.pubDate)}
|
|
</span>
|
|
<span class="flex items-center gap-1">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
|
</svg>
|
|
{post.data.author}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</article>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div class="text-center py-16 text-foreground/40">
|
|
<svg class="w-16 h-16 mx-auto mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
<p class="mb-2">暂无文章</p>
|
|
<p class="text-sm">请在 src/content/blog/ 目录下添加 Markdown 文件</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</BaseLayout> |