81 lines
3.6 KiB
Plaintext
81 lines
3.6 KiB
Plaintext
---
|
|
import { getCollection } from 'astro:content';
|
|
const posts = await getCollection('docs');
|
|
import { basename, wrapBasename } from '@/modules/basename';
|
|
import Blank from '@/layouts/blank.astro';
|
|
---
|
|
|
|
<Blank>
|
|
<main class='min-h-screen bg-linear-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800'>
|
|
<div class='max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12'>
|
|
{/* 页面标题区域 */}
|
|
<div class='mb-12'>
|
|
<h1 class='text-4xl sm:text-5xl font-bold text-slate-900 dark:text-white mb-4 bg-clip-text bg-linear-to-r from-blue-600 to-purple-600'>📚 文档列表</h1>
|
|
<p class='text-slate-600 dark:text-slate-400 text-lg'>浏览所有可用的文档资源</p>
|
|
<div class='mt-4 h-1 w-20 bg-linear-to-r from-blue-600 to-purple-600 rounded-full'></div>
|
|
</div>
|
|
|
|
{/* 文档列表 */}
|
|
<div class='space-y-4'>
|
|
{
|
|
posts.map((post) => {
|
|
const tags = post.data.tags || [];
|
|
const postUrl = wrapBasename(`/docs/${post.id}`);
|
|
return (
|
|
<article class='group bg-white dark:bg-slate-800 rounded-xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-slate-200 dark:border-slate-700 hover:border-blue-500 dark:hover:border-blue-400'>
|
|
<div class='p-6'>
|
|
{/* 文档标题 */}
|
|
<a href={postUrl} class='block'>
|
|
<h2 class='text-xl sm:text-2xl font-semibold text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-200 mb-3'>
|
|
{post.data.title}
|
|
</h2>
|
|
</a>
|
|
|
|
{/* 文档描述(如果有) */}
|
|
{post.data.description && <p class='text-slate-600 dark:text-slate-400 mb-4 line-clamp-2'>{post.data.description}</p>}
|
|
|
|
{/* 标签列表 */}
|
|
{tags.length > 0 && (
|
|
<div class='flex flex-wrap gap-2 mt-4'>
|
|
{tags.map((tag) => (
|
|
<div class='inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors duration-200 border border-blue-200 dark:border-blue-800'>
|
|
<span class='mr-1'>#</span>
|
|
{tag}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* 阅读更多指示器 */}
|
|
<a
|
|
href={postUrl}
|
|
class='mt-4 flex items-center text-blue-600 dark:text-blue-400 text-sm font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-200'>
|
|
<span>阅读更多</span>
|
|
<svg
|
|
class='w-4 h-4 ml-1 transform group-hover:translate-x-1 transition-transform duration-200'
|
|
fill='none'
|
|
viewBox='0 0 24 24'
|
|
stroke='currentColor'>
|
|
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7' />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</article>
|
|
);
|
|
})
|
|
}
|
|
</div>
|
|
|
|
{/* 空状态 */}
|
|
{
|
|
posts.length === 0 && (
|
|
<div class='text-center py-16'>
|
|
<div class='text-6xl mb-4'>📭</div>
|
|
<p class='text-xl text-slate-600 dark:text-slate-400'>暂无文档</p>
|
|
</div>
|
|
)
|
|
}
|
|
</div>
|
|
</main>
|
|
</Blank>
|