1.1.3开发基本自定义块
1.1.3.1设置您的本地开发环境
转到https://desktop.github.com/download/，下载并安装 Github Desktop。
安装Github Desktop后，转到您在上一个练习中创建的GitHub存储库。 单击 <>代码，然后单击 使用GitHub Desktop打开。
然后，将在GitHub Desktop中打开您的GitHub存储库。 请随时更改 本地路径。 单击 克隆。
现在将创建一个本地文件夹。
打开Visual Studio Code。 转到 文件 > 打开文件夹。
选择你的GitHub设置用于 citisignal-aem-accs 的文件夹。
现在，您将在Visual Studio Code中看到该文件夹处于打开状态，此时您已准备好创建新块。
1.1.3.2创建基本自定义块
Adobe建议您分三步开发块：
- 创建块的定义和模型，查看它并将其用于生产。
- 使用新块创建内容。
- 实施新块的修饰和样式。
component-definition.json
在Visual Studio代码中，打开文件 component-definition.json。
向下滚动直到看到 块 为止。 将光标设置在组件 卡片 的右括号下
粘贴此代码并在代码块后面输入逗号 ，：
{
"title": "FiberOffer",
"id": "fiberoffer",
"plugins": {
"xwalk": {
"page": {
"resourceType": "core/franklin/components/block/v1/block",
"template": {
"name": "FiberOffer",
"model": "fiberoffer",
"offerText": "<p>Fiber will soon be available in your region!</p>",
"offerCallToAction": "Get your offer now!",
"offerImage": ""
}
}
}
}
}
保存更改。
component-models.json
在Visual Studio代码中，打开文件 component-models.json。
向下滚动，直到看到最后一个项目。 将光标设置在最后一个组件的右括号旁边。
输入逗号 ，，然后按回车键，并在下一行粘贴此代码：
{
"id": "fiberoffer",
"fields": [
{
"component": "richtext",
"name": "offerText",
"value": "",
"label": "Offer Text",
"valueType": "string"
},
{
"component": "richtext",
"valueType": "string",
"name": "offerCallToAction",
"label": "Offer CTA",
"value": ""
},
{
"component": "reference",
"valueType": "string",
"name": "offerImage",
"label": "Offer Image",
"multi": false
}
]
}
保存更改。
component-filters.json
在Visual Studio代码中，打开文件 component-filters.json。
在 部分 下，输入逗号,并将组件"fiberoffer"的ID粘贴到当前最后一行之后。
保存更改。
1.1.3.3提交更改
现在，您在项目中进行了一些需要提交回GitHub存储库的更改。 为此，请打开 GitHub Desktop。
然后，您应该会在 更改 下看到刚才编辑的3个文件。 查看更改。
输入PR的名称Fiber Offer custom block。 单击 提交到主页面。
您应该会看到此内容。 单击 推送来源。
几秒钟后，您的更改已推送到GitHub存储库。
在浏览器中，转到您的GitHub帐户，并转到您为CitiSignal创建的存储库。 然后，您应该会看到类似这样的内容，表明您的更改已收到。
1.1.3.4将您的块添加到页面
现在，您的基本报价块已定义并提交到CitiSignal项目，您可以向现有页面添加 fiberoffer 块。
转到https://my.cloudmanager.adobe.com。 单击您的 程序 以将其打开。
接下来，单击 环境 选项卡上的3个点 …，然后单击 查看详细信息。
然后，您将看到环境详细信息。 单击 作者 环境的URL。
然后，您应该会看到您的AEM创作环境。 转到 站点。
转到 花旗信号。 单击 创建 并选择 页面。
选择 页面 并单击 下一步。
输入以下值：
- 标题： 光纤
- 名称： fibre
- 页面标题： 光纤
单击 创建。
选择 打开。
您应该会看到此内容。
单击空白区域以选择 节 组件。 然后，单击右菜单中的加号 + 图标。
随后，您应该会在可用块列表中看到自定义块。 单击以将其选中。
随后您将看到诸如 选件文本、选件CTA 和 选件图像 之类的字段被添加到编辑器中。 单击 选件图像 字段上的 +添加 以选择图像。
您应该会看到此内容。 单击以打开文件夹 citisignal。
选择图像 product-enrichment-1.png。 单击 选择。
然后您应该拥有此项。 单击 发布。
再次单击 发布。
您的新页面现已发布。
1.1.3.5将您的新页面添加到导航菜单
在您的AEM Sites概述中，转到 CitiSignal 并选中文件 Header/nav 的复选框。 单击 编辑。
在预览屏幕中选择 文本 字段，然后单击屏幕右侧的 文本 字段对其进行编辑。
向导航菜单添加一个带有文本Fiber的菜单选项。 选择文本 光纤 并单击 链接 图标。
输入此 URL /content/CitiSignal/fiber.html并单击 V 图标进行确认。
然后您应该拥有此项。 单击 完成。
然后您应该拥有此项。 单击 发布。
再次单击 发布。
现在，在将XXX替换为您的GitHub用户帐户（本示例中为main--citisignal--XXX.aem.page/us/en/）之后，您可以通过转到main--citisignal--XXX.aem.live/us/en/和/或woutervangeluwe查看对您网站的更改。
在此示例中，完整URL将变为：https://main--citisignal--woutervangeluwe.aem.page/us/en/和/或https://main--citisignal--woutervangeluwe.aem.live/us/en/。
您应该会看到此内容。 单击 光纤。
这是您的基本自定义块，但现在已呈现在网站上。
下一步：高级自定义块
返回Adobe Experience Manager Cloud Service和Edge Delivery Services