文件AEM 6.5使用手冊

擴充和設定登入頁面的Design Importer extending-and-configuring-the-design-importer-for-landing-pages

Last update: Thu Aug 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

建立對象：

  • 管理員

本節說明如何設定，以及視需要擴充登入頁面的設計匯入工具。 匯入後使用登入頁面包含在登入頁面中。

讓設計匯入工具提取您的自訂元件

以下是讓Design Importer識別您的自訂元件的邏輯步驟

  1. 建立TagHandler

    • 標籤處理常式是處理特定型別HTML標籤的POJO。 您的TagHandler可以處理的HTML標籤「種類」是透過TagHandlerFactory的OSGi屬性「tagpattern.name」來定義。 此OSGi屬性基本上是規則運算式，應該符合您要處理的輸入html標籤。 所有巢狀標籤都會擲回標籤處理常式進行處理。 例如，如果您註冊包含巢狀<p>標籤的div，<p>標籤也會擲回至TagHandler，而由您自行決定如何處理。
    • 標籤處理常式介面類似於SAX內容處理常式介面。 它會接收每個html標籤的SAX事件。 作為標籤處理常式提供者，您需要實作設計匯入工具架構自動呼叫的特定生命週期方法。

  2. 建立其對應的TagHandlerFactory。

    • 標籤處理常式工廠是OSGi元件(singleton)，負責產生標籤處理常式的例項。
    • 您的標籤處理常式工廠必須公開名為「tagpattern.name」的OSGi屬性，該屬性的值與輸入html標籤相符。
    • 如果有多個標籤處理常式符合輸入html標籤，則會挑選排名較高的處理常式。 排名本身會顯示為OSGi屬性​ service.ranking。
    • TagHandlerFactory是OSGi元件。 您要提供給TagHandler的任何參考都必須透過此工廠提供。

  3. 如果您想要覆寫預設值，請確定TagHandlerFactory的排名較好。

CAUTION
AEM 6.5🔗已棄用用來匯入登入頁面的Design Importer 。

準備匯入的HTML preparing-the-html-for-import

建立匯入工具頁面後，您可以匯入完整的HTML登陸頁面。 若要匯入HTML登入頁面，您必須先將其內容壓縮至設計封裝。 設計套件包含您的HTML登陸頁面以及參照的資產（影像、css、圖示、指令碼等）。

下列速查表提供如何準備匯入HTML的範例：

登陸頁面速查表

取得檔案

Zip檔案配置與需求 zip-file-layout-and-requirements

NOTE
此時，ZIP檔案只能包含一個HTML頁面或頁面的一部分。

郵遞區號的範例配置如下：

  • /index.html >登陸頁面HTML檔案
  • /css >新增至CSS clientlib
  • /img >所有影像和資產
  • /js >新增至JS clientlib

此配置是根據HTML5樣板最佳實務配置。 如需詳細資訊，請參閱https://html5boilerplate.com/

NOTE
設計封裝​ 至少必須 ​在根層級包含​ index.html ​檔案。 如果要匯入的登入頁面也有行動版本，則zip在根層級必須包含​ mobile.index.html ​以及​ index.html。

準備登入頁面HTML preparing-the-landing-page-html

為了能夠匯入HTML，您需要將畫布div新增到登陸頁面HTML。

Canvas div是具有id="cqcanvas"的html div，必須插入HTML<body>標籤中，且必須包裝要轉換的內容。

新增畫布div後登入頁面HTML的範例片段如下：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
</head>
<body>
 <div id="cqcanvas">
  <!-- HTML content intended for conversion -->
 </div>
</body>
</html>

準備HTML以包含可編輯的AEM元件 preparing-the-html-to-include-editable-aem-components

匯入登入頁面時，您可以選擇按原樣匯入頁面，這表示在匯入登入頁面後，您無法在AEM中編輯任何匯入的專案(您仍然可以在頁面上新增其他AEM元件)。

在匯入登入頁面之前，您可能需要轉換登入頁面的某些部分，使其成為可編輯的AEM元件。 這可讓您快速編輯登入頁面的部分，即使登入頁面設計已匯入亦然。

若要這麼做，請將data-cq-component新增至您匯入之HTML檔案中的適當元件。

下節將說明如何編輯HTML檔案，以便將登入頁面的某些部分轉換為其他可編輯的AEM元件。 在登入頁面元件中詳細說明元件。

NOTE
將部分登入頁面轉換為AEM元件的HTML標示同時具有長格式和速記標籤宣告。 針對每個元件說明兩者。

限制 limitations

匯入之前，請注意下列限制：

不會保留套用至&amp；lt；body>標籤的任何屬性，例如類別或id any-attribute-like-class-or-id-applied-on-the-amp-lt-body-tag-is-not-preserved

如果有任何屬性（例如id或類別）套用至body標籤（例如<body id="container">），則匯入後不會保留。 因此，匯入的設計不應與套用至<body>標籤的屬性有任何相依性。

拖放zip drag-and-drop-zip

Internet Explorer和Firefox 3.6版及舊版不支援拖放zip上傳。 若要在使用這些瀏覽器時上傳設計，請按一下拖放檔案區域，開啟檔案上傳對話方塊，然後使用該對話方塊上傳您的設計。

支援「拖放」設計Zip的瀏覽器為Chrome、Safari5.x、Firefox 4及更高版本。

不支援Modernizer modernizr-is-not-supported

Modernizr.js是以JavaScript為基礎的工具，可偵測瀏覽器的原生功能，並偵測這些功能是否適用於html5元素。 使用Modernizer來增強支援舊版不同瀏覽器的設計，可能會導致登陸頁面解決方案中出現匯入問題。 Design Importer不支援Modernizr.js指令碼。

匯入設計封裝時未保留頁面屬性 page-properties-are-not-preserved-at-the-time-of-importing-design-package

為頁面（使用空白登陸頁面範本）設定的任何頁面屬性（例如，自訂網域、強制執行HTTPS等）在匯入設計封裝之前都會在匯入設計封裝後遺失。 因此，建議您在匯入設計封裝後設定頁面屬性。

假設只有HTML標示 html-only-markup-assumed

匯入時，標籤會因為安全性原因而遭到清除，以避免匯入和發佈無效的標籤。 這假設僅限HTML的標籤以及所有其他形式的元素(例如內嵌SVG或Web元件)將被篩選掉。

文字 text

HTML標示，可在設計封裝內的HTML中插入文字元件( foundation/components/text)：

<div data-cq-component="text"> <p>This is some editable text</p> </div>

在HTML中包含上述標籤，會執行下列動作：

  • 在匯入設計封裝後建立的登入頁面中建立可編輯的AEM文字元件(sling:resourceType=foundation/components/text)。
  • 將已建立文字元件的text屬性設定為div內所包含的HTML。

速記元件標籤宣告：

<p data-cq-component="text">Text component shorthand</p>

含清單的文字

新增包含清單的文字：

  • 1st
  • 2nd

可以在RTE編輯器中編輯的專案：

<div data-cq-component="text"><p>This is text with a list:</p><ul><li>1st</li><li>2nd</li></ul><p>It can be edited with the RTE editor</p></div>

文字色彩

若要新增可在RTE編輯器中編輯的文字顏色（粉紅色）：

<div class="pink" data-cq-component="text"><p>This is pink text.</p><p>It can be edited with the RTE editor</p></div>

標題 title

HTML標示，可在設計封裝內的HTML中插入標題元件( wcm/landingpage/components/title)：

<div data-cq-component="title"> <h1>This is some editable title text</h1> </div>

在HTML中包含上述標籤，會執行下列動作：

  • 在匯入設計封裝後建立的登入頁面中建立可編輯的AEM標題元件( sling:resourceType=wcm/landingpage/components/title)。
  • 將已建立標題元件的jcr:title屬性設定為包在div內的標題標籤內的文字。
  • 將type屬性設定為標題標籤，在此案例中為h1。

標題元件支援七種型別 — h1, h2, h3, h4, h5, h6和default。

速記元件標籤宣告：

<h1 data-cq-component="title">Title component shorthand</h1>

影像 image

HTML標示，可在設計封裝內的HTML中插入影像元件(foundation/components/image)：

<div data-cq-component="image">
<img src="img/video1.png" alt="Video about Polar Brake Goggles in action" title="Polar Brake Goggles" width="300" height="200" />
</div>

在HTML中包含上述標籤，會執行下列動作：

  • 在匯入設計封裝後建立的登入頁面中建立可編輯的AEM影像元件( sling:resourceType=foundation/components/image)。
  • 將建立的影像元件的fileReference屬性設定為src屬性中指定的影像匯入路徑。
  • 將alt屬性設定為img標籤中alt屬性的值。
  • 將title屬性設定為img標籤中title屬性的值。
  • 將width屬性設定為img標籤中width屬性的值。
  • 將height屬性設定為img標籤中height屬性的值。

速記元件標籤宣告：

<img data-cq-component="image" src="test.png" alt="Image component shorthand"/>

影像元件Div中不支援絕對URL img src absolute-url-img-src-not-supported-within-image-component-div

如果嘗試使用具有絕對URL src的<img>標籤進行元件轉換，則會引發適當的​ UnsupportedTagContentException。 例如，不支援下列專案：

<div data-cq-component="image">

<img src="https://cdn.printfriendly.com/pf-button.gif" alt="Print Friendly and PDF"/>

</div>

否則，不屬於影像元件div的img標籤支援絕對URL影像。

行動號召元件 call-to-action-components

您可以將部分登入頁面標示為「可編輯的行動號召元件」，這樣已匯入的行動號召元件可在匯入登入頁面後進行編輯。 AEM包含下列CTA元件：

  • 點進連結 — 可讓您新增文字連結，當按一下連結時，會將訪客導向至目標URL。
  • 圖形連結 — 可讓您新增影像，在按一下時讓訪客移至目標URL。

此CTA元件可用來在登入頁面上新增文字連結。

支援的屬性

  • 標籤，具有粗體、斜體和底線選項
  • 目標URL，支援第三方和AEM URL
  • 頁面呈現選項（相同視窗、新視窗等）

HTML標籤，以在匯入的zip檔案中包含點進元件。 此處href對應至目標URL、「檢視產品詳細資料」對應至標籤，以此類推。

<div id="cqcanvas">
.
.
                <div data-cq-component="clickThroughLink">
        <a href="/content/we-retail/us/en/products/equipment/snow-sports/flying-snowboard.html">View Product Details  ></a>
  </div>
.
.
</div>

此元件可用於任何獨立應用程式，或可從zip匯入。

速記元件標籤宣告：

<a href="/somelink.html" data-cq-component="clickThroughLink">Click Through Link shorthand</a>

此CTA元件可用來新增登陸頁面上具有連結的任何圖形影像。 影像可以是簡單的按鈕，也可以是任何圖形影像作為背景。 按一下影像時，使用者將被帶往元件屬性中指定的目標URL。 它是「行動號召」群組的一部分。

支援的屬性

  • 影像裁切、旋轉
  • 暫留文字、說明、大小（以畫素為單位）
  • 目標URL，支援第三方和AEM URL
  • 頁面呈現選項（相同視窗、新視窗等）

HTML標籤，在匯入的zip檔案中包含圖形連結元件。 此處href對應至目標url，img src是呈現影像，「title」是當作暫留文字，以此類推。

<div id="cqcanvas">
  <div data-cq-component="clickThroughGraphicalLink"><a href="https://www.adobe.com/go/wem"><img src="img/call-to-action-button.png" title="Click Here to Learn More" /></a></div>
</div>

速記元件標籤宣告：

<a href="/somelink.html" data-cq-component="clickThroughGraphicalLink"><img src="linkimage.png" alt="Click Through Graphical Link shorthand"/></a>
NOTE
若要建立點進圖形連結，您必須將錨點標籤和影像標籤包裝在具有data-cq-component="clickthroughgraphicallink"屬性的div中。
例如 <div data-cq-component="clickthroughlink"> <a href="https://myURLhere/"><img src="image source here"></a> </div>
不支援使用CSS將影像與錨點標籤建立關聯的其他方法。 例如，下列標籤無法運作：
<div data-cq-component="clickthroughgraphicallink">
<a class="hasBackground" href="https://myURLhere/"></a>
</div>
與相關聯的css .hasbackground { background-image: pathtoimage }

銷售機會表單 lead-form

潛在客戶表單是用於收集訪客/潛在客戶設定檔資訊的表單。 這些資訊可儲存於以後使用，以便根據資訊進行有效的行銷。 此資訊通常包括標題、名稱、電子郵件、出生日期、地址、興趣等。 它是「CTA銷售機會表單」群組的一部分。

支援的功能

  • 預先定義的銷售機會欄位 — 名字、姓氏、地址、dob、性別、關於、userId、emailId、提交按鈕在sidekick中可用。 只需在潛在客戶表單中拖放所需的元件即可。

  • 在這些元件的協助下，作者可以設計獨立的銷售機會表單，這些欄位與銷售機會表單欄位相對應。 在獨立或匯入的zip應用程式中，使用者可以使用cq：form或cta潛在客戶表單欄位、名稱來新增額外的欄位，並根據需求進行設計。

  • 使用CTA潛在客戶表單的特定預先定義名稱來對應潛在客戶表單欄位，例如 — 潛在客戶表單中名字的firstName等等。

  • 未對應到潛在表單對應到cq：form元件的欄位 — 文字、單選、核取方塊、下拉式清單、隱藏、密碼。

  • 使用者可以使用「label」標籤提供標題，也可以使用樣式屬性「class」提供樣式(僅適用於CTA潛在客戶表單元件)。

  • 感謝頁面和訂閱清單可作為表單的隱藏引數提供（出現在index.htm中），或可從「潛在客戶表單開始」的編輯列新增/編輯

    <input type="hidden" name="redirectUrl" value="/content/we-retail/en/user/register/thank_you"/>

    <input type="hidden" name="groupName" value="leadForm"/>

  • 每個元件的編輯組態都可以提供 — 等限制。

HTML標籤，在匯入的zip檔案中包含圖形連結元件。 這裡「firstName」對應到潛在客戶表單firstName，以此類推，但核取方塊除外 — 這兩個核取方塊對應到cq：form下拉式元件。

<div id="cqcanvas">
   <div id="form_wrapper">
    <h2>NEWSLETTER SIGN UP</h2>
       <div data-cq-component="leadFormGeneration">
       <form method="post" action="#" onsubmit="return popupBox()">
       <label for="firstName" class="checkText">
        FIRST NAME
       </label><br />
       <input name="firstName" class="text pink" type="text" /><br />
       <label for="lastName" class="checkText">
        LAST NAME
       </label><br />
       <input name="lastName" class="text pink" type="text" /><br />
       <label for="emailId" class="checkText">
        EMAIL ADDRESS
       </label><br />
       <input name="emailId" class="text pink" type="text" /><br />

       <div class="checkboxes">
       <input type="checkbox" class="check" name="send_news" /> <label for="send_news" class="checkText">Send me the latest We.Retail news and announcements.</label><br />
       <input type="checkbox" class="check" name="send_offers" /> <label for="send_offers" class="checkText">Send me We.Retail deals and special offers.</label><br />
       </div>
       <input type="submit" name="submit" class="submit pink" value="Sign Up >" />
       </form>
     </div>
   </div>

Parsys parsys

AEM Parsys元件是可包含其他AEM元件的容器元件。 可以在匯入的HTML中新增Parsys元件。 這可讓使用者在登入頁面新增/刪除可編輯的AEM元件，即使頁面已匯入亦然。

段落系統讓使用者能夠使用Sidekick新增元件。

HTML標示，可在設計封裝內的HTML中插入Parsys元件( foundation/components/parsys)：

<div data-cq-component="parsys">
   <div data-cq-component="title"><h2>ULTIMATE PROTECTION</h2></div>
        <div data-cq-component="title"><h3>ON SALE</h3></div>
</div>

在HTML中包含上述標籤會執行下列動作：

  • 在匯入設計封裝後建立的登入頁面中插入AEM Parsys元件(foundation/components/parsys)。
  • 使用預設元件初始化Sidekick。 將元件從sidekick拖曳至Parsys元件上，可將新元件新增至登入頁面。
  • 兩個標題元件也是Parsys的一部分。

目標 target

目標元件會顯示頁面上的體驗內容。 您可以在行銷活動中建立許多體驗，且目標元件可動態地向造訪頁面的不同使用者顯示不同體驗的內容。

用於插入Target元件以及在行銷活動中建立不同體驗的HTML標籤：

<div data-cq-component="target">
 <section data-cq-component="experience" data-cq-experience="default">
  <p data-cq-component="text">Default content. Select this campaign in client context to view other experiences</p>
 </section>

 <section data-cq-component="experience" data-cq-segment="over-30">
  <p data-cq-component="text">Content for Over 30</p>
 </section>

 <section data-cq-component="experience" data-cq-segment="under-30">
  <p data-cq-component="text">Content for Under 30</p>
 </section>
</div>

其他匯入選項 additional-importing-options

除了指定匯入的元件是否為可編輯的AEM元件以外，您也可以在匯入設計封裝之前設定下列專案：

  • 擷取匯入HTML中定義的中繼資料，以設定頁面屬性。
  • 指定HTML中的字元集編碼。
  • 覆蓋匯入工具頁面範本。

透過擷取匯入HTML中定義的中繼資料來設定頁面屬性 setting-page-properties-by-extracting-metadata-defined-in-imported-html

設計匯入工具應擷取並保留在匯入HTML標題中宣告的以下中繼資料，作為屬性「jcr：description」：

  • <meta name="description" content=">

在HTML標籤中設定的Lang屬性應由設計匯入工具擷取並保留為屬性"jcr：language"

  • <html lang="en">

指定html中的字元集編碼 specifying-the-charset-encoding-in-the-html

設計匯入工具會讀取匯入HTML中指定的編碼。 編碼方式可依下列方式指定：

<meta charset="UTF-8">

或

<meta http-equiv="content-type" content="text/html;charset=utf-8">

如果匯入HTML中未指定編碼，則設計匯入工具設定的預設編碼為UTF-8。

覆蓋範本 overlaying-template

您可以在/apps/<appName>/designimporter/templates/<templateName>建立空白登入頁面範本，以將其覆蓋

在AEM中建立範本的步驟在範本下說明。

從登入頁面反向連結元件 referring-a-component-from-landing-page

假設您有一個元件，且您要使用data-cq-component屬性在HTML中參照該元件，如此設計匯入工具就會在此呈現一個元件包含。 例如，您想要參考資料表元件( resourceType = /libs/foundation/components/table)。 需要在HTML中新增下列專案：

<div data-cq-component="/libs/foundation/components/table">foundation table</div>

data-cq-component中的路徑應為元件的resourceType。

最佳做法 best-practices

對於在匯入時標籤為要進行元件轉換的元素，不建議使用類似於以下專案的CSS選取器。

E > F
E元素的F元素子項
子組合器
E + F
緊接在E元素前面的F元素
相鄰的同層級組合器
E ~ F
F元素前面加上E元素
一般同層級組合器
E：root
E元素，檔案的根
結構化的虛擬類別
E：nth-child(n)
E元素，其父項的第n個子項
結構化的虛擬類別
E：nth-last-child(n)
E元素，其父項的第n個子項，從最後一個專案開始計數
結構化的虛擬類別
E：nth-of-type(n)
E元素，其型別的第n個同層級
結構化的虛擬類別
E：nth-last-of-type(n)
E元素，其型別的第n個同層級，從最後一個專案開始計數
結構化的虛擬類別

這是因為其他html元素（例如<div>標籤）會在匯入後新增至產生的Html。

  • 此外，不建議將依賴上述結構的指令碼與標示為要轉換至AEM元件的元素搭配使用。
  • 不建議在標籤標籤上使用樣式來轉換元件，例如<div data-cq-component="&amp；ast；">。
  • 設計配置應遵循HTML5 Boilerplate的最佳實務。 閱讀更多資訊： https://html5boilerplate.com/。

設定OSGI模組 configuring-osgi-modules

以下元件會公開可透過OSGI主控台設定的屬性：

  • 登陸頁面設計匯入工具
  • 登陸頁面產生器
  • 行動登陸頁面產生器
  • 登陸頁面登入前置處理器

下表簡要說明屬性：

元件
屬性名稱
屬性說明
登陸頁面設計匯入工具
擷取篩選器
用於篩選擷取中檔案的規則運算式清單。 從擷取中排除符合任何指定模式的
個Zip專案
登陸頁面產生器
檔案模式
登入頁面產生器可設定為處理符合檔案模式所定義之規則運算式的HTML檔案。
行動登陸頁面產生器
檔案模式
登入頁面產生器可設定為處理符合檔案模式所定義之規則運算式的HTML檔案。
裝置群組
要支援的裝置群組清單。
登陸頁面登入前置處理器
搜尋模式
要在封存專案內容中搜尋的模式。 此規則運算式與專案內容逐行比對。 相符時，相符的文字會以指定的取代模式取代。

請參閱下方關於登陸頁面專案前置處理器目前限制的附註。
取代圖樣
取代找到的相符項的模式。 您可以使用$1、$2之類的規則運算式群組參考。 此外，此模式支援在匯入期間以實際值解析的關鍵字，例如{designPath}。
NOTE
登陸頁面專案前置處理器的目前限制：
如果您需要對搜尋模式進行任何變更，在開啟felix屬性編輯器時，您需要手動新增反斜線字元以逸出規則運算式中繼字元。 如果您未手動新增反斜線字元，則規則運算式會被視為無效，且不會取代舊的。
例如，如果預設設定為
​>/\* *CQ_DESIGN_PATH *\*/ *(['"])
而且您必須將CQ_DESIGN_PATH取代為搜尋模式中的VIPURL，則您的搜尋模式應該如下所示：
/\* *VIPURL *\*/ *(['"])

疑難排解 troubleshooting

匯入設計封裝時，您可能會遇到數個錯誤，如本節所述。

使用登陸頁面相關元件初始化Sidekick initialization-of-sidekick-with-landing-page-relevant-components

如果設計套件包含Parsys元件標籤，則在匯入後，sidekick會開始顯示登陸頁面相關元件。 您可以將新元件拖放至登陸頁面內的Parsys元件上。 您也可以前往設計模式並將新元件新增到Sidekick。

匯入期間顯示的錯誤訊息 error-messages-displayed-during-import

如果發生任何錯誤（例如，匯入的封裝不是有效的zip），則設計匯入不會匯入封裝。 相反地，錯誤訊息會顯示在頁面頂端拖放方塊的上方。 此處列出錯誤情況的範例。 更正錯誤後，您可以將更新後的zip檔案重新匯入相同的空白登陸頁面上。 擲回錯誤的不同情況如下：

  • 匯入的設計封裝不是有效的zip封存。
  • 匯入的設計封裝在頂層不包含index.html。

匯入後顯示警告 warnings-displayed-after-import

如果有任何警告(例如HTML參照封裝內不存在的影像)，設計匯入工具會匯入zip，但同時在結果窗格中顯示問題/警告清單，按一下問題連結會顯示警告清單，指出設計封裝內的任何問題。 設計匯入工具攔截到並顯示警告的不同情況如下：

  • HTML是指封裝內不存在的影像。
  • HTML是指套件中不存在的指令碼。
  • HTML是指封裝內不存在的樣式。

ZIP檔案的檔案儲存在AEM中的什麼位置？ where-are-the-files-of-the-zip-file-being-stored-in-aem

匯入登入頁面後，設計套件中的檔案（影像、css、js等）會儲存在AEM的下列位置：

/etc/designs/default/canvas/content/campaigns/<name of brand>/<name of campaign>/<name of landing page>

假設登入頁面是在行銷活動We.Retail下建立，且登入頁面的名稱為​ myBlankLandingPage，則Zip檔案的儲存位置如下：

/etc/designs/default/canvas/content/campaigns/geometrixx/myBlankLandingPage

未保留格式 formatting-not-preserved

建立CSS時，請留意下列限制：

如果文字和（可編輯的）影像如下所示：

<div class="box">
<p><div data-cq-component="image"><img src="assets/image.jpg" width="115"
height="116" /></div>Some Text </p>
</div>

類box上套用CSS，如下所示：

.box

{ width: 450px; padding:10px; border: 1px #C5DBE7 solid; margin: 0px auto 0 auto; background-image:url(assets/box.gif); background-repeat:repeat-x,y; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#6D6D6D; }

然後在設計匯入工具中使用box img，產生的登陸頁面似乎沒有保留格式。 為了解決這個問題，AEM在CSS中新增div標籤，並據此重寫程式碼。 否則，某些CSS規則將無效。

.box img

{ float:right; margin: 0 0 5px 5px; border: 1px #343434 solid; }
NOTE
設計工具應該只將​ id=cqcanvas ​標籤內的程式碼由匯入工具識別，否則不會保留設計。
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2