1.1.4开发基本自定义块

1.1.4.1设置您的本地开发环境

转到https://desktop.github.com/download/，下载并安装​ Github Desktop。

{modal="regular"}

安装Github Desktop后，转到您在上一个练习中创建的GitHub存储库。 单击​ <>代码，然后单击​ 使用GitHub Desktop打开。

{modal="regular"}

然后，将在GitHub Desktop中打开您的GitHub存储库。 请随时更改​ 本地路径。 单击​ 克隆。

{modal="regular"}

现在将创建一个本地文件夹。

{modal="regular"}

打开Visual Studio Code。 转到​ 文件 > 打开文件夹。

{modal="regular"}

选择GitHub安装程序用于​ citisignal ​的文件夹。

{modal="regular"}

现在，您将在Visual Studio Code中看到该文件夹处于打开状态，此时您已准备好创建新块。

{modal="regular"}

1.1.4.2创建基本自定义块

Adobe建议您分三步开发块：

component-definition.json

在Visual Studio代码中，打开文件​ component-definition.json。

{modal="regular"}

向下滚动直到看到组件​ Quote ​为止。 将光标设置在最后一个组件的右括号旁边。

{modal="regular"}

粘贴此代码并在代码块后面输入逗号​ ，：

{
  "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": ""
        }
      }
    }
  }
}

保存更改。

{modal="regular"}

component-models.json

在Visual Studio代码中，打开文件​ component-models.json。

{modal="regular"}

向下滚动，直到看到最后一个项目。 将光标设置在最后一个组件的右括号旁边。

{modal="regular"}

输入逗号​ ，，然后按回车键，并在下一行粘贴此代码：

{
  "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
     }
   ]
}

保存更改。

{modal="regular"}

component-filters.json

在Visual Studio代码中，打开文件​ component-filters.json。

{modal="regular"}

在​ 部分 ​下，在当前最后一行后面输入逗号​ 、 ​和组件​ fiberoffer ​的ID。

保存更改。

{modal="regular"}

1.1.4.3提交更改

现在，您在项目中进行了一些需要提交回GitHub存储库的更改。 为此，请打开​ GitHub Desktop。

然后，您应该会在​ 更改 ​下看到刚才编辑的3个文件。 查看更改。

{modal="regular"}

输入PR的名称Fiber Offer custom block。 单击​ 提交到主页面。

{modal="regular"}

您应该会看到此内容。 单击​ 推送来源。

{modal="regular"}

几秒钟后，您的更改已推送到GitHub存储库。

{modal="regular"}

在浏览器中，转到您的GitHub帐户，并转到您为CitiSignal创建的存储库。 然后，您应该会看到类似这样的内容，表明您的更改已收到。

{modal="regular"}

1.1.4.4将您的块添加到页面

现在，您的基本报价块已定义并提交到CitiSignal项目，您可以向现有页面添加​ fiberoffer ​块。

转到https://my.cloudmanager.adobe.com。 单击您的​ 程序 ​以将其打开。

{modal="regular"}

接下来，单击​ 环境 ​选项卡上的3个点​ …，然后单击​ 查看详细信息。

{modal="regular"}

然后，您将看到环境详细信息。 单击​ 作者 ​环境的URL。

{modal="regular"}

然后，您应该会看到您的AEM创作环境。 转到​ 站点。

{modal="regular"}

转到​ CitiSignal > us > en。

{modal="regular"}

单击​ 创建 ​并选择​ 页面。

{modal="regular"}

选择​ 页面 ​并单击​ 下一步。

{modal="regular"}

输入以下值：

单击​ 创建。

{modal="regular"}

您应该会看到此内容。

{modal="regular"}

单击空白区域以选择​ 节 ​组件。 然后，单击右菜单中的加号​ + ​图标。

{modal="regular"}

随后，您应该会在可用块列表中看到自定义块。 单击以将其选中。

{modal="regular"}

随后您将看到诸如​ 选件文本、选件CTA ​和​ 选件图像 ​之类的字段被添加到编辑器中。 单击​ 选件图像 ​字段上的​ +添加 ​以选择图像。

{modal="regular"}

您应该会看到此内容。 单击以打开文件夹​ citisignal。

{modal="regular"}

选择图像​ product-enrichment-1.png。 单击​ 选择。

{modal="regular"}

然后您应该拥有此项。 单击​ 发布。

{modal="regular"}

再次单击​ 发布。

{modal="regular"}

您的新页面现已发布。

1.1.4.5将您的新页面添加到导航菜单

在您的AEM Sites概述中，转到​ CitiSignal > Fragments，并选中​ Header ​的复选框。 单击​ 编辑。

{modal="regular"}

向导航菜单添加一个带有文本Fiber的菜单选项。 选择文本​ 光纤 ​并单击​ 链接 ​图标。

{modal="regular"}

输入此​ URL /us/en/citisignal-fiber并单击​ V ​图标进行确认。

{modal="regular"}

然后您应该拥有此项。 单击​ 发布。

{modal="regular"}

再次单击​ 发布。

{modal="regular"}

现在，在将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/。

您应该会看到此内容。 单击​ 光纤。

{modal="regular"}

这是您的基本自定义块，但现在已呈现在网站上。

{modal="regular"}

下一步： 1.1.5高级自定义块

返回Adobe Experience Manager Cloud Service和Edge Delivery Services

返回所有模块