- generic [ref=e2]:
  - navigation [ref=e3]:
    - generic [ref=e4]:
      - link "NewspaperUI" [ref=e5] [cursor=pointer]:
        - /url: /
      - paragraph [ref=e6]: 报纸布局组件库
    - generic [ref=e7]:
      - link "概览" [ref=e9] [cursor=pointer]:
        - /url: /
      - link "栅格系统" [ref=e11] [cursor=pointer]:
        - /url: /grid-system
      - generic [ref=e12]:
        - link "核心组件" [ref=e13] [cursor=pointer]:
          - /url: /components
        - generic [ref=e14]:
          - link "Article" [ref=e15] [cursor=pointer]:
            - /url: /components/article
          - link "Layer" [ref=e16] [cursor=pointer]:
            - /url: /components/layer
          - link "媒体组件" [ref=e17] [cursor=pointer]:
            - /url: /components/media
      - link "文本组件" [ref=e19] [cursor=pointer]:
        - /url: /text
      - link "主题系统" [ref=e21] [cursor=pointer]:
        - /url: /theme
      - generic [ref=e22]:
        - link "示例" [ref=e23] [cursor=pointer]:
          - /url: /examples
        - generic [ref=e24]:
          - link "跨栏布局" [ref=e25] [cursor=pointer]:
            - /url: /examples/spanning
          - link "响应式布局" [ref=e26] [cursor=pointer]:
            - /url: /examples/responsive
  - main [ref=e27]:
    - generic [ref=e29]:
      - heading "NewspaperUI" [level=1] [ref=e30]
      - paragraph [ref=e31]: 生产级报纸布局组件库，参考 InDesign 设计理念，支持 24 列栅格、跨栏、视觉权重和主题系统。
      - heading "设计理念" [level=2] [ref=e32]
      - paragraph [ref=e33]: NewspaperUI 借鉴专业排版软件 InDesign 的设计思想，为 Web 应用提供报纸风格的布局能力。 组件设计遵循少而精、职责明确、无冗余、无歧义的原则。
      - heading "核心特性" [level=2] [ref=e34]
      - list [ref=e35]:
        - listitem [ref=e36]:
          - strong [ref=e37]: 24 列栅格系统
          - text: "- 灵活的栅格布局，支持精确的列控制"
        - listitem [ref=e38]:
          - strong [ref=e39]: 跨栏布局
          - text: "- 内容可以跨越多列，实现复杂的报纸排版"
        - listitem [ref=e40]:
          - strong [ref=e41]: 视觉权重系统
          - text: "- High/Medium/Low 三级权重，自动映射字体大小和样式"
        - listitem [ref=e42]:
          - strong [ref=e43]: 主题系统
          - text: "- 基于 CSS Variables，支持主题切换和自定义"
        - listitem [ref=e44]:
          - strong [ref=e45]: 响应式设计
          - text: "- 小屏自动调整为 12-16 列，保持良好的阅读体验"
        - listitem [ref=e46]:
          - strong [ref=e47]: 浮动 Layer
          - text: "- 支持绝对定位的浮动元素，如广告、拉引等"
      - heading "快速开始" [level=2] [ref=e48]
      - heading "安装" [level=3] [ref=e49]
      - code [ref=e51]: pnpm add @newspaperui/components @newspaperui/theme
      - heading "基础使用" [level=3] [ref=e52]
      - generic [ref=e53]:
        - generic [ref=e54]:
          - heading "简单的报纸布局" [level=3] [ref=e55]
          - paragraph [ref=e56]: 使用 Layout 和 Section 创建基础的栅格布局
        - generic [ref=e58]:
          - article [ref=e60]:
            - heading "主要新闻标题" [level=1] [ref=e61]
            - paragraph [ref=e62]: 这是一篇重要的新闻内容，使用 High 权重的标题和正文文本。
          - generic [ref=e63]:
            - article [ref=e64]:
              - heading "次要新闻" [level=2] [ref=e65]
              - paragraph [ref=e66]: 这是另一篇新闻，使用 Medium 权重。
            - article [ref=e67]:
              - heading "更多新闻" [level=2] [ref=e68]
              - paragraph [ref=e69]: 更多内容在这里展示。
        - button "查看代码" [ref=e71]
      - heading "下一步" [level=2] [ref=e72]
      - paragraph [ref=e73]: 探索文档了解更多功能：
      - list [ref=e74]:
        - listitem [ref=e75]:
          - link "栅格系统" [ref=e76] [cursor=pointer]:
            - /url: /grid-system
          - text: "- 了解 24 列栅格的工作原理"
        - listitem [ref=e77]:
          - link "核心组件" [ref=e78] [cursor=pointer]:
            - /url: /components/article
          - text: "- 学习 Article、Layer 等核心组件"
        - listitem [ref=e79]:
          - link "文本组件" [ref=e80] [cursor=pointer]:
            - /url: /text
          - text: "- 掌握视觉权重系统"
        - listitem [ref=e81]:
          - link "主题系统" [ref=e82] [cursor=pointer]:
            - /url: /theme
          - text: "- 自定义主题和样式"
        - listitem [ref=e83]:
          - link "示例" [ref=e84] [cursor=pointer]:
            - /url: /examples/spanning
          - text: "- 查看完整的布局示例"