From 6e96b59245a5ff60e34a3c01c1ad0c429f5cf429 Mon Sep 17 00:00:00 2001 From: lsy Date: Wed, 23 Apr 2025 21:31:11 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=AD=9B=E9=80=89=E6=A8=A1?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Breadcrumb.astro | 7 +- src/consts.ts | 1 + src/pages/articles/index.astro | 1950 +++---------------------------- src/pages/filtered/index.astro | 1416 ++++++++++++++++++++++ 4 files changed, 1567 insertions(+), 1807 deletions(-) create mode 100644 src/pages/filtered/index.astro diff --git a/src/components/Breadcrumb.astro b/src/components/Breadcrumb.astro index a6f538d..fce9d71 100644 --- a/src/components/Breadcrumb.astro +++ b/src/components/Breadcrumb.astro @@ -112,7 +112,8 @@ const breadcrumbs: Breadcrumb[] = pathSegments
/ - 搜索结果 + 筛选 + {searchParams.toString() && - 搜索结果}
)} @@ -129,7 +130,7 @@ const breadcrumbs: Breadcrumb[] = pathSegments {(pageType === 'filter' || pageType === 'grid') && (
- [] = 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; @@ -82,1812 +64,172 @@ function getCurrentSection(pathSegments: string[]) { // 获取当前目录内容 const { sections: currentSections, articles: currentArticles, currentPath } = getCurrentSection(pathSegments); -// 如果有标签过滤，则过滤文章 -let filteredArticles = sortedArticles; -let pageTitle = currentPath ? currentPath : '文章列表'; - -// 使用URL搜索参数中的标签进行过滤 -const tagFilter = searchParams.get('tags'); -if (tagFilter) { - filteredArticles = sortedArticles.filter(article => - article.data.tags && article.data.tags.includes(tagFilter) - ); - pageTitle = `标签: ${tagFilter}`; -} - -// 处理文章链接 -function getArticleUrl(articleId: string) { - return searchParams.toString() ? - `/articles/${articleId}?${searchParams.toString()}` : - `/articles/${articleId}`; -} +// 设置页面标题 +const pageTitle = currentPath ? currentPath : '文章列表'; ---
-
+

{pageTitle}

-
- -
+
- {pageType === 'grid' ? ( - <> - -
- {/* 上一级目录卡片 - 仅在浏览目录时显示 */} - {!tagFilter && pathSegments.length > 0 && ( - 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"> -
-
- - - -
-
-
返回上级目录
-
返回上一级
-
-
- - - -
-
- - )} - - {/* 目录卡片 - 仅在浏览目录时显示 */} - {!tagFilter && currentSections.map(section => { - // 确保目录链接正确生成 - const dirLink = currentPath ? `${currentPath}/${section.name}` : section.name; - - return ( - -
-
- - - -
-
-
{section.name}
-
- {section.sections.length > 0 && ( - - - - - {section.sections.length} 个子目录 - - )} - {section.articles.length > 0 && ( - - - - - {section.articles.length} 篇文章 - - )} -
-
-
- - - -
-
- - ); - })} - - {/* 文章卡片 - 根据是否有标签过滤显示不同内容 */} - {tagFilter ? ( - // 显示标签过滤后的文章 - filteredArticles.map(article => ( -
- -
-
- - - -
-
-

{article.data.title}

- {article.body && ( -

- {article.data.summary} -

- )} -
- - 阅读全文 -
-
-
- - {article.data.tags && article.data.tags.length > 0 && ( -
- {article.data.tags.map(tag => ( - - #{tag} - - ))} -
- )} -
- )) - ) : ( - // 显示当前目录的文章 - currentArticles.map(articlePath => { - // 获取文章ID - 不需要移除src/content前缀，因为contentStructure中已经是相对路径 - const articleId = articlePath; - - // 尝试匹配文章 - const article = articles.find(a => a.id === articleId); - - if (!article) { - return ( -
-
-
- - - -
-
-

文章不存在

-

-

原始路径: {articlePath}
-
文章ID: {articleId}
-
当前目录: {currentPath}
-

-
-
可用的文章ID:
-
{articles.map(a => a.id).join(', ')}
-
-
-
-
- ); - } - - return ( -
- -
-
- - - -
-
-

{article.data.title}

- {article.body && ( -

- {article.data.summary} -

- )} -
- - 阅读全文 -
-
-
- - {article.data.tags && article.data.tags.length > 0 && ( -
- {article.data.tags.map(tag => ( - - #{tag} - - ))} -
- )} -
- ); - }) - )} -
- - {/* 空内容提示 */} - {((tagFilter && filteredArticles.length === 0) || (!tagFilter && currentSections.length === 0 && currentArticles.length === 0)) && ( -
- - - -

- {tagFilter ? `没有找到标签为 "${tagFilter}" 的文章` : '此目录为空'} -

-

- {tagFilter ? '请尝试其他标签或返回文章列表' : '此目录下暂无内容，请浏览其他目录或返回上一级'} -

-
- )} - - ) : pageType === 'filter' ? ( - -
- -
-
-

- - - - 文章筛选 -

- + +
+ {/* 上一级目录卡片 - 仅在浏览目录时显示 */} + {pathSegments.length > 0 && ( + 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"> +
+
+ + +
- -
- -
- -
- -
- - - -
-
- - - -
- - -
- -
- -
- - - -
-
-
- - -
- -
- - -
-
- -
-
+
+
返回上级目录
+
返回上一级
-
- - -
-
已选筛选条件：
-
-
无筛选条件，显示全部文章
- -
-
- - -
-
- 显示 0 篇文章（共 {sortedArticles.length} 篇） -
- -
- -
- - -
-
-
-
- - - - - - + + )} + + {/* 目录卡片 */} + {currentSections.map(section => { + // 确保目录链接正确生成 + const dirLink = currentPath ? `${currentPath}/${section.name}` : section.name; - - - - - - - ) : ( - // 默认视图（参数错误时显示） -
-

无效的视图模式

-

您请求的视图模式"{pageType}"不存在，请选择其他视图。

-
- - 网格视图 + {section.sections.length} 个子目录 + + )} + {section.articles.length > 0 && ( + + + + + {section.articles.length} 篇文章 + + )} +
+
+
+ + + +
+
- - 筛选视图 - -
+ ); + })} + + {/* 文章卡片 */} + {currentArticles.map(articlePath => { + // 获取文章ID - 不需要移除src/content前缀，因为contentStructure中已经是相对路径 + const articleId = articlePath; + + // 尝试匹配文章 + const article = articles.find(a => a.id === articleId); + + if (!article) { + return ( +
+
+
+ + + +
+
+

文章不存在

+

+

原始路径: {articlePath}
+
文章ID: {articleId}
+
当前目录: {currentPath}
+

+
+
+
+ ); + } + + return ( +
+ +
+
+ + + +
+
+

{article.data.title}

+ {article.body && ( +

+ {article.data.summary} +

+ )} +
+ + 阅读全文 +
+
+
+ +
+ ); + })} +
+ + {/* 空内容提示 */} + {(currentSections.length === 0 && currentArticles.length === 0) && ( +
+ + + +

此目录为空

+

此目录下暂无内容，请浏览其他目录或返回上一级

- ) - } - \ No newline at end of file + )} +
+
+ \ No newline at end of file diff --git a/src/pages/filtered/index.astro b/src/pages/filtered/index.astro new file mode 100644 index 0000000..bae608c --- /dev/null +++ b/src/pages/filtered/index.astro @@ -0,0 +1,1416 @@ +--- +import { getCollection } from 'astro:content'; +import type { CollectionEntry } from 'astro:content'; +import Layout from "@/components/Layout.astro"; +import Breadcrumb from "@/components/Breadcrumb.astro"; + +// 启用静态预渲染 +export const prerender = true; + +// 获取查询参数 +const searchParams = Astro.url.searchParams; + +// 获取所有文章，并按日期排序 +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(); + +// 处理文章链接 +function getArticleUrl(articleId: string) { + return searchParams.toString() ? + `/articles/${articleId}?${searchParams.toString()}` : + `/articles/${articleId}`; +} +--- + + +
+
+ +

文章筛选

+ + +
+
+ +
+
+ + +
+ +
+
+

+ + + + 文章筛选 +

+ +
+ +
+ +
+ +
+ +
+ + + +
+
+ + + +
+ + +
+ +
+ +
+ + + +
+
+
+ + +
+ +
+ + +
+
+ +
+
+
+
+ + +
+
已选筛选条件：
+
+
无筛选条件，显示全部文章
+ +
+
+ + +
+
+ 显示 0 篇文章（共 {sortedArticles.length} 篇） +
+ +
+ +
+ + +
+
+
+
+ + +
+ {sortedArticles.map(article => ( +
+ +
+
+ + + +
+
+

{article.data.title}

+ {article.body && ( +

+ {article.data.summary} +

+ )} +
+ + 阅读全文 +
+
+
+ + {article.data.tags && article.data.tags.length > 0 && ( +
+ {article.data.tags.map(tag => ( + + #{tag} + + ))} +
+ )} +
+ ))} +
+ + + + + + + + + +
+
+ \ No newline at end of file