标签管理

标签是一种更灵活的内容组织方式，可以跨分类关联相关文章，帮助用户快速找到感兴趣的内容。

标签概述

什么是标签？

标签（Tag）是对文章内容的关键词描述，一篇文章可以有多个标签。与分类的层级结构不同，标签是扁平化的。

标签 vs 分类

标签的作用

内容关联

• 关联相关文章
• 跨分类推荐
• 提高内容发现性

SEO 优化

• 增加关键词密度
• 提升页面相关性
• 改善搜索排名

用户体验

• 快速查找相关内容
• 探索感兴趣的主题
• 提高停留时间

创建标签

方式一：单独创建

1. 进入标签管理

   内容管理 → 标签管理
   

2. 添加标签

   • 点击 添加标签 按钮
   • 填写标签信息

3. 填写信息

   标签名称：Vue.js
   英文别名：vuejs
   所属站点：主站
   标签颜色：#409EFF
   排序：0
   状态：启用
   

4. 保存

   • 点击 确定
   • 标签创建成功

方式二：发布文章时创建

在文章编辑页面：

1. 选择标签输入框
2. 输入新标签名称
3. 按回车键
4. 标签自动创建

示例：

输入：TypeScript ↵
输入：前端框架 ↵
输入：组件库 ↵

方式三：批量导入

准备 CSV 文件

标签名称,别名,颜色
Vue.js,vuejs,#409EFF
React,react,#61DAFB
TypeScript,typescript,#3178C6
Node.js,nodejs,#339933

导入步骤

1. 点击 导入标签
2. 选择 CSV 文件
3. 预览导入数据
4. 确认导入

标签设置

基本信息

标签名称

要求：
- 简洁明了
- 2-6 个字为宜
- 避免重复
- 准确描述内容

示例：
✓ Vue.js、前端开发、性能优化
✗ 这是一个关于Vue框架的标签

英文别名

规则：
- 字母、数字、连字符
- 全部小写
- 用于 URL

示例：
vue-js、frontend、performance

标签描述

用途：
- SEO 优化
- 标签页面展示
- 帮助用户理解

示例：
Vue.js 是一款渐进式 JavaScript 框架，用于构建用户界面。

外观设置

标签颜色

选择合适的颜色标识标签：

技术类：蓝色 #409EFF
前端：绿色 #67C23A
后端：橙色 #E6A23C
数据库：紫色 #9C27B0
工具：灰色 #909399

使用场景

• 标签云展示
• 文章标签列表
• 标签筛选按钮

SEO 设置

SEO 标题

格式：标签名 + 相关文章 + 网站名
示例：Vue.js 相关文章 - CarefreeCMS

SEO 关键词

包含：标签本身 + 相关词
示例：Vue.js,Vue,前端框架,JavaScript

SEO 描述

内容：标签说明 + 文章概览
示例：收录了 Vue.js 相关的技术文章，包括入门教程、最佳实践和项目实战。
长度：120-155 字符

标签管理

编辑标签

1. 在标签列表找到要编辑的标签
2. 点击 编辑 按钮
3. 修改信息
4. 保存

可编辑内容

• 标签名称
• 英文别名（谨慎修改）
• 标签描述
• 颜色
• 排序
• 状态

合并标签

当存在重复或相似标签时：

操作步骤

1. 选择要合并的标签
2. 点击 合并标签
3. 选择目标标签
4. 确认合并

效果

• 源标签删除
• 所有文章转移到目标标签
• 统计数据合并

示例

合并前：
- Vue (15 篇)
- vue.js (8 篇)
- VueJS (5 篇)

合并后：
- Vue.js (28 篇)

删除标签

删除单个

1. 点击标签的 删除 按钮
2. 确认删除
3. 文章的该标签被移除

批量删除

1. 勾选多个标签
2. 点击 批量删除
3. 确认操作

注意

• 删除标签不会删除文章
• 只是移除文章的该标签关联
• 删除后无法恢复

排序管理

手动排序

修改排序值：
Vue.js: 1
React: 2
TypeScript: 3

自动排序

按文章数量：从多到少
按创建时间：从新到旧
按更新时间：最近更新
按字母顺序：A-Z

使用标签

文章添加标签

发布文章时

1. 在文章编辑器中找到 标签 选择框
2. 选择已有标签或输入新标签
3. 建议添加 3-8 个标签
4. 保存文章

示例

文章：Vue 3 Composition API 详解

推荐标签：
- Vue.js ✓
- Vue3 ✓
- Composition API ✓
- 前端开发 ✓
- JavaScript ✓

文章管理标签

添加标签

1. 编辑文章
2. 在标签框中选择或输入
3. 保存

移除标签

1. 编辑文章
2. 点击标签右侧的 ✕ 删除
3. 保存

批量添加标签

1. 在文章列表勾选多篇文章
2. 批量操作 → 添加标签
3. 选择要添加的标签
4. 确认

标签云

在前台显示标签云：

<div class="tag-cloud">
  <a href="/tag/vuejs" style="font-size: 24px;">Vue.js</a>
  <a href="/tag/react" style="font-size: 20px;">React</a>
  <a href="/tag/typescript" style="font-size: 18px;">TypeScript</a>
  <a href="/tag/nodejs" style="font-size: 16px;">Node.js</a>
  <!-- 字体大小根据文章数量动态计算 -->
</div>

前台展示

标签列表页

URL 格式

/tag/vuejs          # 标签页
/tag/vuejs_2        # 第 2 页

页面内容

• 标签名称和描述
• 相关文章列表
• 文章总数
• 分页导航
• 相关标签推荐

标签页模板

___TWIG0___
<div class="tag-page">
  <h1>标签：___TWIG1___</h1>
  <p class="description">___TWIG2___</p>
  <p class="count">共 ___TWIG3___ 篇文章</p>

  <div class="article-list">
    ___TWIG4___
      <article>
        <h2><a href="___TWIG5___">___TWIG6___</a></h2>
        <p>___TWIG7___</p>
        <div class="meta">
          <span>___TWIG8___</span>
          <span>浏览 ___TWIG9___</span>
        </div>
      </article>
    ___TWIG10___
  </div>

  <div class="pagination">
    ___TWIG11___
  </div>
</div>

文章页标签显示

<div class="article-tags">
  <span>标签：</span>
  <a href="/tag/vuejs" class="tag" style="color: #409EFF;">#Vue.js</a>
  <a href="/tag/frontend" class="tag" style="color: #67C23A;">#前端开发</a>
  <a href="/tag/tutorial" class="tag" style="color: #E6A23C;">#教程</a>
</div>

标签统计

文章统计

查看每个标签的文章数量：

标签           文章数    本周新增
Vue.js         128       12
React          95        8
TypeScript     67        5
Node.js        54        3

热门标签

按文章数量排序：

1. Vue.js (128)
2. React (95)
3. JavaScript (89)
4. TypeScript (67)
5. Node.js (54)

使用趋势

查看标签使用趋势：

Vue.js
本月：35 篇  ↑ 15%
上月：30 篇
去年同期：25 篇

API 接口

获取标签列表

请求

GET /api/tags?page=1&page_size=20

响应

{
  "code": 200,
  "data": {
    "list": [
      {
        "id": 1,
        "name": "Vue.js",
        "alias": "vuejs",
        "color": "#409EFF",
        "article_count": 128
      }
    ],
    "total": 50
  }
}

获取标签详情

请求

GET /api/tags/1

响应

{
  "code": 200,
  "data": {
    "id": 1,
    "name": "Vue.js",
    "alias": "vuejs",
    "description": "Vue.js 框架相关",
    "color": "#409EFF",
    "article_count": 128,
    "articles": []
  }
}

热门标签

请求

GET /api/tags/hot?limit=10

响应

{
  "code": 200,
  "data": [
    {
      "id": 1,
      "name": "Vue.js",
      "article_count": 128
    }
  ]
}

最佳实践

标签规划

数量控制

• 每篇文章 3-8 个标签
• 过少：关联不足
• 过多：稀释重点

选择原则

• 核心关键词必选
• 相关技术栈
• 文章主题
• 适用场景

避免滥用

❌ 错误示例：
标签：文章、博客、post、内容、优质、推荐、精选、必读

✓ 正确示例：
标签：Vue.js、组件开发、最佳实践

命名规范

统一格式

✓ 正确：
Vue.js、React、TypeScript

✗ 错误：
vue、VUE、Vue.JS（大小写不统一）

避免重复

合并相似标签：
Vue → Vue.js
vue.js → Vue.js
VueJS → Vue.js

使用全称

✓ TypeScript
✗ TS

✓ JavaScript
✗ JS

SEO 优化

相关性

• 标签要与内容高度相关
• 避免为了 SEO 堆砌标签
• 自然融入文章

标签页优化

• 为标签页添加描述
• 设置合适的 TDK
• 生成静态页面

内部链接

• 文章间通过标签互联
• 增加站内链接
• 提升页面权重

用户体验

直观清晰

• 使用常见词汇
• 避免专业术语（除非必要）
• 便于用户理解

颜色搭配

• 同类标签用相近颜色
• 保持整体协调
• 确保可读性

标签云

• 热门标签突出显示
• 字号反映受欢迎程度
• 便于快速选择

常见问题

标签和分类有什么区别？

分类

• 层级结构，用于组织内容
• 每篇文章通常属于一个分类
• 更偏向主题划分

标签

• 扁平结构，用于标记内容
• 每篇文章可以有多个标签
• 更偏向关键词描述

建议

• 配合使用，发挥各自优势
• 分类管组织，标签做关联

如何批量修改文章标签？

1. 进入文章列表
2. 筛选需要修改的文章
3. 勾选文章
4. 批量操作 → 添加/移除标签
5. 选择标签
6. 确认

删除标签会影响文章吗？

不会影响文章本身：

• 文章内容不变
• 文章状态不变
• 只是移除标签关联

但会影响：

• 标签页无法访问
• 相关推荐变化
• SEO 可能受影响

如何找出未使用的标签？

1. 进入标签管理
2. 按文章数排序
3. 筛选文章数为 0 的标签
4. 批量删除或重新利用

标签太多怎么办？

清理方案

1. 合并相似标签
2. 删除无文章标签
3. 移除无意义标签
4. 规范新标签创建

预防措施

• 发布文章前先搜索已有标签
• 统一标签命名规范
• 定期审查标签列表
• 限制标签创建权限

相关功能

• 文章管理
• 分类管理
• SEO 优化
• 搜索功能