原文鏈接：https://www.nocobase.com/cn/tutorials/markdown-template-varia...

親愛的小夥伴們，歡迎來到本教程！在這一節中，我們將一步步學習如何利用 Markdown 和 Handlebars 模板引擎實現動態內容展示。之前在《Markdown 區塊的妙用》中，你已瞭解了基本語法、創建方法及變量填充，接下來讓我們深入探討模板變量的高級用法。

1 模板引擎 Handlebars 簡介

在你創建 Markdown 區塊後，右上角的配置中會看到一個“模板引擎”選項，默認即為 Handlebars。Handlbars 能幫助你根據條件動態呈現頁面內容，使Markdown也能響應變化。

1.1 Handlebars 的作用

儘管 Markdown 原生只支持靜態內容展示，但通過 Handlebars，你可以依靠條件（如狀態、數字或選項）來動態切換展示的文案和樣式。這樣，即使面對多變的業務場景，你的頁面也能時刻更新顯示正確的信息。

2 實際應用場景

現在，我們來看幾個實用的場景，並一步步實現它們的功能。

2.1 處理訂單狀態

在一個在線 Demo 中，我們往往需要根據訂單狀態來展示不同的提示信息。假設你的訂單數據表中有一個狀態字段，其狀態如下：

以下是 4 個狀態對應的展示內容：

在頁面中，我們能夠捕獲到訂單狀態的值，進而動態地展示不同信息。下面我們將詳細講解如何使用 if、else 和 else if 語法實現這一功能。

2.1.1 if 語法

使用 if 條件，可以顯示符合條件的內容。例如：

{{#if 條件}}
  <p>展示結果</p>
{{/if}}

此處的“條件”需採用 Handlebars 的語法（如 eq、gt、lt 等）。試試這個簡單例子：

{{#if (eq 1 1)}}
  <p>展示結果: 1 = 1</p>
{{/if}}

效果參考下圖：

2.1.2 else 語法

當條件不滿足時，可以用 else 指定備用內容。例如：

{{#if (eq 1 2)}}
  <p>展示結果: 1 = 2</p>
{{else}}
  <p>展示結果：1 ≠ 2</p>
{{/if}}

效果如下：

2.1.3 多條件判斷

若要根據多個條件進行判斷，可以使用 else if。示例代碼：

{{#if (eq 1 7)}}
  <p>展示結果: 1 = 7</p>
{{else if (eq 1 5)}}
  <p>展示結果: 1 = 5</p>
{{else if (eq 1 4)}}
  <p>展示結果: 1 = 4</p>
{{else}}
  <p>展示結果: 1 ≠ 7 ≠ 5 ≠ 3</p>
{{/if}}

對應效果圖：

2.2 效果展示

配置好訂單狀態後，頁面會根據不同狀態動態切換顯示。請看下圖：

頁面中代碼如下：

{{#if order.status}}
  <div>
    {{#if (eq order.status "1")}}
      <span style="color: orange;">⏳ Pending Approval</span>
      <p>訂單已提交，等待內部審核。</p>
    {{else if (eq order.status "2")}}
      <span style="color: #1890ff;">💳 Pending Payment</span>
      <p>等待客户付款。請密切關注訂單狀態。</p>
    {{else if (eq order.status "3")}}
      <span style="color: #52c41a;">✔ Paid</span>
      <p>付款已確認，請進行後續處理。指定顧問將在1小時內與客户聯繫。</p>
    {{else if (eq order.status "4")}}
      <span style="color: #f5222d;">✖ Rejected</span>
      <p>訂單審批未通過。如有需要，請複查並重新發起。</p>
    {{/if}}
  </div>
{{else}}
  <p class="empty-state">當前無待處理訂單。</p>
{{/if}}

試着切換訂單狀態，觀察頁面內容是否隨之更新，驗證你的代碼是否正確。

2.3 展示訂單明細

除了訂單狀態展示，訂單明細（如商品詳情列表）也是常見需求。下面，我們利用 each 語法來實現該功能。

2.3.1 each 語法基本介紹

each 用於循環遍歷列表。例如，對於數組 [1,2,3]，你可以這樣寫：

{{#each 列表}}
  <p>展示結果：{{this}}</p>
  <p>索引：{{@index}}</p>
{{/each}}

在循環中，{{this}} 表示當前元素，{{@index}} 表示當前索引。

2.3.2 商品明細示例

假如你需要展示訂單中的所有商品信息，可以使用下面的代碼：

{{#each $nRecord.order_items}}
    <p>{{@index}}</p>
    <p>{{this.id}}</p>
    <p>{{this.price}}</p>
    <p>{{this.quantity}}</p>
    <p>{{this.product.name}}</p>
---
{{/each}}

如果發現頁面未出現數據，請確保訂單明細字段已被正確展示，否則系統會認為這部分數據為冗餘信息而不作查詢。

你可能會發現 商品對象的名稱(product.name) 沒有打印出來，和上面的原因一樣，我們需要把商品對象也展示出來才行

展示出來後，我們在聯動規則設置隱藏這個關聯字段

2.4 最終成品：訂單商品列表

完成上述步驟後，你將實現一個完整的訂單商品列表展示模板。請參考以下代碼：

### 訂單商品列表

{{#if $nRecord.order_items}}
  <div class="cart-summary">總計: {{$nRecord.order_items.length}} 件商品，總價格: ¥{{$nRecord.total}}</div>
  
  <table>
    <thead>
      <tr>
        <th>序號</th>
        <th>商品名稱</th>
        <th>單價</th>
        <th>數量</th>
        <th>小計</th>
      </tr>
    </thead>
    <tbody>
      {{#each $nRecord.order_items}}
        <tr style="{{#if this.out_of_stock}}color: red;{{/if}}">
          <td>{{@index}}</td>
          <td>{{this.product.name}}</td>
          <td>¥{{this.price}}</td>
          <td>{{this.quantity}}</td>
          <td>¥{{multiply this.price this.quantity}}</td>
          <td>
            {{#if this.out_of_stock}}
              <span>缺貨</span>
            {{else if this.low_stock}}
              <span style="color:orange;">庫存緊張</span>
            {{/if}}
          </td>
        </tr>
      {{/each}}
    </tbody>
  </table>
{{else}}
  <p>訂單為空</p>
{{/if}}

運行後，你會看到如下效果：

為了更好地展示 Handlebars 的靈活性，我們在訂單詳情中添加了“缺貨”（out_of_stock）和“庫存緊張”（low_stock）字段：

• 當 out_of_stock 為 true 時，會顯示“缺貨”，且商品條目變為紅色。
• 當 low_stock 為 true 時，右側提示“庫存緊張”並採用橙色顯示。

3 總結與建議

通過以上講解，你已學會如何利用 Handlebars 實現 Markdown 模板的動態渲染，包括 if/else 條件、each 循環等核心語法。在實際開發中，對於更復雜的邏輯，建議結合聯動規則、計算字段、工作流或 script 節點來提升靈活性和擴展性。

希望你能通過練習掌握這些技巧，並在項目中靈活應用。繼續努力，探索更多可能性吧！

若在操作過程中遇到任何問題，歡迎前往NocoBase社區交流或查閲官方文檔。希望本指南能幫助您根據實際需求順利實現用户註冊審核，並根據需要靈活擴展。祝您使用順利，項目成功！