使用選項開發區塊

此教學課程示範如何使用select （下拉式）輸入型別，讓作者選擇單一區塊選項，然後套用為單一對應的CSS類別。

{align="center"}

區塊模型

預設 ​選項以空字串("")表示，而​ 並排 ​選項則使用"side-by-side"。 選項的​ 名稱 ​和​ 值 ​不必相同，但​ 值 ​會決定套用至區塊HTML的CSS類別。 例如，並排 ​選項的值可以是layout-10而非side-by-side。 不過，最好對CSS類別使用語義上有意義的名稱，以確保選項值的清晰度和一致性。

[/blocks/teaser/_teaser.json]{class="badge neutral" title="以下程式碼範例的檔案名稱。"}

...
"fields": [
    {
        "component": "select",
        "name": "classes",
        "value": "",
        "label": "Teaser options",
        "valueType": "string",
        "options": [
            {
                "name": "Default",
                "value": ""
            },
            {
                "name": "Side-by-side",
                "value": "side-by-side"
            }
        ]
    }
]
...

封鎖HTML

作者選取選項時，對應的值會新增為區塊的HTML的CSS類別：

• 如果選取​ 預設：

  code language-html
  <div class="block teaser"> <!-- Block content here --> </div>

• 如果選取​ 並排：

  code language-html
  <div class="block teaser side-by-side"> <!-- Block content here --> </div>

這可讓您根據所選的開啟專案，套用不同的樣式和條件式JavaScript。

此教學課程未使用這個方法，但說明了替代方法和進階區塊選項。

select輸入型別可讓作者選擇單一區塊選項，該選項可選擇對應至多個CSS類別。 若要完成此操作，請以空格分隔的值形式列出CSS類別。

{align="center"}

區塊模型

例如，並排 ​選項可支援影像在左側(side-by-side left)或右側(side-by-side right)出現的變化。

[/blocks/teaser/_teaser.json]{class="badge neutral" title="以下程式碼範例的檔案名稱。"}

...
"fields": [
    {
        "component": "select",
        "name": "classes",
        "value": "",
        "label": "Teaser options",
        "valueType": "string",
        "options": [
            {
                "name": "Default",
                "value": ""
            },
            {
                "name": "Side-by-side with Image on left",
                "value": "side-by-side left"
            },
            {
                "name": "Side-by-side with Image on right",
                "value": "side-by-side right"
            }
        ]
    }
]
...

封鎖HTML

作者選取選項時，對應的值會在區塊的HTML中，套用為一組以空格分隔的CSS類別：

• 如果選取​ 預設：

  code language-html
  <div class="block teaser"> <!-- Block content here --> </div>

• 如果選取​ 與影像並排於左側：

  code language-html
  <div class="block teaser side-by-side left"> <!-- Block content here --> </div>

• 如果選取​ 並排影像（位於右側）：

  code language-html
  <div class="block teaser side-by-side right"> <!-- Block content here --> </div>

這可讓您根據所選的選項，套用不同的樣式和條件式JavaScript。

此教學課程未使用這個方法，但說明了替代方法和進階區塊選項。

"component": "multiselect"的輸入型別允許作者同時選取多個選項。 如此可結合多種設計選擇，讓區塊的外觀發生複雜的排列。

{align="center"}

區塊模型

例如，並排、左側​ 的 ​影像和右側​ 的 ​影像可支援影像位於左側(side-by-side left)或右側(side-by-side right)的變異。

[/blocks/teaser/_teaser.json]{class="badge neutral" title="以下程式碼範例的檔案名稱。"}

...
"fields": [
    {
        "component": "multiselect",
        "name": "classes",
        "value": [],
        "label": "Teaser options",
        "valueType": "array",
        "options": [
            {
                "name": "Side-by-side",
                "value": "side-by-side"
            },
            {
                "name": "Image on left",
                "value": "left"
            },
            {
                "name": "Image on right",
                "value": "right"
            }
        ]
    }
]
...

封鎖HTML

當作者選取多個選項時，對應的值會在區塊的HTML中套用為以空格分隔的CSS類別：

• 如果選取​ 並排 ​和左側​ 影像：

  code language-none h-1
  <div class="block teaser side-by-side left"> <!-- Block content here --> </div>

• 如果選取​ 並排 ​和右側​ 的 ​影像：

  code language-none h-1
  <div class="block teaser side-by-side right"> <!-- Block content here --> </div>

雖然多選提供彈性，但設計排列的管理卻相當複雜。 若沒有限制，衝突的選取專案可能會導致體驗中斷或品牌外。

例如：

• 影像在左側 ​或​ 影像在右側 ​而未選取​ 並排 ​會隱含地套用至​ 預設，此預設會一律將影像設定為背景，因此左右對齊是不相關的。
• 同時選取左邊的​ 影像 ​和右邊的​ 影像是矛盾的。
• 選取​ 並排的，但不包含​ 影像在左側 ​或影像在右側​ 可能會被視為模稜兩可，因為影像的位置未指定。

若要避免發生問題並在使用多選時避免作者混淆，請確保選項已妥善規劃且所有排列均已測試。 多重選取最適合用於簡單、非衝突的增強功能，例如「大型」或「反白」，而非版面變更選擇。

此教學課程未使用這個方法，但說明了替代方法和進階區塊選項。

在Universal Editor中將新區塊執行個體新增至頁面時，區塊選項可設為預設值。 若要這麼做，請在區塊的定義中設定classes屬性的預設值。

區塊定義

在下列範例中，將classes欄位的value屬性指派給side-by-side，預設選項設定為​ 並排。 區塊模型中對應的區塊選項輸入是選用的。

您也可以為相同區塊定義多個專案，每個專案都有不同的名稱和類別。 這可讓Universal Editor顯示不同的區塊專案，每個區塊專案都已預先設定特定的區塊選項。 雖然這些區段在編輯器中會顯示為個別區塊，但程式碼基底會包含根據所選選項動態呈現的單一區塊。

[/blocks/teaser/_teaser.json]{class="badge neutral" title="以下程式碼範例的檔案名稱。"}

{
    "definitions": [{
      "title": "Teaser",
      "id": "teaser",
      "plugins": {
        "xwalk": {
          "page": {
            "resourceType": "core/franklin/components/block/v1/block",
            "template": {
              "name": "Teaser",
              "model": "teaser",
              "classes": "side-by-side",
              "textContent_text": "<h2>Enter a title</h2><p>...and body text here!</p>",
              "textContent_cta": "/",
              "textContent_ctaText": "Click me!"
            }
          }
        }
      }
    }],
    "models": [... from previous section ...],
    "filters": []
}

以下是Teaser區塊的DOM，已選取​ 並排 ​區塊選項，這是使用JavaScript和CSS裝飾的目標。

...
<body>
    <header/>
    <main>
        <div>
            <!-- Start block HTML -->
            <div class="teaser block side-by-side" data-block-name="teaser" data-block-status="loaded">
                <div>
                    <div>
                    <picture>
                        <source type="image/webp" srcset="./media_15ba2b455e29aca38c1ca653d24c40acaec8a008f.jpeg?width=2000&format=webply&optimize=medium" media="(min-width: 600px)">
                        <source type="image/webp" srcset="./media_15ba2b455e29aca38c1ca653d24c40acaec8a008f.jpeg?width=750&format=webply&optimize=medium">
                        <source type="image/jpeg" srcset="./media_15ba2b455e29aca38c1ca653d24c40acaec8a008f.jpeg?width=2000&format=jpeg&optimize=medium" media="(min-width: 600px)">
                        <img loading="eager" alt="Woman looking out over a river." src="./media_15ba2b455e29aca38c1ca653d24c40acaec8a008f.jpeg?width=750&format=jpeg&optimize=medium" width="1600" height="900">
                    </picture>
                    </div>
                </div>
                <div>
                    <div>
                    <h2 id="wknd-adventures">WKND Adventures</h2>
                    <p>Join us on one of our next adventures. Browse our list of curated experiences and sign up for one when you're ready to explore with us.</p>
                    <p>Terms and conditions: By signing up, you agree to the rules for participation and booking.</p>
                    <p class="button-container"><a href="/" title="View trips" class="button">View trips</a></p>
                    </div>
                </div>
            </div>
            <!-- End block HTML -->
        </div>
    </main>
    <footer/>
</body>
...

若要尋找要裝飾的DOM，請在您的本機開發環境中開啟包含區塊的頁面，使用網頁瀏覽器的開發人員工具選取區塊，然後檢查DOM。 這可讓您識別要裝飾的相關元素。

{align="center"}