265 lines
8.1 KiB
Plaintext
265 lines
8.1 KiB
Plaintext
---
|
|
import BaseLayout from '../../layouts/BaseLayout.astro';
|
|
import { getCollection } from 'astro:content';
|
|
|
|
// 获取所有文章
|
|
const allPosts = await getCollection('blog', ({ data }) => {
|
|
return !data.draft;
|
|
});
|
|
|
|
// 构建分类树结构
|
|
interface CategoryNode {
|
|
name: string;
|
|
fullName: string;
|
|
count: number;
|
|
children: Map<string, CategoryNode>;
|
|
posts: typeof allPosts;
|
|
}
|
|
|
|
function buildCategoryTree(posts: typeof allPosts): CategoryNode {
|
|
const root: CategoryNode = {
|
|
name: 'root',
|
|
fullName: '',
|
|
count: 0,
|
|
children: new Map(),
|
|
posts: [],
|
|
};
|
|
|
|
posts.forEach((post) => {
|
|
const category = post.data.category;
|
|
if (!category) {
|
|
root.posts.push(post);
|
|
root.count++;
|
|
return;
|
|
}
|
|
|
|
// 支持多级分类，用 / 分隔，如 "技术/前端/React"
|
|
const parts = category.split('/').map((p) => p.trim());
|
|
let current = root;
|
|
|
|
parts.forEach((part, index) => {
|
|
const fullName = parts.slice(0, index + 1).join('/');
|
|
if (!current.children.has(part)) {
|
|
current.children.set(part, {
|
|
name: part,
|
|
fullName: fullName,
|
|
count: 0,
|
|
children: new Map(),
|
|
posts: [],
|
|
});
|
|
}
|
|
const node = current.children.get(part)!;
|
|
node.count++;
|
|
|
|
// 如果是最后一级，添加文章
|
|
if (index === parts.length - 1) {
|
|
node.posts.push(post);
|
|
}
|
|
|
|
current = node;
|
|
});
|
|
});
|
|
|
|
return root;
|
|
}
|
|
|
|
const categoryTree = buildCategoryTree(allPosts);
|
|
|
|
// 统计总数
|
|
const totalCategories = (() => {
|
|
let count = 0;
|
|
function countNodes(node: CategoryNode) {
|
|
count += node.children.size;
|
|
node.children.forEach((child) => countNodes(child));
|
|
}
|
|
countNodes(categoryTree);
|
|
return count;
|
|
})();
|
|
|
|
// 格式化日期
|
|
function formatDate(date: Date): string {
|
|
return date.toLocaleDateString('zh-CN', {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
});
|
|
}
|
|
|
|
// 递归渲染分类节点
|
|
function renderCategoryNode(node: CategoryNode, level: number): string {
|
|
const sortedChildren = [...node.children.values()].sort((a, b) => a.name.localeCompare(b.name, 'zh-CN'));
|
|
const hasChildren = sortedChildren.length > 0;
|
|
const hasPosts = node.posts.length > 0;
|
|
|
|
let html = '';
|
|
|
|
if (node.name !== 'root') {
|
|
html += `
|
|
<div class="category-group level-${level}">
|
|
<div class="category-header flex items-center justify-between p-4 rounded-lg cursor-pointer hover:bg-muted/50 transition-colors" data-category="${node.fullName}">
|
|
<div class="flex items-center gap-3">
|
|
${hasChildren || hasPosts ? `
|
|
<button class="category-toggle p-1 hover:bg-muted rounded transition-colors">
|
|
<svg class="w-4 h-4 chevron text-foreground/40 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
` : '<div class="w-6"></div>'}
|
|
<svg class="w-5 h-5 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<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>
|
|
<span class="font-medium">${node.name}</span>
|
|
</div>
|
|
<span class="text-sm text-foreground/40 bg-muted px-2.5 py-1 rounded-full">
|
|
${node.count} 篇
|
|
</span>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// 子内容
|
|
if (hasChildren || hasPosts) {
|
|
const paddingClass = node.name === 'root' ? '' : 'category-content hidden';
|
|
html += `<div class="${paddingClass}">`;
|
|
|
|
// 文章列表
|
|
if (hasPosts) {
|
|
html += `<div class="post-list py-2">`;
|
|
node.posts.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()).forEach((post) => {
|
|
const slug = post.slug || post.id;
|
|
html += `
|
|
<a href="/blog/${slug}" class="post-item flex items-center justify-between px-4 py-3 rounded-lg hover:bg-muted/30 transition-colors">
|
|
<span class="text-foreground/80 hover:text-primary-500 transition-colors">${post.data.title}</span>
|
|
<span class="text-xs text-foreground/40">${formatDate(post.data.pubDate)}</span>
|
|
</a>
|
|
`;
|
|
});
|
|
html += `</div>`;
|
|
}
|
|
|
|
// 子分类
|
|
sortedChildren.forEach((child) => {
|
|
html += renderCategoryNode(child, level + 1);
|
|
});
|
|
|
|
html += `</div>`;
|
|
}
|
|
|
|
if (node.name !== 'root') {
|
|
html += `</div>`;
|
|
}
|
|
|
|
return html;
|
|
}
|
|
---
|
|
|
|
<BaseLayout title="分类 - NovaBlog">
|
|
<div class="py-12">
|
|
<div class="content-width">
|
|
<div class="text-center mb-12">
|
|
<h1 class="text-3xl md:text-4xl font-bold mb-4">文章分类</h1>
|
|
<p class="text-foreground/60">
|
|
共 {totalCategories} 个分类，{allPosts.length} 篇文章
|
|
</p>
|
|
</div>
|
|
|
|
{categoryTree.children.size > 0 || categoryTree.posts.length > 0 ? (
|
|
<div class="max-w-3xl mx-auto">
|
|
<!-- 未分类文章 -->
|
|
{categoryTree.posts.length > 0 && (
|
|
<div class="category-group mb-6">
|
|
<div class="category-header flex items-center justify-between p-4 bg-muted/30 rounded-lg">
|
|
<div class="flex items-center gap-3">
|
|
<svg class="w-5 h-5 text-foreground/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<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>
|
|
<span class="font-medium">未分类</span>
|
|
</div>
|
|
<span class="text-sm text-foreground/40 bg-muted px-2 py-1 rounded-full">
|
|
{categoryTree.posts.length} 篇
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<!-- 分类列表 -->
|
|
<div class="category-tree" set:html={renderCategoryNode(categoryTree, 0)} />
|
|
</div>
|
|
) : (
|
|
<div class="text-center py-16 text-foreground/40">
|
|
<svg class="w-16 h-16 mx-auto mb-4 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
|
</svg>
|
|
<p>暂无分类</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</BaseLayout>
|
|
|
|
<script>
|
|
// 客户端交互：折叠/展开分类
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
document.querySelectorAll('.category-header').forEach((header) => {
|
|
header.addEventListener('click', (e) => {
|
|
const target = e.target as HTMLElement;
|
|
// 只有点击头部或按钮时才切换
|
|
if (target.closest('.post-item')) return;
|
|
|
|
const group = header.closest('.category-group');
|
|
const content = group?.querySelector('.category-content') as HTMLElement;
|
|
const chevron = header.querySelector('.chevron');
|
|
|
|
if (content) {
|
|
content.classList.toggle('hidden');
|
|
chevron?.classList.toggle('rotate-90');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.category-group {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.category-header {
|
|
transition: all 0.2s;
|
|
user-select: none;
|
|
}
|
|
|
|
.category-header:hover {
|
|
background: var(--muted);
|
|
}
|
|
|
|
.category-content {
|
|
margin-left: 1.5rem;
|
|
border-left: 2px solid var(--border);
|
|
padding-left: 1rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.chevron {
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.post-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.level-0 > .category-header {
|
|
background: var(--muted);
|
|
}
|
|
|
|
.level-1 > .category-header {
|
|
background: color-mix(in srgb, var(--muted) 50%, transparent);
|
|
}
|
|
|
|
.level-2 > .category-header {
|
|
background: color-mix(in srgb, var(--muted) 30%, transparent);
|
|
}
|
|
</style> |