開發具有選項的區塊

本教學課程示範如何使用 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>

雖然多重選取能提供彈性，但是管理設計的排列組合也是複雜的工作。若無限制，相互衝突的選取內容可能會導致不連續或不符合品牌形象的體驗。

例如：

• 若選擇「影像在左側」或「影像在右側」但未選取「並排」，則會在默示情況下套用「預設」，而由於預設選項一律將影像設定為背景，因此左側和右側的對齊方式不會產生作用。
• 同時選取「影像在左側」和「影像在右側」是相互矛盾的。
• 選取「並排」卻未選取「影像在左側」或「影像在右側」，可能被認為是設定不明確，因為沒有指定影像的位置。

為了避免出現問題，也不要讓作者在使用多重選取時感到困惑，請確保選項經過精心規劃，並且所有排列組合都經過測試。多重選取最適合簡單且不會衝突的增強選項，例如「大」或「醒目提示」等，而比較不適合版面變化的選項。

本教學課程中並未使用此方法，但會舉例說明替代方法和進階區塊選項。

在通用編輯器中，要在頁面中新增區塊實例時，可以將區塊選項設定為預設值。方法是在區塊定義中設定 classes 屬性的預設值。

區塊定義

在下方範例中，把 classes 欄位的 value 屬性指派為 side-by-side，即可把預設選項設定為「並排」。您可以選擇在區塊模型中輸入相對應的區塊選項。

您也可以為同一個區塊定義多個項目，每個項目具有不同的名稱和類別。這樣一來，通用編輯器可以顯示不同的區塊項目，每個項目都預先設定好特定的區塊選項。雖然這些在編輯器中顯示為個別區塊，但程式碼基底包含一個會根據所選選項而動態轉譯的單一區塊。

[/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"}