logologo
开始
教程
手册
开发
插件
API
首页
English
简体中文
日本語
한국어
Español
Português
Deutsch
Français
Русский
Italiano
Türkçe
Українська
Tiếng Việt
Bahasa Indonesia
ไทย
Polski
Nederlands
Čeština
العربية
עברית
हिन्दी
Svenska
开始
教程
手册
开发
插件
API
首页
logologo

V2 教程(IT 工单系统)

教程简介
第 1 章:认识 NocoBase — 5 分钟跑起来
第 2 章:数据建模 — 两张表搞定工单系统
第 3 章:搭建页面 — 从空白到可用
第 4 章:表单与详情 — 录入、展示、一步到位
第 5 章:用户与权限 — 谁能看什么
第 6 章:工作流 — 让系统自动干活
第 7 章:仪表盘 — 一眼看全局

V1 教程(旧版)

任务管理系统概览
第 1 章:初识 NocoBase
第 2 章:设计任务管理系统
第 3 章:任务数据管理
第 4 章:任务与评论插件
第 5 章:标签页与动态区块
第 6 章:用户与权限
第 7 章:工作流
项目管理平台概览
第 8 章:知识库 - 树表
第 9 章:任务看板与图表
第 10 章:看板筛选与条件
第 11 章:子任务与工时计算
第 12 章:会议室预订与工作流
实现用户注册审核
实现 CRM 线索转化
Markdown 区块技巧
CRM 销售云功能概览
线索跟进与状态管理
CRM 销售云系统
使用 API Keys 获取数据
Markdown 模板变量用法
如何更快部署 NocoBase
CRM 销售管道可视化
CRM Demo 部署指南
Previous Page使用 API Keys 获取数据
Next Page如何更快部署 NocoBase

#Markdown 模板变量用法

亲爱的小伙伴们,欢迎来到本教程!在这一节中,我们将一步步学习如何利用 Markdown 和 Handlebars 模板引擎实现动态内容展示。之前在《 Markdown 区块的妙用》中,你已了解了基本语法、创建方法及变量填充,接下来让我们深入探讨模板变量的高级用法。

#1 模板引擎 Handlebars 简介

在你创建 Markdown 区块后,右上角的配置中会看到一个“模板引擎”选项,默认即为 Handlebars 。Handlbars 能帮助你根据条件动态呈现页面内容,使 Markdown 也能响应变化。

模板引擎示意图

#1.1 Handlebars 的作用

尽管 Markdown 原生只支持静态内容展示,但通过 Handlebars,你可以依靠条件(如状态、数字或选项)来动态切换展示的文案和样式。这样,即使面对多变的业务场景,你的页面也能时刻更新显示正确的信息。

#2 实际应用场景

现在,我们来看几个实用的场景,并一步步实现它们的功能。

#2.1 处理订单状态

在一个在线 Demo 中,我们往往需要根据订单状态来展示不同的提示信息。假设你的订单数据表中有一个状态字段,其状态如下:

订单状态字段

以下是 4 个状态对应的展示内容:

选项标签选项值展示内容
Pending Approval1订单已提交,等待内部审核。
Pending Payment2等待客户付款。请密切关注订单状态。
Paid3付款已确认,请进行后续处理。指定顾问将在1小时内与客户联系。
Rejected4订单审批未通过。如有需要,请复查并重新发起。

在页面中,我们能够捕获到订单状态的值,进而动态地展示不同信息。下面我们将详细讲解如何使用 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}}

效果参考下图:

if 示例1 if 示例2

#2.1.2 else 语法

当条件不满足时,可以用 else 指定备用内容。例如:

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

效果如下:

else 示例

#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}}

如果发现页面未出现数据,请确保订单明细字段已被正确展示,否则系统会认为这部分数据为冗余信息而不作查询。 20250305122543_handlebar_each

你可能会发现 商品对象的名称 ( product.name ) 没有打印出来,和上面的原因一样,我们需要把商品对象也展示出来才行 20250305122543_each2

展示出来后,我们在联动规则设置隐藏这个关联字段 20250305122543_hidden_each

#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 社区交流或查阅官方文档。希望本指南能帮助您根据实际需求顺利实现用户注册审核,并根据需要灵活扩展。祝您使用顺利,项目成功!