235 lines
12 KiB
Plaintext
235 lines
12 KiB
Plaintext
---
|
||
import { getCollection } from 'astro:content';
|
||
import type { CollectionEntry } from 'astro:content';
|
||
import { contentStructure } from '../../content.config';
|
||
import Layout from "@/components/Layout.astro";
|
||
import Breadcrumb from "@/components/Breadcrumb.astro";
|
||
|
||
// 启用静态预渲染
|
||
export const prerender = true;
|
||
|
||
// 获取路径参数
|
||
const path = Astro.props.path || '';
|
||
const pathSegments = path ? path.split('/') : [];
|
||
|
||
// 获取所有文章，并按日期排序
|
||
const articles: CollectionEntry<'articles'>[] = await getCollection('articles');
|
||
|
||
// 获取内容结构
|
||
const { sections } = contentStructure;
|
||
|
||
// 根据路径获取当前目录
|
||
function getCurrentSection(pathSegments: string[]) {
|
||
// 过滤掉空字符串
|
||
const filteredSegments = pathSegments.filter(segment => segment.trim() !== '');
|
||
|
||
if (filteredSegments.length === 0) {
|
||
return { sections, articles: contentStructure.articles, currentPath: '' };
|
||
}
|
||
|
||
let currentSections = sections;
|
||
let currentPath = '';
|
||
|
||
// 遍历路径段，逐级查找
|
||
for (let i = 0; i < filteredSegments.length; i++) {
|
||
const segment = filteredSegments[i];
|
||
|
||
// 查找当前段对应的目录
|
||
const foundSection = currentSections.find(s => s.name === segment);
|
||
|
||
if (!foundSection) {
|
||
return { sections: [], articles: [], currentPath: '' };
|
||
}
|
||
|
||
// 更新当前路径
|
||
currentPath = currentPath ? `${currentPath}/${segment}` : segment;
|
||
|
||
// 如果是最后一个段，返回该目录的内容
|
||
if (i === filteredSegments.length - 1) {
|
||
return {
|
||
sections: foundSection.sections,
|
||
articles: foundSection.articles,
|
||
currentPath
|
||
};
|
||
}
|
||
|
||
// 否则继续向下查找
|
||
currentSections = foundSection.sections;
|
||
}
|
||
|
||
// 默认返回空
|
||
return { sections: [], articles: [], currentPath: '' };
|
||
}
|
||
|
||
// 获取当前目录内容
|
||
const { sections: currentSections, articles: currentArticles, currentPath } = getCurrentSection(pathSegments);
|
||
|
||
// 设置页面标题
|
||
const pageTitle = currentPath ? currentPath : '文章列表';
|
||
|
||
---
|
||
|
||
<Layout>
|
||
<div class="bg-gray-50 dark:bg-dark-bg min-h-screen">
|
||
<main class="mx-auto px-4 sm:px-6 lg:px-8 py-6 max-w-7xl">
|
||
<!-- 页面标题 -->
|
||
<h1 class="sr-only">{pageTitle}</h1>
|
||
|
||
<!-- 导航栏 -->
|
||
<div class="bg-white dark:bg-gray-800 rounded-xl mb-4 shadow-lg border border-gray-200 dark:border-gray-700">
|
||
<div class="px-4 py-3">
|
||
<Breadcrumb
|
||
pageType="grid"
|
||
pathSegments={pathSegments}
|
||
path={currentPath}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 内容卡片网格 -->
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
|
||
{/* 上一级目录卡片 - 仅在浏览目录时显示 */}
|
||
{pathSegments.length > 0 && (
|
||
<a href={`/articles/${pathSegments.length > 1 ? pathSegments.slice(0, -1).join('/') : ''}/`}
|
||
class="group flex flex-col h-full p-5 border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800 hover:shadow-xl hover:-translate-y-1 shadow-lg"
|
||
data-astro-prefetch="hover">
|
||
<div class="flex items-center">
|
||
<div class="w-10 h-10 flex items-center justify-center rounded-lg bg-primary-100 text-primary-600 group-hover:bg-primary-200">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 17l-5-5m0 0l5-5m-5 5h12" />
|
||
</svg>
|
||
</div>
|
||
<div class="ml-3 flex-1">
|
||
<div class="font-bold text-base text-gray-800 dark:text-gray-100 group-hover:text-primary-700 dark:group-hover:text-primary-300">返回上级目录</div>
|
||
<div class="text-xs text-gray-500">返回上一级</div>
|
||
</div>
|
||
<div class="text-primary-500 opacity-0 group-hover:opacity-100">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
)}
|
||
|
||
{/* 目录卡片 */}
|
||
{currentSections.map(section => {
|
||
// 确保目录链接正确生成
|
||
const dirLink = currentPath ? `${currentPath}/${section.name}` : section.name;
|
||
|
||
return (
|
||
<a href={`/articles/${dirLink}/`}
|
||
class="group flex flex-col h-full p-5 border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800 hover:shadow-xl hover:-translate-y-1 shadow-lg"
|
||
data-astro-prefetch="viewport">
|
||
<div class="flex items-center">
|
||
<div class="w-10 h-10 flex items-center justify-center rounded-lg bg-primary-100 text-primary-600 group-hover:bg-primary-200">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z" />
|
||
</svg>
|
||
</div>
|
||
<div class="ml-3 flex-1">
|
||
<div class="font-bold text-base text-gray-800 dark:text-gray-100 group-hover:text-primary-700 dark:group-hover:text-primary-300 line-clamp-1">{section.name}</div>
|
||
<div class="text-xs text-gray-500 flex items-center mt-1">
|
||
{section.sections.length > 0 && (
|
||
<span class="flex items-center mr-3">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
|
||
</svg>
|
||
{section.sections.length} 个子目录
|
||
</span>
|
||
)}
|
||
{section.articles.length > 0 && (
|
||
<span class="flex items-center">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
|
||
{section.articles.length} 篇文章
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<div class="text-primary-500 opacity-0 group-hover:opacity-100">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
);
|
||
})}
|
||
|
||
{/* 文章卡片 */}
|
||
{currentArticles.map(articlePath => {
|
||
// 获取文章ID - 不需要移除src/content前缀，因为contentStructure中已经是相对路径
|
||
const articleId = articlePath;
|
||
|
||
// 尝试匹配文章
|
||
const article = articles.find(a => a.id === articleId);
|
||
|
||
if (!article) {
|
||
return (
|
||
<div class="flex flex-col h-full p-5 border border-red-200 rounded-xl bg-red-50 shadow-lg">
|
||
<div class="flex items-start">
|
||
<div class="w-10 h-10 flex-shrink-0 flex items-center justify-center rounded-lg bg-red-100 text-red-600">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||
</svg>
|
||
</div>
|
||
<div class="ml-3 flex-1">
|
||
<h3 class="font-bold text-base text-red-800">文章不存在</h3>
|
||
<p class="text-xs text-red-600 mt-1">
|
||
<div>原始路径: {articlePath}</div>
|
||
<div>文章ID: {articleId}</div>
|
||
<div>当前目录: {currentPath}</div>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div class="group flex flex-col h-full border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800 hover:shadow-xl hover:-translate-y-1 shadow-lg recent-article">
|
||
<a href={`/articles/${article.id}`}
|
||
class="p-5 block flex-grow"
|
||
data-astro-prefetch="viewport">
|
||
<div class="flex items-start">
|
||
<div class="w-10 h-10 flex-shrink-0 flex items-center justify-center rounded-lg bg-primary-100 text-primary-600 group-hover:bg-primary-200">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
|
||
</svg>
|
||
</div>
|
||
<div class="ml-3 flex-1 min-w-0">
|
||
<h3 class="font-bold text-base text-gray-800 dark:text-gray-100 group-hover:text-primary-700 dark:group-hover:text-primary-300 line-clamp-2">{article.data.title}</h3>
|
||
{article.body && (
|
||
<p class="text-xs text-gray-600 dark:text-gray-400 mt-1 line-clamp-2 break-words">
|
||
{article.data.summary}
|
||
</p>
|
||
)}
|
||
<div class="text-xs text-gray-500 mt-2 flex items-center justify-between">
|
||
<time datetime={article.data.date.toISOString()}>
|
||
{article.data.date.toLocaleDateString('zh-CN', {year: 'numeric', month: 'long', day: 'numeric'})}
|
||
</time>
|
||
<span class="text-primary-600 font-medium truncate ml-2">阅读全文</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
{/* 空内容提示 */}
|
||
{(currentSections.length === 0 && currentArticles.length === 0) && (
|
||
<div class="text-center py-16 bg-white rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 mb-12">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto text-primary-200 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
|
||
</svg>
|
||
<h3 class="text-2xl font-bold text-gray-700 mb-2">此目录为空</h3>
|
||
<p class="text-gray-500 max-w-md mx-auto">此目录下暂无内容，请浏览其他目录或返回上一级</p>
|
||
</div>
|
||
)}
|
||
</main>
|
||
</div>
|
||
</Layout> |