前端网络侧边栏配置说明

配置概述

本文档说明了「前端网络」子目录在Docusaurus侧边栏中的配置情况，包括侧边栏配置、分类配置、文档配置等。

已完成的配置

1. 侧边栏配置 (sidebars.ts)

在 docs/sidebars.ts 文件中，我们已经为前端侧边栏添加了「前端网络」分类：

// 前端网络分类
{
  type: "category",
  label: "前端网络",
  items: [
    // 前端网络基础文档
    "前端/前端网络/前端网络基础",
    
    // HTTP协议详解
    "前端/前端网络/HTTP协议详解",
    
    // HTTPS安全传输
    "前端/前端网络/HTTPS安全传输",
    
    // HTTP/2性能优化
    "前端/前端网络/HTTP2性能优化",
    
    // 长连接与短连接
    "前端/前端网络/长连接与短连接",
    
    // WebSocket实时通信
    "前端/前端网络/WebSocket实时通信",
    
    // 浏览器Network面板详解
    "前端/前端网络/浏览器Network面板详解",
    
    // Service Worker离线缓存
    "前端/前端网络/Service Worker离线缓存",
  ],
},

2. 分类配置文件 (category.json)

在 docs/docs/前端/前端网络/_category_.json 文件中，我们配置了分类的显示信息：

{
  "label": "前端网络",
  "position": 7,
  "link": {
    "type": "doc",
    "id": "前端/前端网络/前端网络基础"
  },
  "description": "前端网络通信技术，包括HTTP协议、HTTPS安全传输、WebSocket实时通信、网络性能优化等核心知识"
}

3. 文档Frontmatter配置

为每个教程文章都添加了完整的frontmatter配置，包括：

id: 文档的唯一标识符
title: 文档标题
sidebar_label: 侧边栏中显示的标签
description: 文档描述
keywords: 关键词数组

已配置的文档：

前端网络基础
- id: 前端网络基础
- keywords: [前端网络, 网络基础, 网络协议, 浏览器网络]
HTTP协议详解
- id: HTTP协议详解
- keywords: [HTTP协议, 请求方法, 状态码, 头部字段, HTTP版本]
HTTPS安全传输
- id: HTTPS安全传输
- keywords: [HTTPS, SSL, TLS, 加密, 数字证书, 安全传输]
HTTP/2性能优化
- id: HTTP2性能优化
- keywords: [HTTP/2, 多路复用, 服务器推送, 头部压缩, 流量控制, 性能优化]
长连接与短连接
- id: 长连接与短连接
- keywords: [长连接, 短连接, 连接管理, 网络优化, 性能对比]
WebSocket实时通信
- id: WebSocket实时通信
- keywords: [WebSocket, 实时通信, 连接管理, 消息处理, 性能优化, 错误处理]
浏览器Network面板详解
- id: 浏览器Network面板详解
- keywords: [Network面板, 网络调试, 性能分析, 请求监控, 调试技巧]
Service Worker离线缓存
- id: Service Worker离线缓存
- keywords: [Service Worker, 离线缓存, 缓存策略, 离线功能, 性能优化]

4. 导航配置 (docusaurus.config.ts)

在 docs/docusaurus.config.ts 文件中，前端导航已经正确配置：

// 前端知识体系菜单项
{
  type: 'docSidebar', // 文档侧边栏类型
  sidebarId: 'frontendSidebar', // 侧边栏 ID
  position: 'left', // 左侧位置
  label: '前端', // 菜单项标签
},

5. 知识体系集成

在 docs/docs/前端/前端知识体系.md 文件中，我们已经添加了前端网络部分，包括：

网络基础
HTTP协议
实时通信
离线技术
网络优化

侧边栏显示效果

配置完成后，在前端侧边栏中将会显示：

前端
├── 前端知识体系
├── HTML
├── CSS
├── JavaScript
├── 前端框架
├── 性能优化
├── 前端工程化
├── 前端安全
└── 前端网络
    ├── 前端网络基础
    ├── HTTP协议详解
    ├── HTTPS安全传输
    ├── HTTP/2性能优化
    ├── 长连接与短连接
    ├── WebSocket实时通信
    ├── 浏览器Network面板详解
    └── Service Worker离线缓存

配置验证

检查要点

侧边栏配置: 确保 sidebars.ts 中的配置正确
分类配置: 确保 _category_.json 文件存在且配置正确
文档配置: 确保每个文档都有正确的frontmatter
导航配置: 确保 docusaurus.config.ts 中的前端导航配置正确
文件路径: 确保所有文档文件路径正确

常见问题

侧边栏不显示: 检查 sidebars.ts 配置和 docusaurus.config.ts 配置
文档不显示: 检查文档的frontmatter配置和文件路径
分类不显示: 检查 _category_.json 文件配置
链接错误: 检查文档ID和路径配置

维护说明

添加新文档

在 docs/docs/前端/前端网络/ 目录下创建新的 .md 文件
添加正确的frontmatter配置
在 sidebars.ts 中的前端网络分类下添加新文档引用
更新 README.md 文件，添加新文档的说明

修改现有文档

更新文档内容
检查frontmatter配置是否需要更新
确保文档ID和路径保持一致

删除文档

删除文档文件
从 sidebars.ts 中移除文档引用
更新 README.md 文件

总结

「前端网络」侧边栏配置已经完成，包括：

✅ 侧边栏分类配置
✅ 分类显示配置
✅ 文档frontmatter配置
✅ 导航集成配置
✅ 知识体系集成

所有配置都遵循Docusaurus的最佳实践，确保侧边栏能够正确显示，用户可以通过侧边栏导航访问所有前端网络相关的教程文章。

配置概述​

已完成的配置​

1. 侧边栏配置 (sidebars.ts)​

2. 分类配置文件 (category.json)​

3. 文档Frontmatter配置​

已配置的文档：​

4. 导航配置 (docusaurus.config.ts)​

5. 知识体系集成​

侧边栏显示效果​

配置验证​

检查要点​

常见问题​

维护说明​

添加新文档​

修改现有文档​

删除文档​

总结​