Jiao77/NovaBlog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add tags and category pages, then update backend apis

Browse Source
This commit is contained in:
Jiao77
2026-03-01 10:22:39 +08:00
parent 72baa341cc
commit e9b0742032
14 changed files with 721 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

265
src/pages/categories/index.astro Normal file
View File

@@ -0,0 +1,265 @@
---
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>