388 lines
21 KiB
Plaintext
388 lines
21 KiB
Plaintext
---
|
||
import { getCollection } from 'astro:content';
|
||
import type { CollectionEntry } from 'astro:content';
|
||
import { contentStructure, getRelativePath, getBasename, getDirPath } from '../../content.config';
|
||
import Layout from '@/components/Layout.astro';
|
||
import Breadcrumb from '@/components/Breadcrumb.astro';
|
||
import ArticleTimeline from '@/components/ArticleTimeline.astro';
|
||
|
||
// 预渲染页面，但允许客户端导航
|
||
export const prerender = false;
|
||
|
||
// 获取所有文章，并按日期排序
|
||
const articles: CollectionEntry<'articles'>[] = await getCollection('articles');
|
||
const sortedArticles = articles.sort(
|
||
(a, b) => b.data.date.getTime() - a.data.date.getTime()
|
||
);
|
||
|
||
// 获取所有标签
|
||
const allTags = articles.flatMap(article => article.data.tags || []);
|
||
const tags = [...new Set(allTags)].sort();
|
||
|
||
// 获取内容结构
|
||
const { sections } = contentStructure;
|
||
|
||
// 获取当前路径参数
|
||
const path = Astro.url.searchParams.get('path') || '';
|
||
const pathSegments = path ? decodeURIComponent(path).split('/') : [];
|
||
|
||
// 获取标签参数
|
||
const tagFilter = Astro.url.searchParams.get('tag') || '';
|
||
|
||
// 获取视图模式参数
|
||
const viewMode = Astro.url.searchParams.get('view') || 'grid';
|
||
|
||
// 根据路径获取当前目录
|
||
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 = '';
|
||
let currentArticles: string[] = [];
|
||
|
||
// 遍历路径段，逐级查找
|
||
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);
|
||
|
||
// 如果有标签过滤，则过滤文章
|
||
let filteredArticles = sortedArticles;
|
||
let pageTitle = currentPath ? currentPath : '文章列表';
|
||
|
||
if (tagFilter) {
|
||
filteredArticles = sortedArticles.filter(article =>
|
||
article.data.tags && article.data.tags.includes(tagFilter)
|
||
);
|
||
pageTitle = `标签: ${tagFilter}`;
|
||
}
|
||
|
||
// 获取面包屑导航
|
||
interface Breadcrumb {
|
||
name: string;
|
||
path: string;
|
||
}
|
||
|
||
|
||
---
|
||
|
||
<Layout>
|
||
<div class="bg-gradient-to-b from-primary-50 to-white dark:from-gray-900 dark:to-gray-800 min-h-screen">
|
||
<main class={`mx-auto px-4 py-6 ${viewMode === 'grid' ? 'max-w-6xl' : 'max-w-4xl'}`}>
|
||
<!-- 导航栏 -->
|
||
<div class="bg-white dark:bg-gray-800 rounded-xl mb-4">
|
||
<div class="px-4 py-3">
|
||
<div class="flex items-center justify-between !h-10">
|
||
<Breadcrumb
|
||
pageType="articles"
|
||
pathSegments={pathSegments}
|
||
tagFilter={tagFilter}
|
||
/>
|
||
|
||
<!-- 视图切换按钮 -->
|
||
<div class="flex items-center gap-px">
|
||
<a href={`/articles?${new URLSearchParams({...Object.fromEntries(Astro.url.searchParams), view: 'grid'}).toString()}`}
|
||
class={`px-3 py-1.5 transition-colors flex items-center gap-1 ${
|
||
viewMode === 'grid'
|
||
? 'text-primary-600'
|
||
: 'text-gray-400 hover:text-gray-500'
|
||
}`}>
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
||
</svg>
|
||
</a>
|
||
<a href={`/articles?${new URLSearchParams({...Object.fromEntries(Astro.url.searchParams), view: 'timeline'}).toString()}`}
|
||
class={`px-3 py-1.5 transition-colors flex items-center gap-1 ${
|
||
viewMode === 'timeline'
|
||
? 'text-primary-600'
|
||
: 'text-gray-400 hover:text-gray-500'
|
||
}`}>
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" 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>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{viewMode === 'grid' ? (
|
||
<>
|
||
<!-- 内容卡片网格 -->
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
|
||
{/* 上一级目录卡片 - 仅在浏览目录时显示 */}
|
||
{!tagFilter && pathSegments.length > 0 && (
|
||
<a href={`/articles${pathSegments.length > 1 ? `?path=${encodeURIComponent(pathSegments.slice(0, -1).join('/'))}` : ''}`}
|
||
class="group flex flex-col h-full p-4 border border-primary-100 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800 hover:shadow-xl transition-all duration-300 hover:border-primary-300 dark:hover:border-primary-600">
|
||
<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 transition-colors">
|
||
<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 transition-colors">返回上级目录</div>
|
||
<div class="text-xs text-gray-500">返回上一级</div>
|
||
</div>
|
||
<div class="text-primary-500 opacity-0 group-hover:opacity-100 transition-opacity">
|
||
<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>
|
||
)}
|
||
|
||
{/* 目录卡片 - 仅在浏览目录时显示 */}
|
||
{!tagFilter && currentSections.map(section => {
|
||
// 确保目录链接正确生成
|
||
const dirLink = currentPath ? `${currentPath}/${section.name}` : section.name;
|
||
|
||
return (
|
||
<a href={`/articles?path=${encodeURIComponent(dirLink)}`}
|
||
class="group flex flex-col h-full p-4 border border-primary-100 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800 hover:shadow-xl transition-all duration-300 hover:border-primary-300 dark:hover:border-primary-600">
|
||
<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 transition-colors">
|
||
<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 transition-colors 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 transition-opacity">
|
||
<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>
|
||
);
|
||
})}
|
||
|
||
{/* 文章卡片 - 根据是否有标签过滤显示不同内容 */}
|
||
{tagFilter ? (
|
||
// 显示标签过滤后的文章
|
||
filteredArticles.map(article => (
|
||
<a href={`/articles/${article.id}`}
|
||
class="group flex flex-col h-full p-4 border border-primary-100 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800 hover:shadow-xl transition-all duration-300 hover:border-primary-300 dark:hover:border-primary-600">
|
||
<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 transition-colors">
|
||
<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">
|
||
<h3 class="font-bold text-base text-gray-800 dark:text-gray-100 group-hover:text-primary-700 dark:group-hover:text-primary-300 transition-colors line-clamp-2">{article.data.title}</h3>
|
||
{article.data.summary && (
|
||
<p class="text-xs text-gray-600 mt-1 line-clamp-2">{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">阅读全文</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
))
|
||
) : (
|
||
// 显示当前目录的文章
|
||
currentArticles.map(articlePath => {
|
||
// 获取文章ID
|
||
const articleId = getRelativePath(articlePath);
|
||
|
||
// 尝试不同的方式匹配文章
|
||
const article = articles.find(a => {
|
||
// 1. 直接匹配完整路径
|
||
if (a.id === articleId) {
|
||
return true;
|
||
}
|
||
|
||
// 2. 匹配文件名（不含路径和扩展名）
|
||
const baseName = getBasename(articleId);
|
||
if (a.id === baseName) {
|
||
return true;
|
||
}
|
||
|
||
// 3. 尝试匹配相对路径的一部分
|
||
const articleParts = articleId.split('/');
|
||
const fileName = articleParts[articleParts.length - 1];
|
||
if (a.id.endsWith(fileName)) {
|
||
return true;
|
||
}
|
||
|
||
// 4. 移除.md扩展名后匹配
|
||
const idWithoutExt = articleId.replace(/\.md$/, '');
|
||
if (a.id === idWithoutExt) {
|
||
return true;
|
||
}
|
||
|
||
// 5. 处理多级目录结构
|
||
// 如果文章ID包含目录路径，尝试匹配最后的文件名部分
|
||
const articlePathParts = articlePath.split('/');
|
||
const articleFileName = articlePathParts[articlePathParts.length - 1];
|
||
const articleIdParts = a.id.split('/');
|
||
const articleIdFileName = articleIdParts[articleIdParts.length - 1];
|
||
|
||
if (articleFileName === articleIdFileName) {
|
||
return true;
|
||
}
|
||
|
||
// 6. 移除扩展名后比较文件名
|
||
const fileNameWithoutExt = articleFileName.replace(/\.md$/, '');
|
||
if (articleIdFileName === fileNameWithoutExt) {
|
||
return true;
|
||
}
|
||
|
||
return false;
|
||
});
|
||
|
||
if (!article) {
|
||
return (
|
||
<div class="flex flex-col h-full p-4 border border-red-200 rounded-xl bg-red-50">
|
||
<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">ID: {articleId}</p>
|
||
<div class="text-xs text-red-500 mt-2 line-clamp-1">
|
||
可用文章: {articles.map(a => a.id).join(', ')}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<a href={`/articles/${article.id}`}
|
||
class="group flex flex-col h-full p-4 border border-primary-100 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800 hover:shadow-xl transition-all duration-300 hover:border-primary-300 dark:hover:border-primary-600">
|
||
<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 transition-colors">
|
||
<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">
|
||
<h3 class="font-bold text-base text-gray-800 dark:text-gray-100 group-hover:text-primary-700 dark:group-hover:text-primary-300 transition-colors line-clamp-2">{article.data.title}</h3>
|
||
{article.data.summary && (
|
||
<p class="text-xs text-gray-600 mt-1 line-clamp-2">{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">阅读全文</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
);
|
||
})
|
||
)}
|
||
</div>
|
||
|
||
{/* 空内容提示 */}
|
||
{((tagFilter && filteredArticles.length === 0) || (!tagFilter && currentSections.length === 0 && currentArticles.length === 0)) && (
|
||
<div class="text-center py-16 bg-white rounded-xl shadow-sm 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">
|
||
{tagFilter ? `没有找到标签为 "${tagFilter}" 的文章` : '此目录为空'}
|
||
</h3>
|
||
<p class="text-gray-500 max-w-md mx-auto">
|
||
{tagFilter ? '请尝试其他标签或返回文章列表' : '此目录下暂无内容，请浏览其他目录或返回上一级'}
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
<!-- 标签过滤器 -->
|
||
<div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-sm">
|
||
<h2 class="text-2xl font-bold mb-6 text-primary-900 dark:text-primary-100 flex items-center">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
|
||
</svg>
|
||
文章标签
|
||
</h2>
|
||
|
||
<div class="flex flex-wrap gap-2">
|
||
{tags.map(tag => {
|
||
const isActive = tag === tagFilter;
|
||
return (
|
||
<a href={`/articles?tag=${tag}`}
|
||
class={`py-2 px-4 rounded-full text-sm font-medium transition-all duration-200 ${
|
||
isActive
|
||
? 'bg-primary-600 text-white dark:bg-primary-500 dark:text-gray-900 hover:bg-primary-700 dark:hover:bg-primary-400'
|
||
: 'bg-primary-50 dark:bg-gray-700 text-primary-700 dark:text-primary-200 hover:bg-primary-100 dark:hover:bg-gray-600'
|
||
}`}>
|
||
{tag}
|
||
</a>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</>
|
||
) : (
|
||
<ArticleTimeline title="" itemsPerPage={10} />
|
||
)}
|
||
</main>
|
||
</div>
|
||
</Layout> |