分类管理

分类是组织和展示内容的重要方式，CarefreeCMS 提供了灵活的分类管理功能。

分类概述

什么是分类？

分类是将文章按照主题、性质或其他标准进行组织的一种方式。每篇文章可以属于一个或多个分类。

分类特点

树形结构

支持无限级分类
父子关系清晰
便于内容组织

灵活设置

自定义分类名称和别名
设置分类图标和封面
配置 SEO 信息
自定义模板

多站点支持

每个站点独立的分类系统
分类数据完全隔离

创建分类

基本步骤

进入分类管理
- 点击左侧菜单 内容管理 → 分类管理
- 查看当前分类列表
添加分类
- 点击 添加分类 按钮
- 填写分类信息
保存分类
- 检查信息
- 点击确定保存

字段说明

基本信息

分类名称：技术博客
英文别名：tech
上级分类：无（顶级分类）
所属站点：主站
排序：0（数字越小越靠前）
状态：启用

SEO 设置

SEO 标题：技术博客 - CarefreeCMS
SEO 关键词：技术,博客,编程,开发
SEO 描述：分享最新的技术文章和编程经验

高级设置

分类图标：fa fa-code
封面图片：上传或选择图片
模板文件：default/category.html
是否导航：是
外部链接：（可选）

分类层级

创建子分类

选择父分类
- 在 上级分类 下拉框中选择父分类
- 或在列表中点击某分类的 添加子分类
填写信息
- 填写子分类名称和其他信息
- 保存
查看结果
- 子分类会缩进显示在父分类下方
- 树形结构一目了然

示例结构

技术博客 (tech)
├── 前端开发 (frontend)
│   ├── Vue.js (vue)
│   ├── React (react)
│   └── JavaScript (javascript)
├── 后端开发 (backend)
│   ├── PHP (php)
│   ├── Node.js (nodejs)
│   └── Python (python)
└── 数据库 (database)
    ├── MySQL (mysql)
    └── Redis (redis)

层级管理

移动分类

编辑分类
修改 上级分类
保存即可移动位置

调整顺序

修改排序数字
数字越小越靠前
同级分类按排序值排列

展开/折叠

点击分类前的箭头图标
展开或折叠子分类
便于查看和管理

分类设置

基本设置

分类名称

显示给用户看的名称
支持中文、英文、数字
建议简洁明了

英文别名

用于 URL 地址
只能包含字母、数字、下划线、横线
示例：tech、vue-tutorial
留空则自动生成拼音

分类描述

简要说明分类内容
用于前台展示
对 SEO 有帮助

SEO 设置

SEO 标题

格式：分类名 - 网站名
示例：前端开发 - CarefreeCMS
长度：建议 60 字符以内

SEO 关键词

格式：关键词1,关键词2,关键词3
示例：前端,Vue,React,开发
数量：5-8 个为宜

SEO 描述

长度：120-155 字符
要求：包含关键词，吸引点击
示例：分享前端开发技术文章，包括 Vue、React 等框架教程和实战经验。

外观设置

分类图标

<!-- Font Awesome 图标 -->
<i class="fa fa-code"></i>

<!-- Element Plus 图标 -->
<el-icon><Document /></el-icon>

常用图标：
- fa fa-book：文档
- fa fa-code：代码
- fa fa-camera：摄影
- fa fa-music：音乐

封面图片

推荐尺寸：800x450 像素
格式：JPG、PNG
大小：< 500KB
用途：分类页面展示

模板设置

选择模板

默认模板：default/category.html
自定义：custom/tech.html

模板变量

___TWIG0___        # 分类名称
___TWIG1___ # 分类描述
___TWIG2___       # 封面图片
___TWIG3___             # 文章列表

分类操作

编辑分类

点击分类后的编辑按钮
修改相关信息
点击确定保存

删除分类

删除前检查

检查是否有子分类
检查是否有关联文章
确认是否要删除

删除方式

方式一：转移后删除（推荐）

将子分类移到其他分类
将文章移到其他分类
删除空分类

方式二：级联删除

选择 级联删除
子分类和文章一并删除
⚠️ 谨慎操作，无法恢复

批量操作

批量启用/禁用

勾选多个分类
点击 批量操作 → 启用/禁用
确认操作

批量删除

勾选要删除的分类
点击 批量删除
确认删除

导航菜单

添加到导航

编辑分类
勾选 是否导航
保存后自动出现在导航菜单

调整导航顺序

修改分类的排序值
导航菜单按排序值显示

文章关联

设置主分类

发布文章时选择一个主分类：

主分类：前端开发

选择副分类

可以选择多个副分类：

副分类：
☑ Vue.js
☑ JavaScript
☐ React

分类显示

文章详情页

所属分类：前端开发 > Vue.js

面包屑导航

首页 > 前端开发 > Vue.js > 文章标题

统计信息

文章统计

查看每个分类的文章数量：

技术博客 (128)
├── 前端开发 (56)
│   ├── Vue.js (23)
│   ├── React (18)
│   └── JavaScript (15)
└── 后端开发 (72)

浏览统计

查看分类页面的访问量：

分类：前端开发
浏览量：12,345
今日：156

前台展示

分类列表页

URL 格式

/category/tech          # 分类别名
/category/tech_2        # 第2页

显示内容

分类名称和描述
面包屑导航
文章列表
分页导航
侧边栏（热门、推荐等）

分类导航菜单

顶部导航

<nav>
  <a href="/">首页</a>
  <a href="/category/tech">技术博客</a>
  <a href="/category/life">生活随笔</a>
  <a href="/category/photo">摄影作品</a>
</nav>

侧边栏分类

<aside>
  <h3>文章分类</h3>
  <ul>
    <li><a href="/category/tech">技术博客 (128)</a></li>
    <li><a href="/category/life">生活随笔 (65)</a></li>
    <li><a href="/category/photo">摄影作品 (42)</a></li>
  </ul>
</aside>

API 接口

获取分类列表

请求

GET /api/categories

响应

{
  "code": 200,
  "data": [
    {
      "id": 1,
      "name": "技术博客",
      "alias": "tech",
      "parent_id": 0,
      "article_count": 128,
      "children": [
        {
          "id": 2,
          "name": "前端开发",
          "alias": "frontend",
          "parent_id": 1,
          "article_count": 56
        }
      ]
    }
  ]
}

获取分类详情

请求

GET /api/categories/1

响应

{
  "code": 200,
  "data": {
    "id": 1,
    "name": "技术博客",
    "alias": "tech",
    "description": "技术文章分类",
    "seo_title": "技术博客 - CarefreeCMS",
    "seo_keywords": "技术,博客",
    "seo_description": "最新技术文章",
    "article_count": 128
  }
}