写点什么

Markdown 模板变量的使用

作者:NocoBase
  • 2025-03-17
    上海
  • 本文字数:2590 字

    阅读完需:约 8 分钟

Markdown 模板变量的使用

原文链接:Markdown 模板变量的使用 - NocoBase

亲爱的小伙伴们,欢迎来到本教程!在这一节中,我们将一步步学习如何利用 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社区交流或查阅官方文档。希望本指南能帮助您根据实际需求顺利实现用户注册审核,并根据需要灵活扩展。祝您使用顺利,项目成功!

用户头像

NocoBase

关注

还未添加个人签名 2018-05-29 加入

还未添加个人简介

评论

发布
暂无评论
Markdown 模板变量的使用_开源_NocoBase_InfoQ写作社区