AgileBuilder logoAgileBuilder
返回文档

Handlebars 语法

AgileBuilder 模板中使用的 Handlebars 语法参考

概述

AgileBuilder 使用 Handlebars 作为模板引擎。本文档包含所有支持的 Handlebars 语法。

基本语法

变量输出

{{variableName}}

HTML 转义

默认情况下，Handlebars 会转义 HTML：

{{content}}  <!-- 转义 HTML -->

不转义

使用三个大括号不转义：

{{{unescapedContent}}}  <!-- 不转义 -->

条件渲染

if

{{#if condition}}
  内容
{{/if}}

if-else

{{#if condition}}
  条件为 true 时显示
{{else}}
  条件为 false 时显示
{{/if}}

unless

{{#unless condition}}
  条件为 false 时显示
{{/unless}}

比较运算

eq (等于)

{{#if_eq value1 value2}}
  相等时显示
{{/if_eq}}

ne (不等于)

{{#if_ne value1 value2}}
  不相等时显示
{{/if_ne}}

gt / gte / lt / lte

{{#if_gt value 10}}
  value > 10
{{/if_gt}}

{{#if_gte value 10}}
  value >= 10
{{/if_gte}}

{{#if_lt value 10}}
  value < 10
{{/if_lt}}

{{#if_lte value 10}}
  value <= 10
{{/if_lte}}

循环渲染

each

{{#each items}}
  {{this}}
{{/each}}

访问索引

{{#each items}}
  {{@index}}: {{this}}
{{/each}}

访问键

{{#each object}}
  {{@key}}: {{this}}
{{/each}}

循环特殊变量

变量说明
@index当前索引（从 0 开始）
@key当前键名
@first是否第一个元素
@last是否最后一个元素

with 上下文切换

切换当前对象的上下文：

{{#with user}}
  {{name}} - {{email}}
{{/with}}

内置 Helpers

includes

检查值是否在数组/字符串中：

{{#if (includes tags "experimental")}}
  实验性功能
{{/if}}

join

将数组元素连接成字符串：

{{join items ", "}}

lower / upper

字符串大小写转换：

{{lower name}}
{{upper name}}

trim

去除首尾空格：

{{trim name}}

自定义 Helpers

AgileBuilder 支持注册自定义 helpers：

// hooks/helpers.js
module.exports = {
  helpers: {
    formatDate: (date) => {
      return new Date(date).toLocaleDateString()
    }
  }
}

模板片段

定义片段

{{#*inline "header"}}
  <header>{{title}}</header>
{{/inline}}

使用片段

{{> header title="Hello"}}

实战示例

完整示例

{
  "name": "{{projectName}}",
  "version": "1.0.0",
  {{#if useTypeScript}}
  "typescript": true,
  {{/if}}
  {{#if_eq framework "react"}}
  "dependencies": {
    "react": "^18.0.0",
    {{#each features}}
    "{{this}}": "latest"{{#unless @last}},{{/unless}}
    {{/each}}
  }
  {{/if_eq}}
}

渲染结果

当 projectName="my-app", useTypeScript=true, framework="react", features=["eslint","prettier"] 时：

{
  "name": "my-app",
  "version": "1.0.0",
  "typescript": true,
  "dependencies": {
    "react": "^18.0.0",
    "eslint": "latest",
    "prettier": "latest"
  }
}

下一步