C 型 · 知识库方案

使用场景

知识库模板适合多类目知识的浏览和检索场景，是三层模板中最综合、交互最复杂的一层。

不适合的场景

• 单篇长文（仅一个类目 → 用 B 型文档）
• 结构化数据浏览（需要排序/搜索表格 → 用 A 型表格）
• 实时协作（C 型是只读知识索引，不是编辑器）

方案设计

架构

Layer 1: style-guide.css (CSS 变量 + 组件基座)
Layer 2: layout-knowledge.html (骨架: 顶部标签 + 左侧章节 + 右侧内容)
Layer 3: html-gen.py → knowledge 子命令 (JSON 数据注入)

数据流

JSON 数据文件 ──→ html-gen knowledge ──→ 单文件 HTML
                  │                       ├── 顶部标签栏
  (可选)          │                       ├── 左侧章节列表
  groups.json ────┤                       ├── 右侧内容面板
                  │                       └── 欢迎面板
                  └── 自动推导类目分组

界面结构

┌─ 顶部标签栏 ─────────────────────────────────────────────────┐
│  [技能]  [工具]  [框架]  [最佳实践]                           │
├─ 左侧章节 ──────────┬─ 右侧内容 ─────────────────────────────┤
│  ▸ Hermes Agent     │  # 标题                                │
│  ▸ OpenClaw         │                                        │
│  ▸ Claude Code      │  内联内容 / iframe / 欢迎面板          │
│  ▸ Codex CLI        │                                        │
│  ▸ OpenCode         │                                        │
└──────────────────────┴────────────────────────────────────────┘

关键设计决策

行业对标

核心差异：C 型专注于「知识索引 + 快速浏览」场景，是知识库的轻量级前端。适合知识管理流程中「先收拢再深度消费」的前半步。

功能清单

已实现 ✅

待实现 🔜

快速开始

# 最简单的启动
html-gen knowledge -d data.json -o kb.html

# 带自定义分组和标题
html-gen knowledge \\
  -d data.json -g groups.json \\
  --title "HTML 技能知识库" \\
  --welcome "从上方类目选择" \\
  -o kb.html

数据格式

[
  {
    "title": "Hermes Agent 介绍",
    "group": "Agent 框架",
    "badge": "🟢",
    "content": "<p>Hermes Agent 是...</p>"
  }
]

groups.json（可选）

[
  { "key": "Agent 框架", "label": "Agent 框架", "icon": "🤖" },
  { "key": "HTML 工具",  "label": "HTML 工具",  "icon": "🌐" }
]

命令行参数

html-gen knowledge -h
  -d, --data FILE     条目 JSON 数据（必需）
  -g, --groups FILE   类目分组 JSON（可选）
  --title TEXT        知识库标题
  --subtitle TEXT     副标题
  --welcome TEXT      欢迎面板文本
  -o, --output FILE   输出 HTML

模板案例

该模板的精选案例（html-gen demo list ★ featured，路径相对 demos/）：

迭代记录