docs: add upage usage instructions document
This commit is contained in:
LIlGG
@@ -2,21 +2,33 @@
|
||||
id: index
|
||||
title: UPage 文档
|
||||
slug: /
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
# UPage
|
||||
<p align="center">
|
||||
<div className="theme-logo" style={{ width: '240px' }}>
|
||||
<img alt="UPage 主界面" />
|
||||
</div>
|
||||
</p>
|
||||
|
||||
<p align="center" style={{ display: 'flex', gap: '4px', justifyContent: 'center' }}>
|
||||
<a href="https://github.com/halo-dev/upage/releases"><img alt="GitHub release" src="https://img.shields.io/github/release/halo-dev/upage.svg?style=flat-square&include_prereleases" /></a>
|
||||
<a href="https://github.com/halo-dev/upage/commits"><img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/halo-dev/upage.svg?style=flat-square" /></a>
|
||||
<a href="https://github.com/halo-dev/upage/actions"><img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/halo-dev/upage/halo.yaml?branch=main&style=flat-square" /></a>
|
||||
<a href="https://halo-dev.github.io/upage/"><img alt="Documentation" src="https://img.shields.io/badge/docs-latest-blue?style=flat-square" /></a>
|
||||
</p>
|
||||
|
||||
UPage 是一款基于大模型的可视化网页构建平台，支持多种 AI 提供商集成，基于自然语言快速实现定制化网页。
|
||||
|
||||
## 什么是 UPage？
|
||||
|
||||
UPage 是一个开源的网页构建工具，它利用大语言模型，让用户能够通过自然语言描述来创建和定制网页。无论您是开发者、设计师还是内容创作者，UPage 都能帮助您快速将想法转化为可视化的网页。
|
||||
UPage 是一款基于大模型的可视化网页构建平台，支持多种 AI 提供商集成，基于自然语言快速实现定制化网页。它利用大语言模型，让用户能够通过自然语言描述来创建和定制网页。无论您是开发者、设计师还是内容创作者，UPage 都能帮助您快速将想法转化为可视化的网页。
|
||||
|
||||
## 核心特性
|
||||
|
||||
- **基于 AI 的页面生成**：通过自然语言描述生成完整的网页
|
||||
- **多种 AI 提供商支持**：兼容 OpenAI、Anthropic Claude、Google Gemini 等多种 AI 模型
|
||||
- **基于 LLM 的页面生成**：通过自然语言描述生成完整的网页
|
||||
- **多种 LLM 提供商支持**：兼容 OpenAI、Anthropic Claude、Google Gemini 等多种 LLM 模型
|
||||
- **可视化编辑器**：简洁直观的可视化编辑器界面，实时预览
|
||||
- **多页面生成**：支持同时生成多个页面
|
||||
- **代码导出**：生成标准的 HTML/CSS/JS 代码，方便集成到现有项目
|
||||
- **响应式设计**：自动适应不同屏幕尺寸
|
||||
- **部署集成**：支持一键部署到常见托管平台
|
||||
|
||||
@@ -1,159 +0,0 @@
|
||||
---
|
||||
id: ai-page-generation
|
||||
title: AI 页面生成
|
||||
---
|
||||
|
||||
# AI 页面生成
|
||||
|
||||
UPage 的核心功能是通过人工智能生成网页。本文档将指导您如何使用 AI 功能快速创建和定制网页。
|
||||
|
||||
## 基于自然语言创建页面
|
||||
|
||||
### 创建新页面
|
||||
|
||||
1. 在 UPage 主界面，点击侧边栏中的"新建页面"按钮
|
||||
2. 选择"AI 创建"选项
|
||||
3. 在对话框中输入您的页面需求描述
|
||||
4. 点击"生成"按钮
|
||||
|
||||
### 编写有效的页面描述
|
||||
|
||||
为了获得最佳结果，建议按照以下方式编写页面描述：
|
||||
|
||||
- **明确页面类型**：例如"产品展示页面"、"博客文章"、"联系表单"等
|
||||
- **指定关键元素**：列出页面应包含的主要组件和内容
|
||||
- **描述风格和布局**：说明您期望的设计风格和布局结构
|
||||
- **提供具体内容**：如果有特定文本或图片要求，请明确说明
|
||||
|
||||
示例描述：
|
||||
|
||||
```
|
||||
创建一个现代风格的产品登录页面，用于展示我们的智能手表产品。页面应包含：
|
||||
1. 顶部导航栏，带有品牌标志和菜单
|
||||
2. 醒目的标题和副标题，强调产品的主要卖点
|
||||
3. 产品图片展示区，包含至少3张不同角度的产品图
|
||||
4. 产品特点列表，使用图标和简短描述
|
||||
5. 价格信息和"立即购买"按钮
|
||||
6. 客户评价部分
|
||||
7. 常见问题解答
|
||||
8. 页脚，包含联系信息和社交媒体链接
|
||||
整体配色应使用深蓝色和白色为主，符合科技产品的定位
|
||||
```
|
||||
|
||||
## 迭代优化页面
|
||||
|
||||
### 修改现有页面
|
||||
|
||||
1. 选择要修改的页面
|
||||
2. 点击工具栏中的"AI 辅助"按钮
|
||||
3. 描述您想要进行的修改
|
||||
4. AI 将生成修改建议并应用到页面
|
||||
|
||||
### 局部调整
|
||||
|
||||
您也可以针对页面的特定部分进行 AI 辅助调整：
|
||||
|
||||
1. 选择页面中的特定组件或区域
|
||||
2. 点击右键菜单中的"AI 辅助"选项
|
||||
3. 描述您希望对该部分进行的修改
|
||||
4. 确认 AI 生成的调整
|
||||
|
||||
## AI 提示技巧
|
||||
|
||||
### 有效的提示模式
|
||||
|
||||
以下是一些有效的 AI 提示模式：
|
||||
|
||||
- **添加内容**："在页面顶部添加一个公告栏，显示最新促销信息"
|
||||
- **修改样式**："将按钮颜色改为蓝色，并增加圆角效果"
|
||||
- **调整布局**："将产品展示区改为两列网格布局，每个产品卡片包含图片、标题和价格"
|
||||
- **优化文案**："将页面标题改为更吸引人的营销语言，强调产品的独特卖点"
|
||||
- **增强功能**："在产品图片区添加轮播效果，允许用户浏览多张产品图片"
|
||||
|
||||
### 提示示例
|
||||
|
||||
以下是一些实际的提示示例：
|
||||
|
||||
```
|
||||
将页面背景改为浅灰色，增加视觉层次感
|
||||
```
|
||||
|
||||
```
|
||||
优化页面的移动端显示效果，确保在小屏幕上也能良好展示
|
||||
```
|
||||
|
||||
```
|
||||
添加一个简单的联系表单，包含姓名、邮箱和留言字段
|
||||
```
|
||||
|
||||
```
|
||||
将产品描述文本改为更简洁有力的表达，突出产品解决的问题
|
||||
```
|
||||
|
||||
## 高级 AI 功能
|
||||
|
||||
### 风格迁移
|
||||
|
||||
您可以使用 AI 将一个页面的设计风格应用到另一个页面：
|
||||
|
||||
1. 在 AI 提示中引用现有页面
|
||||
2. 描述您希望迁移的风格元素
|
||||
3. AI 将分析并应用相似的设计风格
|
||||
|
||||
示例：
|
||||
```
|
||||
将我的"关于我们"页面的设计风格应用到这个"联系我们"页面，保持一致的视觉语言
|
||||
```
|
||||
|
||||
### 多语言支持
|
||||
|
||||
UPage 支持使用 AI 生成多语言内容：
|
||||
|
||||
1. 创建基础页面
|
||||
2. 使用 AI 辅助功能，指定目标语言
|
||||
3. AI 将翻译页面内容并保持布局结构
|
||||
|
||||
示例：
|
||||
```
|
||||
将此页面内容翻译成英文，保持相同的布局和设计
|
||||
```
|
||||
|
||||
## 最佳实践
|
||||
|
||||
### 审查和编辑
|
||||
|
||||
AI 生成的内容通常需要人工审查和编辑：
|
||||
|
||||
1. 检查生成的文本是否准确、相关
|
||||
2. 调整布局和样式以符合品牌要求
|
||||
3. 确保所有链接和功能正常工作
|
||||
4. 优化图片和媒体内容
|
||||
|
||||
### 渐进式生成
|
||||
|
||||
对于复杂页面，采用渐进式生成方法：
|
||||
|
||||
1. 首先生成基本页面结构
|
||||
2. 逐步添加和完善各个部分
|
||||
3. 使用 AI 辅助进行细节优化
|
||||
4. 最后进行整体协调和统一
|
||||
|
||||
## 故障排除
|
||||
|
||||
### 生成结果不理想
|
||||
|
||||
如果 AI 生成的页面不符合预期：
|
||||
|
||||
1. 尝试提供更具体、更详细的描述
|
||||
2. 分解复杂需求为多个简单步骤
|
||||
3. 提供参考示例或链接
|
||||
4. 调整使用的 AI 模型（如果可用）
|
||||
|
||||
### 性能问题
|
||||
|
||||
如果遇到性能问题：
|
||||
|
||||
1. 减少单次生成的页面复杂度
|
||||
2. 分步骤生成复杂页面
|
||||
3. 检查网络连接和 API 状态
|
||||
4. 确认 AI 提供商配置正确
|
||||
@@ -5,138 +5,8 @@ title: 基础使用
|
||||
|
||||
# 基础使用
|
||||
|
||||
本文档介绍 UPage 的基本使用方法，帮助您快速上手这款基于 AI 的网页构建平台。
|
||||
本文档介绍 UPage 的基本使用方法，帮助您快速上手这款基于大模型的可视化网页构建平台。
|
||||
|
||||
## 登录系统
|
||||
## 主界面概览
|
||||
|
||||
1. 打开浏览器，访问 UPage 的地址（例如 `http://localhost:3000`）
|
||||
2. 如果已配置 Logto 认证，您将被重定向到登录页面
|
||||
3. 输入用户名和密码登录系统
|
||||
4. 如果未配置认证系统，您将直接进入 UPage 主界面
|
||||
|
||||
## 界面概览
|
||||
|
||||
UPage 的界面主要分为以下几个部分：
|
||||
|
||||
- **顶部导航栏**：包含项目切换、用户信息和全局设置
|
||||
- **侧边栏**：包含页面列表和创建新页面的入口
|
||||
- **主内容区**：显示当前编辑的页面或预览
|
||||
- **工具栏**：提供各种编辑工具和操作按钮
|
||||
|
||||
## 创建新页面
|
||||
|
||||
### 使用 AI 创建页面
|
||||
|
||||
1. 点击侧边栏中的"新建页面"按钮
|
||||
2. 选择"AI 创建"选项
|
||||
3. 在对话框中描述您想要创建的页面，例如：
|
||||
```
|
||||
创建一个产品展示页面，包含标题、产品图片、详细描述和购买按钮
|
||||
```
|
||||
4. 点击"生成"按钮，系统将基于您的描述生成页面
|
||||
5. 生成完成后，您可以进一步编辑和调整页面内容
|
||||
|
||||
### 从模板创建页面
|
||||
|
||||
1. 点击侧边栏中的"新建页面"按钮
|
||||
2. 选择"从模板创建"选项
|
||||
3. 浏览可用的模板并选择一个适合您需求的模板
|
||||
4. 点击"使用此模板"按钮
|
||||
5. 根据需要编辑和自定义模板内容
|
||||
|
||||
### 从空白页面开始
|
||||
|
||||
1. 点击侧边栏中的"新建页面"按钮
|
||||
2. 选择"空白页面"选项
|
||||
3. 使用拖拽方式添加组件到页面
|
||||
4. 配置组件属性和样式
|
||||
|
||||
## 编辑页面
|
||||
|
||||
### 添加组件
|
||||
|
||||
1. 在编辑模式下，点击工具栏中的"组件"按钮
|
||||
2. 从组件库中选择所需组件
|
||||
3. 将组件拖拽到页面中的目标位置
|
||||
4. 调整组件大小和位置
|
||||
|
||||
### 编辑组件属性
|
||||
|
||||
1. 在页面中点击选择要编辑的组件
|
||||
2. 在右侧属性面板中编辑组件的属性
|
||||
3. 修改文本内容、图片、链接等
|
||||
4. 调整组件的样式、颜色、字体等
|
||||
|
||||
### 使用 AI 辅助编辑
|
||||
|
||||
1. 选择要编辑的组件或页面区域
|
||||
2. 点击工具栏中的"AI 辅助"按钮
|
||||
3. 描述您想要进行的修改，例如：
|
||||
```
|
||||
将这段文本改为更吸引人的营销语言，强调产品的优势
|
||||
```
|
||||
4. AI 将根据您的描述生成修改建议
|
||||
5. 确认修改或进行进一步调整
|
||||
|
||||
## 预览和发布
|
||||
|
||||
### 预览页面
|
||||
|
||||
1. 点击工具栏中的"预览"按钮
|
||||
2. 在预览模式下查看页面在不同设备上的显示效果
|
||||
3. 使用设备切换按钮查看响应式效果
|
||||
|
||||
### 发布页面
|
||||
|
||||
1. 完成页面编辑后，点击工具栏中的"发布"按钮
|
||||
2. 选择发布选项（如发布到网站、导出代码等）
|
||||
3. 根据提示完成发布流程
|
||||
|
||||
## 管理页面
|
||||
|
||||
### 页面列表
|
||||
|
||||
1. 在侧边栏中查看所有已创建的页面
|
||||
2. 点击页面名称打开并编辑页面
|
||||
3. 使用搜索框查找特定页面
|
||||
|
||||
### 页面操作
|
||||
|
||||
1. 在页面列表中，每个页面右侧有操作菜单
|
||||
2. 点击操作菜单可以进行复制、重命名、删除等操作
|
||||
3. 使用拖拽调整页面顺序
|
||||
|
||||
## 系统设置
|
||||
|
||||
### 用户设置
|
||||
|
||||
1. 点击顶部导航栏中的用户头像
|
||||
2. 选择"个人设置"
|
||||
3. 修改个人信息、密码等
|
||||
|
||||
### 系统配置
|
||||
|
||||
1. 点击顶部导航栏中的设置图标
|
||||
2. 配置系统参数、AI 提供商等
|
||||
3. 管理用户权限和角色（需要管理员权限）
|
||||
|
||||
## 键盘快捷键
|
||||
|
||||
UPage 提供了一系列键盘快捷键，帮助您提高工作效率：
|
||||
|
||||
| 快捷键 | 功能 |
|
||||
| --- | --- |
|
||||
| Ctrl+S | 保存当前页面 |
|
||||
| Ctrl+Z | 撤销操作 |
|
||||
| Ctrl+Y | 重做操作 |
|
||||
| Ctrl+C | 复制选中的组件 |
|
||||
| Ctrl+V | 粘贴组件 |
|
||||
| Delete | 删除选中的组件 |
|
||||
| Ctrl+P | 预览页面 |
|
||||
| Esc | 退出当前模式或取消选择 |
|
||||
|
||||
## 下一步
|
||||
|
||||
- 了解如何[使用 AI 生成页面](ai-page-generation)
|
||||
- 学习[页面管理](page-management)的高级技巧
|
||||
- 探索更多[配置选项](../configuration)
|
||||
建设中...
|
||||
|
||||
@@ -1,192 +0,0 @@
|
||||
---
|
||||
id: page-management
|
||||
title: 页面管理
|
||||
---
|
||||
|
||||
# 页面管理
|
||||
|
||||
本文档介绍如何在 UPage 中管理、组织和维护您的页面，帮助您有效地管理网站内容。
|
||||
|
||||
## 页面列表
|
||||
|
||||
### 查看页面列表
|
||||
|
||||
1. 在 UPage 主界面，侧边栏显示了所有已创建的页面
|
||||
2. 页面按创建时间或自定义顺序排列
|
||||
3. 每个页面条目显示页面名称和最后修改时间
|
||||
|
||||
### 搜索和筛选
|
||||
|
||||
1. 使用侧边栏顶部的搜索框搜索特定页面
|
||||
2. 可以按页面名称、标签或内容进行搜索
|
||||
3. 使用筛选选项按页面类型、创建日期或状态筛选
|
||||
|
||||
## 页面操作
|
||||
|
||||
### 基本操作
|
||||
|
||||
在页面列表中，每个页面右侧有操作菜单，提供以下功能：
|
||||
|
||||
- **编辑**：打开页面编辑器
|
||||
- **预览**：在新标签页中预览页面
|
||||
- **复制**：创建页面的副本
|
||||
- **重命名**：修改页面名称
|
||||
- **删除**：删除页面（可恢复）
|
||||
- **导出**：导出页面代码或资源
|
||||
|
||||
### 批量操作
|
||||
|
||||
选择多个页面可以执行批量操作：
|
||||
|
||||
1. 使用复选框选择多个页面
|
||||
2. 点击批量操作按钮
|
||||
3. 选择要执行的操作（如删除、导出、应用标签等）
|
||||
|
||||
## 页面组织
|
||||
|
||||
### 使用标签
|
||||
|
||||
标签是组织页面的有效方式：
|
||||
|
||||
1. 在页面设置中添加标签
|
||||
2. 使用侧边栏中的标签筛选器查看特定标签的页面
|
||||
3. 标签可以用于分类页面（如"产品"、"博客"、"着陆页"等）
|
||||
|
||||
### 创建文件夹
|
||||
|
||||
对于大型项目，可以使用文件夹组织页面：
|
||||
|
||||
1. 点击侧边栏中的"新建文件夹"按钮
|
||||
2. 输入文件夹名称
|
||||
3. 将页面拖放到文件夹中
|
||||
4. 点击文件夹可以展开或折叠其内容
|
||||
|
||||
## 页面版本控制
|
||||
|
||||
### 版本历史
|
||||
|
||||
UPage 自动保存页面的版本历史：
|
||||
|
||||
1. 在页面编辑器中，点击"版本历史"按钮
|
||||
2. 查看页面的所有历史版本
|
||||
3. 点击任何版本可以预览该版本的页面状态
|
||||
|
||||
### 恢复版本
|
||||
|
||||
如果需要恢复到之前的版本：
|
||||
|
||||
1. 在版本历史中找到要恢复的版本
|
||||
2. 点击"恢复此版本"按钮
|
||||
3. 确认恢复操作
|
||||
4. 系统将创建一个新版本，内容与选定的历史版本相同
|
||||
|
||||
### 比较版本
|
||||
|
||||
比较不同版本之间的差异：
|
||||
|
||||
1. 在版本历史中选择两个版本
|
||||
2. 点击"比较"按钮
|
||||
3. 系统将显示两个版本之间的差异，包括添加、删除和修改的内容
|
||||
|
||||
## 页面设置
|
||||
|
||||
### 基本设置
|
||||
|
||||
每个页面都有以下基本设置：
|
||||
|
||||
1. **页面名称**：显示在侧边栏和浏览器标签中
|
||||
2. **页面描述**：用于 SEO 和社交媒体分享
|
||||
3. **URL 路径**：页面的访问路径
|
||||
4. **标签**：用于组织和分类页面
|
||||
5. **状态**：草稿、已发布或已归档
|
||||
|
||||
### SEO 设置
|
||||
|
||||
优化页面的搜索引擎表现：
|
||||
|
||||
1. **Meta 标题**：搜索结果中显示的标题
|
||||
2. **Meta 描述**：搜索结果中显示的描述
|
||||
3. **关键词**：与页面内容相关的关键词
|
||||
4. **规范 URL**：指定页面的规范 URL
|
||||
5. **索引设置**：控制搜索引擎是否索引页面
|
||||
|
||||
### 社交媒体设置
|
||||
|
||||
自定义页面在社交媒体上的显示方式：
|
||||
|
||||
1. **社交图片**：在社交媒体分享时显示的图片
|
||||
2. **社交标题**：在社交媒体分享时显示的标题
|
||||
3. **社交描述**：在社交媒体分享时显示的描述
|
||||
|
||||
## 页面导出和导入
|
||||
|
||||
### 导出页面
|
||||
|
||||
UPage 支持多种导出格式：
|
||||
|
||||
1. **HTML/CSS/JS**：导出标准 Web 文件
|
||||
2. **ZIP 归档**：包含所有页面资源的压缩包
|
||||
3. **JSON**：页面数据的 JSON 表示
|
||||
4. **PDF**：页面的 PDF 版本（适用于文档）
|
||||
|
||||
导出步骤：
|
||||
|
||||
1. 在页面列表中选择要导出的页面
|
||||
2. 点击"导出"按钮
|
||||
3. 选择导出格式
|
||||
4. 配置导出选项
|
||||
5. 点击"导出"开始下载
|
||||
|
||||
### 导入页面
|
||||
|
||||
导入现有页面：
|
||||
|
||||
1. 点击"导入"按钮
|
||||
2. 选择导入源（文件、URL 或代码）
|
||||
3. 上传文件或输入 URL/代码
|
||||
4. 配置导入选项
|
||||
5. 点击"导入"开始处理
|
||||
|
||||
## 页面备份
|
||||
|
||||
### 创建备份
|
||||
|
||||
定期备份您的页面：
|
||||
|
||||
1. 在设置中找到"备份"选项
|
||||
2. 点击"创建备份"按钮
|
||||
3. 输入备份描述（可选）
|
||||
4. 选择要包含的页面
|
||||
5. 点击"开始备份"
|
||||
|
||||
### 恢复备份
|
||||
|
||||
从备份中恢复页面：
|
||||
|
||||
1. 在设置中找到"备份"选项
|
||||
2. 找到要恢复的备份
|
||||
3. 点击"恢复"按钮
|
||||
4. 选择要恢复的页面
|
||||
5. 选择恢复模式（覆盖或创建新页面）
|
||||
6. 点击"开始恢复"
|
||||
|
||||
## 协作功能
|
||||
|
||||
### 共享页面
|
||||
|
||||
与团队成员共享页面：
|
||||
|
||||
1. 在页面操作菜单中选择"共享"
|
||||
2. 输入团队成员的电子邮件地址
|
||||
3. 选择权限级别（查看、编辑或管理）
|
||||
4. 点击"发送邀请"
|
||||
|
||||
### 评论和反馈
|
||||
|
||||
在页面上添加评论和反馈：
|
||||
|
||||
1. 在预览模式下，点击"评论"按钮
|
||||
2. 点击页面任何位置添加评论
|
||||
3. 输入评论内容
|
||||
4. 可以@提及团队成员
|
||||
5. 评论可以标记为已解决
|
||||
@@ -53,8 +53,6 @@ const sidebars = {
|
||||
},
|
||||
items: [
|
||||
'user-guide/basics',
|
||||
'user-guide/ai-page-generation',
|
||||
'user-guide/page-management',
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -50,3 +50,17 @@
|
||||
[data-theme="dark"] .base-url-highlight {
|
||||
color: #64b5f6;
|
||||
}
|
||||
|
||||
/* 亮暗模式下的 logo 切换 */
|
||||
.theme-logo {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.theme-logo img {
|
||||
content: url('/img/logo1.png');
|
||||
}
|
||||
|
||||
[data-theme="dark"] .theme-logo img {
|
||||
content: url('/img/logo2.png');
|
||||
}
|
||||
|
||||
BIN
docs/static/img/logo1.png
vendored
Normal file
BIN
docs/static/img/logo1.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
docs/static/img/logo2.png
vendored
Normal file
BIN
docs/static/img/logo2.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
docs/static/img/logo3.png
vendored
Normal file
BIN
docs/static/img/logo3.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Reference in New Issue
Block a user