2ryun
Gen-HTML 使用手册
更新 ：2026-08-03
Gen-HTML 使用手册
版本：1.1 | 最后更新：2026-08-01 Gen-HTML 是 2Ryun 的可视化发布引擎。它能将文档内容一键转化为精美的网页，提供 75+ 套预设模板，支持单页生成、多页面站点构建、在线编辑、发布分享。所有功能均可通过 REST API 供 AI Agent 调用。
1. 快速开始第一步：启用功能进入 设置 → 功能/扩展，找到「Gen-HTML」，点击开关激活。第二步：打开 Gen-HTML有两种方式：
  • 从编辑器：打开任意文档，点击工具栏上的 Gen-HTML 按钮（地球图标），系统会将当前文档内容带入生成界面
  • 从侧边栏：点击「Gen-HTML」菜单进入主页面，可查看所有已生成的网页
第三步：生成第一个网页
  • 选择你喜欢的模板
  • （可选）在输入框中填写额外的定制需求，如"背景改为深色"、"标题字号加大"
  • 点击「生成」按钮，等待 AI 生成
  • 生成完成后即可预览、编辑或发布
    • 2. 生成网页2.1 选择模板Gen-HTML 提供了 75+ 套预设模板，覆盖文章、幻灯片、移动端、数据可视化、简历、视频帧等数十种场景。在生成界面的模板选择区，点击模板卡片即可预览和选中。你也可以使用自己保存的自定义模板（详见我的模板）。2.2 定制需求在模板选择区的文本框中，你可以输入对生成结果的额外要求。例如：
    • "使用蓝色作为主色调"
    • "在页面顶部添加导航栏"
    • "突出显示数据表格部分"
    • "适合移动端阅读的版式"
    AI 会根据你的要求调整生成的网页。提示词是自然语言，写清楚你想要的效果即可。2.3 优化提示词如果你不确定怎么写定制需求，可以点击文本框旁的 ⚡ 优化按钮，让 AI 帮你把模糊的想法转化成更精准的描述。2.4 生成过程点击「生成」后，系统会展示加载动画和生成提示。整个生成过程通常需要 30 秒到 2 分钟，具体取决于文档长度和模板复杂度。生成期间你可以继续做其他事情。
    3. 模板系统3.1 预设模板系统内置了多套专业模板，涵盖：
    3.2 自定义模板当你将生成的网页保存为模板后，它会出现在「我的模板」列表中。之后你可以用这套模板生成风格一致的新网页。保存模板：生成网页后，点击工具栏上的 🔖 保存为模板 按钮，输入模板名称即可。模板管理：在主页面「我的模板」Tab 中，可以重命名或删除自定义模板。
    4. 网页编辑与预览生成完成后，你可以通过三种模式查看和修改网页：4.1 预览模式默认模式，展示网页的实际效果。支持切换桌面 / 平板 / 手机三种视口尺寸，方便检查不同设备上的显示效果。4.2 编辑模式直接编辑网页的 HTML 代码。适合需要精确控制页面细节的场景。编辑完成后点击「保存更改」即可。4.3 对话模式通过自然语言与 AI 对话来修改网页。例如：
    • "把标题改成居中对齐"
    • "添加一个联系表单在页面底部"
    • "把整体颜色调暖一点"
    AI 会根据你的指令直接修改网页，无需手动编辑代码。4.4 主题编辑器在预览或编辑模式下，可以打开调色板 🎨 来调整网页的主题颜色，实时预览效果。4.5 下载网页点击 ⬇ 下载 按钮即可将网页保存为 HTML 文件到本地。
    5. 发布与分享5.1 发布网页点击 📤 发布 按钮将网页公开发布。发布后网页将获得一个公开链接，任何人都可以通过这个链接访问你的网页。5.2 复制分享链接发布后点击 🔗 复制链接 按钮，即可将链接复制到剪贴板，通过微信、邮件等方式分享给他人。5.3 取消发布如果不再需要对外展示，点击 🔒 取消发布 即可将网页设为私密状态。5.4 发布状态查看在主页面「我的网页」Tab 中，已发布的网页会显示 ✓ 已发布 标签，便于区分管理。
    6. 站点构建Gen-HTML 支持将整个文档树一键构建为多页面网站。适合项目文档、知识库、产品手册等场景。使用方式
  • 创建根文档，并在其下添加子文档（文档嵌套）
  • 打开任一文档 → 点击工具栏「创建站点」
  • 选择站点模板（推荐 magazine-minimal）
  • 系统自动为每篇文档生成对应页面
  • 点击「发布站点」
    • 站点功能
    • 多页面结构：子文档自动成为导航页面
    • 共享模块：Header、Footer 全局统一
    • 自有域名：可绑定自定义域名
    • 增量更新：文档内容变更后，可单独重新生成某个页面
    站点 URL发布后通过 https://www.2ryun.com/s/SITE_ID 访问。站点首页为根文档对应的页面。
    7. 我的网页进入 Gen-HTML 主页面（侧边栏菜单），默认展示「我的网页」Tab：
    • 文档分组：网页按来源文档分组展示，每篇文档下的所有生成记录一目了然
    • 筛选：可按「全部 / 已发布 / 未发布」筛选
    • 封面预览：每个网页卡片展示缩略图，点击即可打开查看和编辑
    • 快速操作：卡片上的按钮支持一键发布/取消发布、删除
    • 历史侧边栏：在生成界面左侧，展示当前文档的所有历史生成记录，点击可切换查看
    8. 我的模板切换到「我的模板」Tab：
    • 展示所有你保存的自定义模板
    • 每个模板卡片包含封面预览、模板名称、创建时间
    • 点击模板卡片可以预览该模板的效果
    • 支持重命名和删除操作
    • 在生成界面中，自定义模板会出现在模板选择列表中
    9. 风格系统8.1 什么是风格风格是一组设计规范（配色方案、字体、布局等），可以与模板配合使用，让生成的网页具有统一的视觉风格。8.2 保存风格在生成网页后，如果对当前的设计效果满意，可以点击 🎨 保存为风格 按钮。8.3 管理风格切换到「我的风格」Tab：
    • 展示所有保存的风格设计
    • 支持编辑（修改风格描述提示词）和删除
    • 编辑风格提示词时可以点击 ⚡ 优化按钮让 AI 帮助完善描述
    8.4 使用风格在生成网页时，选择模板后可以同时指定一个风格。AI 会结合模板结构和风格规范生成最终网页。
    10. REST API 与 AI AgentGen-HTML 的所有功能均可通过 REST API 调用。
    生成消耗积分。完整文档见 REST API 技术说明书。11. 最佳实践9.1 文档准备
    • 内容完整：文档内容越完整，生成的网页信息越丰富
    • 结构清晰：使用标题层级（H1、H2、H3）组织内容，AI 能更好地理解文档结构
    • 去除无关内容：生成前可以删除文档中不需要展示到网页上的临时笔记
    9.2 模板选择
    • 内容优先：根据文档类型选择合适的模板类型（文章用内容型、产品介绍用产品型）
    • 自定义模板复用：如果有固定品牌风格需求，生成一个满意的页面后保存为模板，后续统一使用
    9.3 定制需求撰写
    • 具体明确：不要只说"好看一点"，要说清楚"主色调改为深蓝 #1a1a70"
    • 一次一个重点：每次定制聚焦 1-2 个需求，比罗列大量要求效果更好
    • 善用优化按钮：不确定怎么表达时，先写关键词，再让 AI 帮你优化成完整描述
    9.4 发布前检查
    • 多视口检查：用桌面/平板/手机三种视口分别预览
    • 链接验证：检查网页中的链接是否正常工作
    • 封面图：确认网页的分享封面图是否合适，不满意可以重新生成封面
    9.5 配合其他功能
    • 可以基于 Wiki 知识库中的条目生成专题网页
    • 使用 AI Chat 功能可以就网页内容和风格进行深度讨论
    10. 网站首页重新生成网站首页重新生成有三种情况，逻辑各不相同：10.1 首次生成（无设计系统）触发时机：创建网站后、尚未提取设计系统时，通过"提取设计系统并生成子页面"或"重新生成首页"触发。逻辑：
  • LLM 根据用户选择的模板/风格生成完整 HTML（包含导航、页脚、CSS 等所有内容）
  • 后端不进行 shell 处理，因为此时没有设计系统
  • 完整 HTML 直接存入 GridFS
  • 前端返回完整 HTML，用户可以看到完整的页面
    • 此阶段生成的首页不应出现 {{NAV}}、{{SHARED_CSS}} 等占位符。
    10.2 提取设计系统后重新生成触发时机：设计系统已提取，需要更换模板或重新生成首页。逻辑：
  • LLM 按照设计系统的规范生成首页，使用 @shared:xxx 标记标注共享组件
  • 后端收到 LLM 输出后执行 shell：将共享组件（导航、页脚、CSS、JS、header、sidebar）替换为占位符（{{NAV}}、{{FOOTER}} 等）
  • Shell 后的 HTML 存入 GridFS
  • 系统比对新旧共享组件、全局 CSS/JS 的变化，如有变更则提示用户
  • 前端返回 shell 后的 HTML
    • 10.3 仅更新首页内容触发时机：在编辑器中修改首页内容，只更新内容区域。逻辑：
  • 以当前首页的完整 HTML 作为参考模板
  • LLM 只修改 <main> 内容区，保留其他共享模块不变
  • 后端 shell 处理与 10.2 一致
  • 比对共享组件变化，有变更时提示用户
    • 设计系统 Shell 判断规则_shell_homepage 只在以下条件同时满足时才执行：
    • site.design_system 不为空
    • site.design_system.nav_html 有内容（导航是设计系统的标志性字段）