51黑料不打烊

1. 访问 AEM Forms Boilerplate 模板

   • 前往

   
   图：包含预配置自适应表单块的 AEM Forms Boilerplate 存储库

2. 创建您的存储库

   • 点击? 使用此模板 > 创建新的存储库

   
   图：使用模板创建新的存储库

3. 配置存储库设置

   • 所有者：选择您的 GitHub 帐户或组织
   • 存储库名称：选择一个描述性名称（例如 my-forms-project）
   • 可见性：选择? 公开（建议 Edge Delivery Services 使用）
   • 点击? 创建存储库

   
   图：将新存储库配置为公开可见

验证： ?确认您有一个基于 AEM Forms Boilerplate 模板的新 GitHub 存储库。

AEM Code Sync 会将您的 AEM 创作环境与您的 GitHub 存储库之间的内容更改自动同步。

1. 安装 GitHub 应用程序

   • 前往

2. 配置访问权限

   • 选择? 仅选择存储库
   • 选择您新创建的存储库
   • 单击? 保存

   
   图：使用存储库专用的权限安装 AEM Code Sync

检查点： AEM Code Sync 已安装完毕，并可以访问您的存储库。

fstab.yaml 文件将您的 GitHub 存储库与 AEM 创作环境连接，以实现内容同步。

1. 导航到您的存储库

   • 前往新创建的 GitHub 存储库
   • 您应该能看到 AEM Forms Boilerplate 文件

2. 创建 fstab.yaml 文件

   • 在根目录中点击? 添加文件 > 创建新文件
   • 为文件命名 fstab.yaml

   
   图：创建 fstab.yaml 配置文件

3. 添加您的 AEM 连接详细信息

   复制粘贴以下配置，将替换占位符：

   code language-yaml
   mountpoints: /: url: https://<aem-author>/bin/franklin.delivery/<owner>/<repository>/main type: "markup" suffix: ".html"

   替换：

   • <aem-author>：您的 AEM as a Cloud Service 作者 URL（例如 author-p12345-e67890.adobeaemcloud.com）
   • <owner>：您的 GitHub 用户名或组织
   • <repository>：您的存储库名称

   示例：

   code language-yaml
   mountpoints: /: https://author-p12345-e67890.adobeaemcloud.com/bin/franklin.delivery/mycompany/my-forms-project/main

   
   图：配置 AEM 集成的挂载点

4. 提交配置

   • 添加提交消息：“添加 AEM 集成配置”
   • 点击? 提交新文件

   
   图：提交 fstab.yaml 配置

验证： ?确认您的 GitHub 存储库与 AEM 连接。

1. 访问 AEM Sites 控制台

   • 登录您的 AEM as a Cloud Service 创作实例
   • 导航到 Sites

   
   图：访问 AEM Sites 控制台

2. 开始创建网站

   • 点击? 创建 > 从模板创建网站

   
   图：从模板创建一个新网站

3. 选择 Edge Delivery Services 模板

   • 选择 Edge Delivery Services Site 模板
   • 点击? 下一个

   
   图：选择 Edge Delivery Services 网站模板

   note note
   NOTE
   模板不可用？ ?如果您看不到 Edge Delivery Services 模板：
   点击? 导入，上传模板 从 下载模板

4. 配置您的网站

   输入以下信息：

   table 0-row-3 1-row-3 2-row-3 3-row-3
   字段	值	示例
   网站标题	网站的描述性名称	“我的表单项目”
   网站名称	URL 友好的名称	"my-forms-project"
   GitHub URL	您的存储库 URL	https://github.com/mycompany/my-forms-project

   
   图：配置集成了 GitHub 的新 AEM 网站

5. 完成网站创建

   • 检查您的设置
   • 单击? 创建

   
   图：确认网站创建

   成功！ ?您的 AEM 网站创建完毕，并已与 GitHub 连接。

6. 在通用编辑器中打开

   • 在 Sites 控制台中找到您的新网站
   • 选择 index 页面
   • 点击? 编辑

   
   图：打开您的网站进行编辑

   通用编辑器在一个新选项卡中打开，提供所见即所得的创作功能。

   
   图：您的网站在通用编辑器中打开，可以所见即所得的方法进行编辑

验证： ?确认您的 AEM 网站已准备好进行表单创作。

发布后，您的网站可以在 Edge Delivery Services 上供全球访问。

1. 从 Sites 控制台快速发布

   • 返回到 AEM Sites 控制台
   • 选择您的网站页面（或通过 Ctrl+A 选择全部）
   • 点击? 快速发布

   
   图：选择要快速发布的页面

2. 确认发布

   • 在确认对话框中点击? 发布

   
   图：确认发布操作

   另一种方法： ?您还可以使用发布按钮直接从通用编辑器发布。

   
   图：直接从通用编辑器发布

3. 访问您的上线网站

   您的网站现已上线：

   code language-none
   https://<branch>--<repo>--<owner>.aem.page/content/<site-name>/

   URL 结构说明：

   • <branch>：GitHub 分支（通常为 main）
   • <repo>：您的存储库名称
   • <owner>：您的 GitHub 用户名或组织
   • <site-name>：您的 AEM 网站名称

   示例：

   code language-none
   https://main--my-forms-project--mycompany.aem.page/content/my-forms-project/

验证： ?确认您的网站在 Edge Delivery Services 上线。

下一步： 创建您的第一个表单

1. 导航到您的本地项目

   code language-bash
   cd /path/to/your/aem-project

2. 从 AEM Forms Boilerplate 下载所需文件

   从 复制这些文件：

   table 0-row-3 1-row-3 2-row-3 3-row-3
   源	目标	用途
   	blocks/form/	核心表单功能
   	scripts/form-editor-support.js	通用编辑器集成
   	scripts/form-editor-support.css	编辑器样式

3. 更新编辑器支持

   • 将您的 /scripts/editor-support.js 文件替换为

验证： ?确认表单块文件已在您的项目中。

1. 更新分区模型

   打开 /models/_section.json，然后将表单组件添加到过滤器：

   code language-json
   { "filters": [ { "id": "section", "components": [ "text", "image", "button", "form", "embed-adaptive-form" ] } ] }

   作用： ?在通用编辑器组件选取器中启用表单组件。

验证： ?确认表单组件显示在通用编辑器中。

为什么要执行此步骤： ?防止表单专用文件中的代码错误，并配置适当的验证规则。

1. 更新 .eslintignore

   将这些行添加到 /.eslintignore：

   code language-bash
   # Form block rule engine files blocks/form/rules/formula/* blocks/form/rules/model/* blocks/form/rules/functions.js scripts/editor-support.js scripts/editor-support-rte.js

2. 更新 .eslintrc.js

   将这些规则添加到 /.eslintrc.js 中的 rules 对象中：

   code language-javascript

   { "rules": { // Existing rules... // Form component cell limits 'xwalk/max-cells': ['error', { '*': 4, // default limit form: 15, wizard: 12, 'form-button': 7, 'checkbox-group': 20, checkbox: 19, 'date-input': 21, 'drop-down': 19, email: 22, 'file-input': 20, 'form-fragment': 15, 'form-image': 7, 'multiline-input': 23, 'number-input': 22, panel: 17, 'radio-group': 20, 'form-reset-button': 7, 'form-submit-button': 7, 'telephone-input': 20, 'text-input': 23, accordion: 14, modal: 11, rating: 18, password: 20, tnc: 12 }], // Disable this rule for forms 'xwalk/no-orphan-collapsible-fields': 'off' } }

验证： ?确认 ESLint 可与表单组件共同使用。

1. 安装依赖项并构建

   code language-bash
   # Install any new dependencies npm install # Build component definitions npm run build:json

   作用：

   • 通过表单组件更新 component-definition.json
   • 使用表单模型生成 component-models.json
   • 通过筛选规则创建 component-filters.json

2. 验证生成的文件

   检查项目根目录中的这些文件是否包含与表单相关的对象：

   • component-definition.json
   • component-models.json
   • component-filters.json

3. 提交并推送更改内容

   code language-bash
   git add . git commit -m "Add Adaptive Forms Block integration" git push origin main

验证： ?确认您的项目包含表单功能。

1. 在通用编辑器中打开您的页面

   • 导航至 AEM 中的 Sites 控制台。
   • 选择要添加表单（例如 index）的页面
   • 点击? 编辑

   您的页面将在通用编辑器中打开，可以所见即所得的方式进行编辑。

2. 添加自适应表单组件

   • 打开? 内容树 ?面板（左侧边栏）
   • 导航到您想要添加表单的那个分区
   • 点击? 添加 (+) 图标
   • 从组件列表中选择? 自适应表单

   
   图：将自适应表单块添加到您的页面

验证： ?确认您有一个空的表单容器。

1. 导航到您的表单块

   • 在内容树中，找到您新添加的自适应表单分区

   
   图：内容树中的自适应表单块

2. 添加表单组件

   您可以通过两种方式添加组件：

   方法 A：点击添加

   • 点击表单分区中的? 添加 (+) 图标
   • 从? 自适应表单组件 ?列表中添加组件

   方法 B：拖放

   • 将组件直接从组件面板拖到您的表单中

   
   图：将组件添加到表单中

   推荐的基本组件：

   • 文本输入（用于姓名、电子邮件）
   • 文本区域（用于消息）
   • 提交按钮

3. 配置组件属性

   • 选择任意一个表单组件

   • 使用? 属性 ?面板（右侧边栏）配置：

     • 标签和占位符
     • 验证规则
     • 必填字段设置

   
   图：配置组件属性

4. 预览您的表单

   您的表单看起来类似这样：

   
   图：使用通用编辑器创建的表单示例

验证： ?确认您的表单已准备好发布。

1. 从通用编辑器发布

   • 点击通用编辑器中的? 发布 ?按钮

   
   图：从通用编辑器发布您的表单

2. 确认发布

   • 在确认对话框中点击? 发布

   
   图：确认发布操作

   您将看到确认发布成功的消息。

   
   图：确认发布成功

3. 查看您的上线表单

   您的表单现已上线：

   code language-none
   https://<branch>--<repo>--<owner>.aem.live/content/<site-name>/

   URL 示例：

   code language-none
   https://main--my-forms-project--mycompany.aem.live/content/my-forms-project/

   
   图：您在 Edge Delivery Services 上发布的表单页面

祝贺您！ ?您的表单现已上线，并已准备好收集提交内容。

1. 安装 AEM CLI

   AEM CLI 简化了本地开发任务：

   code language-bash
   npm install -g @adobe/aem-cli

2. 克隆您的存储库

   code language-bash
   git clone https://github.com/<owner>/<repo> cd <repo>

   将 <owner> 和 <repo> 替换为您的实际 GitHub 详细信息。

3. 启动本地开发服务器

   code language-bash
   aem up

   这将启动一个具有热重载功能的本地服务器。

4. 进行自定义

   • 编辑 blocks/form/ 目录中的文件，定义表单的样式和行为
   • 更改 form.css 定义样式
   • 更新 form.js 定义行为

   在您位于 http://localhost:3000 的浏览器中? 立即查看更改

5. 部署您的更改

   code language-bash
   git add . git commit -m "Custom form styling" git push origin main

   您的更改在以下环境中可用：

   • 预览： https://<branch>--<repo>--<owner>.aem.page/content/<site-name>
   • 生产： https://<branch>--<repo>--<owner>.aem.live/content/<site-name>

问题： ?构建失败或代码错误

解决办法 1：处理代码错误

如果遇到代码错误：

1. 在您的项目根目录中打开 package.json

2. 找到 lint 脚本：

   code language-json
   "scripts": { "lint": "npm run lint:js && npm run lint:css" }

3. 暂时禁用代码检查：

   code language-json
   "scripts": { "lint": "echo 'skipping linting for now'" }

4. 提交并推送更改

解决办法 2：模块路径错误

如果您看到“无法解析模块‘/蝉肠谤颈辫迟蝉/濒颈产-蹿谤补苍办濒颈苍.箩蝉’的路径”：

1. 导航至 blocks/form/form.js

2. 更新导入语句：

   code language-javascript
   // Change this: import { ... } from '/scripts/lib-franklin.js'; // To this: import { ... } from '/scripts/aem.js';

问题： ?表单提交功能不起作用

解决办法：

• 确保您有一个提交按钮组件
• 检查表单操作 URL 配置
• 验证表单验证规则
• 首先在预览模式中测试

问题： ?样式问题

解决办法：

• 检查 blocks/form/ 中的 CSS 文件路径
• 清除浏览器缓存
• 验证 CSS 语法
• 在本地开发环境中测试

问题： ?通用编辑器中不显示表单组件

解决办法：

• 验证 AEM Code Sync 是否已安装且已运行
• 检查 fstab.yaml 是否具有正确的 AEM 作者 URL
• 确保您的 AEM 实例已启用早期访问
• 确认 component-definition.json 包含表单组件

问题： ?更改在发布后看不见

解决办法：

• 等待 CDN 缓存刷新
• 检查浏览器缓存（尝试隐身/私人模式）
• 验证是否使用了正确的 URL 格式