1.1.3開發基本自訂區塊
1.1.3.1設定您的本機開發環境
移至https://desktop.github.com/download/，下載並安裝 Github案頭版。
安裝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 Code中，開啟檔案 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 Code中，開啟檔案 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 Code中，開啟檔案 component-filters.json。
在 區段 下方，輸入逗號,，並將元件"fiberoffer"的識別碼貼到目前最後一行之後。
儲存您的變更。
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作者環境。 移至 網站。
移至 花旗訊號。 按一下 建立 並選取 頁面。
選取 頁面 並按一下 下一步。
輸入下列值：
- 標題： Fiber
- 名稱： fiber
- 頁面標題： Fiber
按一下 建立。
選取 開啟。
您應該會看到此訊息。
按一下空白區域以選取 section 元件。 然後，按一下右側功能表中的加號 + 圖示。
之後，您應該會在可用區塊清單中看到自訂區塊。 按一下以選取它。
接著，您會看到諸如 選件文字、選件CTA 和 選件影像 等欄位已新增至編輯器中。 按一下 選件影像 欄位上的 +新增 以選取影像。
您應該會看到此訊息。 按一下以開啟資料夾 citisignal。
選取影像 product-enrichment-1.png。 按一下 選取。
然後您應該擁有此專案。 按一下 發佈。
再按一下 發佈。
您的新頁面現已發佈。
1.1.3.5將您的新頁面新增至導覽功能表
在您的AEM Sites總覽中，移至 CitiSignal 並勾選檔案 Header/nav 的核取方塊。 按一下 編輯。
在預覽畫面中選取 文字 欄位，然後按一下畫面右側的 文字 欄位以進行編輯。
新增功能表選項至含有文字Fiber的導覽功能表。 選取文字 Fiber 並按一下 連結 圖示。
輸入此 URL /content/CitiSignal/fiber.html並按一下 V 圖示以確認。
然後您應該擁有此專案。 按一下「完成」。
然後您應該擁有此專案。 按一下 發佈。
再按一下 發佈。
您現在可以移至main--citisignal--XXX.aem.page/us/en/及/或main--citisignal--XXX.aem.live/us/en/，在將XXX取代為GitHub使用者帳戶（在此範例中為woutervangeluwe）之後，檢視您網站的變更。
在此範例中，完整URL會變成：https://main--citisignal--woutervangeluwe.aem.page/us/en/和/或https://main--citisignal--woutervangeluwe.aem.live/us/en/。
您應該會看到此訊息。 按一下 Fiber。
這是您的基本自訂區塊，但現在已呈現在網站上。
下一步： 進階自訂區塊
返回Adobe Experience Manager Cloud Service和Edge Delivery Services