应用编辑

更新时间:
复制 MD 格式

应用编辑是万小智的可视化编辑器。可通过右侧AI对话面板用自然语言修改应用,也可进入编辑模式对页面元素进行可视化微调,并管理页面、保存与发布。

进入应用编辑

等待 AI 生成应用完成后,单击顶部的 编辑 按钮。

image

进入编辑模式后,页面右侧为编辑工具栏,左侧为应用实时编辑区域。

通过AI对话修改应用

进入应用编辑后,页面左侧为站点预览,右侧为AI对话面板。可直接用自然语言描述修改需求,由AI自动执行,并在站点预览中查看效果,无需逐一手动调整页面元素。

通过AI对话修改应用的操作如下:

  1. 在右侧AI对话面板的输入框中,用自然语言描述修改需求,

    如“在新闻资讯列表页增加搜索功能”。
  2. 提交后AI自动执行,AI对话面板会显示执行过程。

  3. 在左侧站点预览区验收效果,AI执行后修改自动生效,无需手动保存。

    如需继续调整,重复上述步骤。

image

在输入框中按/可唤起技能选择面板,调用已安装的技能扩展万小智的能力,如生成图片、接入支付、地图等。

通过编辑模式微调页面

对文字、图片等页面元素的细节调整,可进入编辑模式手动微调。在站点预览右侧单击 编辑 进入编辑模式,单击页面中的元素即可对其进行编辑。

拖动元素

页面中的文本、图片等均为元素。在编辑模式下,按住元素可对其进行拖动,调整元素的位置。

编辑文本

可以通过两种方式修改文本:

  • 快速编辑:在画布中双击任意文本元素,即可直接进行内容输入和修改。

  • 详细配置:在画布中单击选中文本元素,左侧的 配置面板 将显示所有可用的样式和功能选项。

设置文本样式

选中任意文本元素后,可在右侧 配置面板 中调整以下样式:

  • 字体:从预设的字体列表中选择。

  • 字号:调整文字的大小。

  • 基础样式:包括 加粗、倾斜、下划线、删除线。

  • 布局:调整 行高 和 字间距。

  • 颜色:设置 文本色 和 背景色。

image

添加链接

  1. 选中需要添加链接的元素。

  2. 在左侧 配置面板 中,单击 链接 图标。

  3. 选择链接类型:

    • 外部链接:输入目标网站的完整 URL。

    • 页面链接:选择链接到网站内部的另一个页面。

  4. 选择链接的打开方式:在 当前窗口 打开或在 新窗口 中打开。

image

编辑图片

在编辑模式下,可以替换和调整网站中的图片。image

  1. 在画布中单击需要编辑的图片元素。

  2. 在右侧 配置面板 中,选择以下任意方式更新图片:

    本地替换:

    • 素材中心:单击 素材,从已有的图库素材中选择图片。

    • 本地上传:从本地上传新图片。

      说明

      限制:支持 JPG、PNG、GIF、WEBP 格式,单张图片最大为 10 MB。

    image (8)

    创意生图:

    • AI 生图:在对话框中用自然语言描述想要的图片内容和风格,AI 将自动生成并替换。

    • AI 修图:

      1. 单击本地上传或从素材中选择原始图片。

      2. 在对话框中用自然语言描述编辑要求,如"去掉杂物, 提亮, 保持肤色自然",不超过200字,AI 将自动生成并替换。

    • 添加文字:

      1. 单击本地上传或从素材中选择原始图片。

      2. 在对话框中输入要添加到图片上的文字,不超过10个字。

        用自然语言描述文字样式要求,如"白色大字块, 放在图片中央, 添加阴影效果",不超过200字。AI 将自动生成并显示在图上。

    • 背景替换:

      1. 单击本地上传或从素材中选择原始图片。

      2. 在对话框中用自然语言描述想要的背景效果,AI 将自动生成并替换。

    • Logo制作:在对话框中输入您的品牌名。用自然语言描述logo样式要求,AI 将自动生成并替换。

    image (9)

  3. 图片更新后,如果需要调整显示区域,可单击 裁剪图片。拖动选框以确定裁剪范围,然后单击 应用。image.png

编辑列表内容

列表模块(如文章列表、产品列表)用于动态展示在内容管理系统中发布的内容。可指定列表具体展示哪些内容。

编辑列表文本和图片

列表中的文本和图片编辑方式与普通文本和图片相同:选中文本元素,直接编辑;单击图片可替换图片。

选择数据源

  1. 选中列表模块。

  2. 在左侧 配置面板 中,单击数据源。

  3. 选择数据来源方式。

    • 直接选择:从所有的文章或产品中手动勾选要展示的内容。

    • 从分类中选择:先选择一个分类,然后从该分类下的内容中进行选择。

  4. 单击确认更换,列表将更新为所选内容。

说明

文章或产品列表目前仅支持按发布时间倒序展示,不支持自定义排序方式。

页面管理

管理网站页面结构,包括创建和删除页面,以及配置页面的搜索引擎优化(SEO)信息。

新建页面

  1. 在编辑器顶部的页面管理面板中,单击 新建页面。

    image

  2. 在弹出的对话框中配置页面信息:

    • 功能描述:详细描述此页面需要包含的内容和功能。描述越详细,AI 生成的页面越符合预期。

      示例:创建一个“服务范围”页面,需要包含三个主要服务项目,每个项目都配有图标、标题和简短描述,页面底部需要一个引导用户联系我们的按钮。

管理页面 TDK

TDK 指的是页面的 页面名称 (Title)、功能描述 (Description) 和 关键词 (Keywords),它们对搜索引擎排名至关重要。

  • AI 自动生成:新建页面时,AI 会根据功能描述自动生成初始 TDK。

  • 手动编辑:可在页面设置中随时手动修改 TDK。

    image

删除页面

在顶部页面管理面板中,找到要删除的页面,单击其旁边的 删除。

重要

删除页面将同时删除该页面的所有语言版本。如需恢复,请前往历史版本页面操作。

多语言

万小智支持为网站配置多语言版本。多语言的开启与管理在AI套件中进行,详情请参见客服套件文档。

开启多语言

通过AI套件开启多语言功能。开启后,AI 会自动配置语言支持并在导航栏集成语言切换器。

  • 方式一:单击左侧导航栏中的客服套件,开启智能翻译下的开关。

    image (7)

  • 方式二:在右侧AI对话框中发送“开启多语言”指令。系统将自动执行多语言集成,包括配置语言支持、安装组件包、集成语言切换器到导航栏。

集成完成后,万小智会回复集成过程和结果。

切换语言预览

在页面顶部的语言切换区域,鼠标单击后会显示下拉选择框,选择目标语言即可切换预览页面的语言版本。

image

说明

语言切换器位于网站内容导航栏右侧,仅在预览模式下可操作。

网站默认显示语言

访客访问网站时,系统会根据其浏览器的语言设置自动匹配并展示对应的语言版本,暂不支持强制指定某个固定语言作为默认显示语言。如需让指定访客看到英语版本,需确保其浏览器语言设置为英语。

删除某个语言的翻译页面后,如果访问首页仍看到该语言内容,通常是访客浏览器的语言设置命中了该语言版本,并非删除未生效。可将浏览器语言切换为目标语言后重新访问网站,确认展示效果。

同步翻译

编辑器默认开启多语言同步翻译。修改一种语言的内容并保存时,系统会自动将变更同步翻译到其他语言版本。

如需对某个语言单独编辑,可以取消该语言的同步翻译选项。取消后,该语言版本的内容不会随其他语言的修改而自动更新。

同步翻译仅对文本内容生效。图片、Logo 等非文本元素不会随语言切换自动翻译,在所有语言版本中保持一致。

源语言编辑限制

多语言模式下,仅支持在源语言环境中编辑内容。如果当前预览的是非源语言版本,单击页面中的可编辑元素时,系统会自动切换回源语言进行编辑。

说明

源语言是指创建网站时使用的默认语言。其他语言版本的内容通过同步翻译自动生成,不支持直接编辑。如需单独调整某个语言版本的内容,可先取消该语言的同步翻译选项。

修改译文内容

若 AI 自动生成的译文不准确(例如公司名称、品牌名等需要固定译法),或需要修改语言的显示名称,可通过以下方式处理:

  • 修改译文:在管理页面进入智能翻译的译文精校功能,找到对应条目手动修改译文并保存。非源语言内容不支持在编辑器画布中直接编辑,画布中单击非源语言元素会自动切换回源语言进行编辑。

  • 限制:译文精校需逐条手动修改译文。

  • 修改语言显示名称:在编辑器中选中语言切换控件,单击编辑图标,即可将语言名称修改为目标显示名称(例如将“Indonesian”改为“印度尼西亚语”)。

  • 生效提示:修改译文或语言设置后,如页面未同步更新显示,请刷新页面或重新进入网站查看。

  • 操作建议:批量修改译文前,建议先在管理页面备份网站内容,避免误操作导致内容丢失。

分享网站时,默认分享当前预览页面的语言版本。

保存与发布

编辑模式与预览模式

编辑器提供两种工作模式,通过顶部工具栏的按钮进行切换:

  • 编辑模式:默认模式。在此模式下,可对页面进行所有修改操作。鼠标悬浮在元素上会显示蓝色边框,单击可选中并进行编辑。

  • 预览模式:只读模式。此模式模拟真实用户的访问体验,所有编辑控件会被隐藏,链接和交互效果可以正常点击。用于在发布前检查网站的最终效果。

网站最终展示效果以预览模式为准。请以预览效果作为发布依据,并在编辑状态下调整排版。

说明

在编辑器内置预览框中测试支付宝等外部支付跳转时,可能无法正常跳转,属于预览框的正常限制。测试此类外部跳转功能时,请单击在新窗口打开预览,或直接访问已发布的正式域名测试,不要在预览框中直接操作。

保存与发布

  • 保存:编辑器中的修改操作将实时保存。

  • 发布:完成所有编辑后,单击顶部工具栏的 发布 按钮,即可将所有修改同步至线上。如需回滚到之前的线上版本,请使用 版本切换功能。

常见问题

如何批量上传图片?

如需快速进行图片的批量上传,点击后台管理 > 素材管理 > 批量上传。

如何恢复编辑操作?

根据不同场景,可通过以下两种方式恢复之前的编辑操作:

  • 对话版本历史:适用于 AI 对话过程中出现的误删元素、AI 指令执行异常,或模糊指令导致页面白屏等未发布状态。在左侧对话栏单击时间标签或时钟按钮,查看对话版本历史,找到目标状态后单击切换版本。

  • 发布历史:适用于回滚到已发布的线上版本。在左侧菜单中选择版本管理,查看版本列表(包含版本号、版本名称和发布时间),找到目标版本,单击其右侧的切换版本。如需了解详情,请参见版本切换。

编辑器中不建议依赖 Ctrl+Z 撤销,请使用上述版本历史功能恢复操作。通过版本历史恢复操作不消耗灵感值。

恢复历史版本会覆盖当前的修改吗?

版本切换会将网站整体状态恢复到所选历史版本,该版本之后的所有修改都会被覆盖,包括其间做对的部分;当前未保存的内容或基于较新版本创建的内容也会被覆盖。若只想保留部分新修改,不建议整体回溯版本,可手动调整或通过复制页面等方式保留所需内容。恢复时,可在设计页面左下角单击时钟图标,或在左侧菜单选择发布历史进行版本切换。

如何节省灵感值?

一些简单的修改是支持手动调整的,比如文字的修改,这样手动修改就不会消耗您的灵感值了。

地图组件上的文字如何改为英文?

开启多语言功能后,地图组件(高德地图)的文字标注自动跟随网站当前语言显示,无需单独设置。在预览模式下,通过导航栏的语言切换器选择目标语言,地图上的标题、地址和标注文字同步切换。