KennethCheng/llm_log_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增主页路由并动态渲染文档网格

Browse Source
This commit is contained in:
kennethcheng 2026-04-27 14:29:28 +08:00
parent 1da0d3c895
commit b50b87a75f
1 changed files with 23 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/pages/index.astro
View File

@ -1,17 +1,26 @@
---
import { getCollection } from 'astro:content';
import BaseLayout from '../layouts/BaseLayout.astro';
const docs = await getCollection('docs');
---
<BaseLayout title="文档中心 | Home">
<div class="max-w-5xl mx-auto">
<div class="mb-12">
<h1 class="text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white mb-4">🚀 知识库主页</h1>
<p class="text-lg text-gray-600 dark:text-gray-400">请从左侧导航栏或下方卡片中选择文档开始阅读。</p>
</div>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<h1>Astro</h1>
</body>
</html>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{docs.map(doc => (
<a href={`/docs/${doc.id}`} class="group block p-6 bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-800 hover:border-blue-500 dark:hover:border-blue-500 hover:shadow-xl transition-all relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-r from-blue-500/0 to-blue-500/0 group-hover:from-blue-500/5 group-hover:to-purple-500/5 transition-all"></div>
<h2 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 mb-2 transition-colors relative z-10">{doc.data.title || doc.id}</h2>
<p class="text-gray-500 dark:text-gray-400 text-sm relative z-10 line-clamp-2">
{doc.data.description || '点击查看详情文档内容...'}
</p>
</a>
))}
</div>
</div>
</BaseLayout>