From 9ed938c9467a8da905c58de2434cfd3bdefdf3e2 Mon Sep 17 00:00:00 2001 From: lsy Date: Mon, 10 Mar 2025 14:05:40 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=96=87=E7=AB=A0=E6=89=80?= =?UTF-8?q?=E6=9C=89=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ArticleTimeline.astro | 94 ---------------------------- src/pages/articles/[...id].astro | 37 ++++++++--- src/pages/articles/index.astro | 80 +++++++++++++++++++++-- 3 files changed, 104 insertions(+), 107 deletions(-) delete mode 100644 src/components/ArticleTimeline.astro diff --git a/src/components/ArticleTimeline.astro b/src/components/ArticleTimeline.astro deleted file mode 100644 index 4d0080e..0000000 --- a/src/components/ArticleTimeline.astro +++ /dev/null @@ -1,94 +0,0 @@ ---- -import type { CollectionEntry } from 'astro:content'; - -interface Props { - title?: string; - articles: CollectionEntry<'articles'>[]; -} - -const { - title = "文章时间线", - articles = [] -} = Astro.props; - -// 按日期排序文章 -const sortedArticles = articles.sort( - (a, b) => b.data.date.getTime() - a.data.date.getTime() -); ---- - -
- {title &&

{title}

} - -
- {sortedArticles.length > 0 ? ( - sortedArticles.map((article, index) => { - const isEven = index % 2 === 0; - return ( -
- {/* 时间线节点 */} -
-
-
- - {/* 文章卡片 */} - -
- {/* 日期标签 */} - - - {/* 文章标题 */} -

- {article.data.title} -

- - {/* 文章摘要 */} - {article.data.summary && ( -

- {article.data.summary} -

- )} - - {/* 文章元信息 */} -
- {article.data.section && ( - - - - - {article.data.section} - - )} - - {article.data.tags && article.data.tags.length > 0 && ( -
- {article.data.tags.map(tag => ( - - #{tag} - - ))} -
- )} -
- - {/* 阅读更多指示器 */} -
- 阅读全文 - - - -
-
- -
- ); - }) - ) : ( -
暂无文章数据
- )} -
-
\ No newline at end of file diff --git a/src/pages/articles/[...id].astro b/src/pages/articles/[...id].astro index d7818c5..67c3d8c 100644 --- a/src/pages/articles/[...id].astro +++ b/src/pages/articles/[...id].astro @@ -1,6 +1,6 @@ --- import { getCollection, render } from 'astro:content'; -import { contentStructure, getRelativePath, getBasename, getDirPath, getOriginalPath, getSpecialPath } from '@/content.config'; +import { contentStructure, getRelativePath, getBasename, getDirPath, getSpecialPath } from '@/content.config'; import type { SectionStructure } from '@/content.config'; import Layout from '@/components/Layout.astro'; import Breadcrumb from '@/components/Breadcrumb.astro'; @@ -10,6 +10,7 @@ export const prerender = true; export async function getStaticPaths() { const articles = await getCollection('articles'); + const views = ['grid', 'timeline']; // 为每篇文章添加section信息 const articlesWithSections = articles.map(article => { @@ -67,23 +68,41 @@ export async function getStaticPaths() { }); // 为每篇文章生成路由参数 - return articlesWithSections.map(article => { + const paths = []; + for (const article of articlesWithSections) { // 检查文章ID是否需要特殊处理 const specialId = getSpecialPath(article.id); - return { + // 添加基本路由 + paths.push({ params: { id: specialId }, props: { article, section: article.section, - originalId: specialId !== article.id ? article.id : undefined + originalId: specialId !== article.id ? article.id : undefined, + view: undefined } - }; - }); + }); + + // 为每个视图添加路由 + for (const view of views) { + paths.push({ + params: { id: `${specialId}/${view}` }, + props: { + article, + section: article.section, + originalId: specialId !== article.id ? article.id : undefined, + view + } + }); + } + } + + return paths; } // 获取文章内容 -const { article, section, originalId } = Astro.props; +const { article, section, originalId, view } = Astro.props; // 如果有原始ID，使用它来渲染内容 const articleToRender = originalId ? { ...article, id: originalId } : article; @@ -108,7 +127,7 @@ const description = article.data.summary || `${article.data.title} - 发布于 $ // 处理特殊ID的函数 function getArticleUrl(articleId: string) { - return `/articles/${getSpecialPath(articleId)}`; + return `/articles/${getSpecialPath(articleId)}${view ? `/${view}` : ''}`; } --- @@ -139,7 +158,7 @@ function getArticleUrl(articleId: string) {
{/* 返回按钮 */} - + diff --git a/src/pages/articles/index.astro b/src/pages/articles/index.astro index 20216d6..468a14c 100644 --- a/src/pages/articles/index.astro +++ b/src/pages/articles/index.astro @@ -4,7 +4,6 @@ import type { CollectionEntry } from 'astro:content'; import { contentStructure } from '../../content.config'; import Layout from '@/components/Layout.astro'; import Breadcrumb from '@/components/Breadcrumb.astro'; -import ArticleTimeline from '@/components/ArticleTimeline.astro'; // 启用静态预渲染 export const prerender = true; @@ -194,7 +193,7 @@ interface Breadcrumb { // 处理特殊ID的函数 function getArticleUrl(articleId: string) { - return `/articles/${articleId}`; + return `/articles/${articleId}${view ? `/${view}` : ''}`; } --- @@ -245,7 +244,7 @@ function getArticleUrl(articleId: string) {
{/* 上一级目录卡片 - 仅在浏览目录时显示 */} {!tagFilter && pathSegments.length > 0 && ( - 1 ? pathSegments.slice(0, -1).join('/') : ''}`} + 1 ? pathSegments.slice(0, -1).join('/') : ''}/${view}`} 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 transition-all duration-300 shadow-lg">
@@ -447,7 +446,80 @@ function getArticleUrl(articleId: string) {
) : ( - +
+ {/* 时间线视图 */} +
+ {sortedArticles.length > 0 ? ( + sortedArticles.map((article, index) => { + const isEven = index % 2 === 0; + return ( +
+ {/* 时间线节点 */} +
+
+
+ + {/* 文章卡片 */} + +
+ {/* 日期标签 */} + + + {/* 文章标题 */} +

+ {article.data.title} +

+ + {/* 文章摘要 */} + {article.body && ( +

+ {extractSummary(article.body)} +

+ )} + + {/* 文章元信息 */} +
+ {article.data.section && ( + + + + + {article.data.section} + + )} + + {article.data.tags && article.data.tags.length > 0 && ( +
+ {article.data.tags.map(tag => ( + + #{tag} + + ))} +
+ )} +
+ + {/* 阅读更多指示器 */} +
+ 阅读全文 + + + +
+
+ +
+ ); + }) + ) : ( +
暂无文章数据
+ )} +
+
)}