网站栏目代码吕梁营销型网站建设费用
原文链接：https://www.nocobase.com/cn/tutorials/markdown-template-variables
亲爱的小伙伴们，欢迎来到本教程！在这一节中，我们将一步步学习如何利用 Markdown 和 Handlebars 模板引擎实现动态内容展示。之前在《Markdown 区块的妙用》中，你已了解了基本语法、创建方法及变量填充，接下来让我们深入探讨模板变量的高级用法。
1 模板引擎 Handlebars 简介
在你创建 Markdown 区块后，右上角的配置中会看到一个“模板引擎”选项，默认即为 Handlebars。Handlbars 能帮助你根据条件动态呈现页面内容，使Markdown也能响应变化。
1.1 Handlebars 的作用
尽管 Markdown 原生只支持静态内容展示，但通过 Handlebars，你可以依靠条件（如状态、数字或选项）来动态切换展示的文案和样式。这样，即使面对多变的业务场景，你的页面也能时刻更新显示正确的信息。
2 实际应用场景
现在，我们来看几个实用的场景，并一步步实现它们的功能。
2.1 处理订单状态
在一个在线 Demo 中，我们往往需要根据订单状态来展示不同的提示信息。假设你的订单数据表中有一个状态字段，其状态如下：
以下是 4 个状态对应的展示内容：
| 选项标签 | 选项值 | 展示内容 |
|---|---|---|
| Pending Approval | 1 | 订单已提交，等待内部审核。 |
| Pending Payment | 2 | 等待客户付款。请密切关注订单状态。 |
| Paid | 3 | 付款已确认，请进行后续处理。指定顾问将在1小时内与客户联系。 |
| Rejected | 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社区交流或查阅官方文档。希望本指南能帮助您根据实际需求顺利实现用户注册审核，并根据需要灵活扩展。祝您使用顺利，项目成功！