# HTML 模板 HTML 模板使用无逻辑的 Mustache 风格语法，带有 `{{variable}}` 占位符。它们在 POS 应用中于客户端渲染，这意味着它们**可离线工作**——显示或打印收据无需服务器连接。这是大多数用户推荐使用的引擎。 ## 语法[](#syntax "直接链接到语法") ### 变量[](#variables "直接链接到变量") 使用双花括号插入数据： ```

Order #{{order.number}}

Total: {{totals.total_display}}

``` 对预格式化的货币值使用 `_display` 变体（例如 `$12.50` 而非 `12.5`）。所有可用字段请参阅[收据数据参考](/zh-CN/receipts/receipt-data.md)。 ### 分区（循环和条件）[](#sections-loops-and-conditionals "直接链接到分区（循环和条件）") 使用 `{{#section}}...{{/section}}` 来遍历数组或有条件地显示内容： ``` {{#lines}}

{{name}} × {{qty}} {{line_total_display}}

{{/lines}} ``` ### 反向分区[](#inverted-sections "直接链接到反向分区") 使用 `{{^section}}...{{/section}}` 在某个值为空或为假时显示内容： ``` {{#customer.id}}

Customer: {{customer.name}}

Guest checkout

{{/customer.id}} ``` ### 本地化标签[](#localised-labels "直接链接到本地化标签") 使用 `{{i18n.key}}` 表示可翻译的标签，它们会适应商店的语言： ``` {{i18n.subtotal}} {{totals.subtotal_display}} ``` ## 常见模式[](#common-patterns "直接链接到常见模式") ### 商店页眉[](#store-header "直接链接到商店页眉") `store.address_lines` 数组已为收据预格式化——直接遍历它，而不要逐个拼接各个地址字段。 ```

``` ### 带折扣的行项目[](#line-items-with-discounts "直接链接到带折扣的行项目") 行项目的 `discounts` 字段是以正数表示的折扣金额，无折扣时为 `0`。Mustache 将 `0` 视为假值，因此 `{{#discounts}}...{{/discounts}}` 是正确的判断方式。 ``` {{#lines}}

{{name}} × {{qty}}

~~{{unit_subtotal_display}}~~ {{unit_price_display}}

{{/lines}} ``` ### 税务汇总[](#tax-summary "直接链接到税务汇总") ``` {{#tax_summary}}

{{label}} ({{rate}}%) {{tax_amount_display}}

{{/tax_summary}} ``` ### 支付详情[](#payment-details "直接链接到支付详情") ``` {{#payments}}

{{/tendered}} {{/payments}} ``` ### 条形码和二维码[](#barcodes-and-qr-codes "直接链接到条形码和二维码") 使用 `` 元素——与[热敏模板](/zh-CN/receipts/thermal-templates.md)相同的语法。值放在元素内部；符号体系通过 `type` 属性设置。渲染器会用一个内联 SVG 替换每个元素。 ``` {{order.number}} {{order.payment_url}} {{order.number}} ``` `type` 属性必须在模板中**直接**设置——它不能来自占位符。`type` 为 `qr` 或 `qrcode` 时，在 HTML 和热敏模板中都会渲染为二维码。如果所选的条码类型无法对该值进行编码（例如非数字或长度错误的 EAN-13 数据），预览会显示一个带有原始值的 `Barcode error` 或 `QR code error` 块，以便您修正值或切换到兼容的类型。支持所有 [bwip-js 符号体系](https://github.com/metafloor/bwip-js/wiki/Supported-Barcode-Types)——`code128`、`qrcode`、`ean13`、`ean8`、`upca`、`pdf417`、`datamatrix` 等许多类型。 ## 样式[](#styling "直接链接到样式") 无逻辑模板在渲染前会通过 WordPress 的 `wp_kses_post` 进行清理，这会**移除 `

{{store.name}}

{{store.name}}