1. 单个分类#

1
---
2
title: 我的文章
3
category: 博客搭建
4
---

2. 多级分类#

1
---
2
title: 我的文章
3
category: 技术笔记/前端开发
4
---

1. 单个标签#

1
---
2
title: 我的文章
3
tags: [前端开发]
4
---

2. 多个标签#

1
---
2
title: 我的文章
3
tags: [前端开发, React, TypeScript]
4
---

1. 启用分类栏#

在 src/config/siteConfig.ts 中：

1
export const siteConfig: SiteConfig = {
2
    // 启用分类栏
3
    categoryBar: true,
4
};

2. 分类栏显示位置#

分类栏默认显示在导航栏下方，包含所有文章的分类。

1. 分类页生成#

系统会自动为每个分类生成对应的分类页：

• 分类页 URL：/category/分类名称/
• 分类页会显示该分类下的所有文章

2. 分类页标题#

分类页标题默认为分类名称，可以在分类配置中自定义。

1. 标签页生成#

系统会自动为每个标签生成对应的标签页：

• 标签页 URL：/tag/标签名称/
• 标签页会显示包含该标签的所有文章

2. 标签云#

标签云会显示在侧边栏或其他位置，按标签使用频率显示大小。

1. 文章排序#

在分类页和标签页中，文章默认按发布日期倒序排列（最新的在前）。

2. 分类排序#

分类的显示顺序：

1. 按分类名称字母顺序
2. 可以在配置中自定义排序

3. 标签排序#

标签的显示顺序：

1. 按标签使用频率（使用次数多的在前）
2. 可以在配置中自定义排序

1. 分类配置文件#

可以创建分类配置文件来自定义分类信息：

1
export const categoryConfig = {
2
    categories: [
3
        {
4
            id: "blog-setup",
5
            name: "博客搭建",
6
            description: "关于博客搭建的教程和经验",
7
            order: 1,  // 排序权重
8
        },
9
        {
10
            id: "front-end",
11
            name: "前端开发",
12
            description: "前端开发相关内容",
13
            order: 2,
14
        },
15
    ],
16
};

2. 标签配置文件#

可以创建标签配置文件来自定义标签信息：

1
export const tagConfig = {
2
    tags: [
3
        {
4
            id: "react",
5
            name: "React",
6
            description: "React 相关内容",
7
        },
8
        {
9
            id: "typescript",
10
            name: "TypeScript",
11
            description: "TypeScript 相关内容",
12
        },
13
    ],
14
};

1. 分类页 SEO#

• 标题：包含分类名称和网站名称
• 描述：分类的详细描述
• 关键词：分类相关的关键词
• ** canonical URL**：避免重复内容

2. 标签页 SEO#

• 标题：包含标签名称和网站名称
• 描述：标签的详细描述
• 关键词：标签相关的关键词
• ** canonical URL**：避免重复内容

Q: 分类和标签不显示？#

1. 检查文章 frontmatter 中分类和标签格式是否正确
2. 确保分类栏已启用（categoryBar: true）
3. 清除浏览器缓存
4. 检查是否有 CSS 样式隐藏了分类栏

Q: 分类页显示 404？#

1. 确保至少有一篇文章使用了该分类
2. 检查分类名称是否包含特殊字符
3. 重新构建网站
4. 检查路由配置

Q: 如何删除分类？#

1. 从所有文章中移除该分类
2. 重新构建网站
3. 分类会自动从分类栏中消失

Q: 如何合并分类？#

1. 将所有文章的分类统一修改为新分类
2. 重新构建网站
3. 旧分类会自动消失

Q: 标签云不显示？#

1. 确保至少有文章使用了标签
2. 检查侧边栏配置中标签云组件是否启用
3. 清除浏览器缓存
4. 检查是否有 CSS 样式隐藏了标签云

1. 分类体系#

• 保持简洁：分类数量不宜过多（建议 5-10 个）
• 层级合理：最多 2-3 级分类
• 命名规范：使用清晰、准确的分类名称
• 避免重叠：分类之间避免内容重叠

2. 标签使用#

• 相关性：标签应与文章内容相关
• 一致性：使用统一的标签命名规范
• 数量控制：每篇文章标签数量控制在 3-5 个
• 避免重复：避免使用同义词作为不同标签

3. 内容组织#

• 分类为主：使用分类作为主要组织方式
• 标签为辅：使用标签作为补充和细化
• 定期整理：定期检查和整理分类和标签
• 用户体验：确保分类和标签导航清晰易用

4. SEO 优化#

• 分类页面：为每个分类创建独特的描述
• 标签页面：为每个标签创建独特的描述
• 内部链接：在文章中合理使用分类和标签链接
• sitemap：确保分类和标签页包含在站点地图中

1. 自定义分类页面模板#

可以创建自定义的分类页面模板：

1
---
2
import Layout from '@/layouts/Layout.astro';
3
import { getCollection } from 'astro:content';
4

5
const { slug } = Astro.params;
6
const posts = await getCollection('posts', ({ data }) =>
7
  data.category === slug
8
);
9
---
10

11
<Layout title={`分类：${slug}`}>
12
  <h1>分类：{slug}</h1>
13
  <ul>
14
    {posts.map(post => (
15
      <li>
16
        <a href={`/posts/${post.slug}/`}>{post.data.title}</a>
17
      </li>
18
    ))}
19
  </ul>
20
</Layout>

2. 自定义标签页面模板#

可以创建自定义的标签页面模板：

1
---
2
import Layout from '@/layouts/Layout.astro';
3
import { getCollection } from 'astro:content';
4

5
const { slug } = Astro.params;
6
const posts = await getCollection('posts', ({ data }) =>
7
  data.tags && data.tags.includes(slug)
8
);
9
---
10

11
<Layout title={`标签：${slug}`}>
12
  <h1>标签：{slug}</h1>
13
  <ul>
14
    {posts.map(post => (
15
      <li>
16
        <a href={`/posts/${post.slug}/`}>{post.data.title}</a>
17
      </li>
18
    ))}
19
  </ul>
20
</Layout>

3. 分类和标签统计#

可以在首页或侧边栏显示分类和标签的文章数量：

1
// 分类统计
2
const categoryStats = {};
3
posts.forEach(post => {
4
  const category = post.data.category;
5
  if (category) {
6
    categoryStats[category] = (categoryStats[category] || 0) + 1;
7
  }
8
});
9

10
// 标签统计
11
const tagStats = {};
12
posts.forEach(post => {
13
  const tags = post.data.tags || [];
14
  tags.forEach(tag => {
15
    tagStats[tag] = (tagStats[tag] || 0) + 1;
16
  });
17
});

通过合理配置分类和标签，可以使博客内容更加组织化，提高用户体验和SEO效果！