# 安装

¥Installation

安装 Handlebars 的方法有很多种,具体取决于你使用的编程语言和环境。

¥There are a variety of ways to install Handlebars, depending on the programming language and environment you are using.

# npm 或 yarn(推荐)

¥npm or yarn (recommended)

Handlebars 的参考实现是用 JavaScript 编写的。最常见的是使用 npmyarn 安装:

¥The reference implementation of Handlebars is written in JavaScript. It is most commonly installed using npm or yarn:

npm install handlebars

or

yarn add handlebars

然后你可以通过导入来使用 Handlebars:

¥You can then use Handlebars by importing it:

import Handlebars from "handlebars";
const template = Handlebars.compile("Name: {{name}}");
console.log(template({ name: "Nils" }));

如果你在 CommonJS 环境中使用 Handlebars,则可以使用 require

¥If you are using Handlebars in a CommonJS environment, you can use require:

const Handlebars = require("handlebars");
const template = Handlebars.compile("Name: {{name}}");
console.log(template({ name: "Nils" }));

提示

使用 npm 或 yarn 是使用 Handlebars 的推荐方式。如果你想在网络浏览器中使用 Handlebars 模板,我们建议你使用构建引擎,例如 Webpack、Browserify 或 Parcel。

¥Using npm or yarn is the recommended way of using Handlebars. If you want to use Handlebars templates in the web-browser, we recommend that you use a build-engine such as Webpack, Browserify or Parcel.

integrations 页面包含这些加载器的插件列表,允许你自动预编译模板或以其他方式使用 Handlebars。

¥The integrations page contains a list of plugins for those loaders that allow you to automatically precompile templates or use Handlebars otherwise.

了解更多:集成

¥!buttonLearn more: Integrations

# 浏览器构建在 npm-package 中

¥Browser builds in the npm-package

浏览器版本位于 node_modules/handlebars/dist/ 目录中。使浏览器可以访问这些文件取决于你使用的构建系统,但这可能就像将文件复制到可访问的位置一样简单。

¥The browser builds are located in the node_modules/handlebars/dist/ directory. Making these accessible to the browser will depend on what build system you are using but this may be as simple as copying the files to an accessible place.

这是使用预编译器时的首选安装方法,因为它可以确保预编译模板始终针对相同版本的运行时运行。

¥This is the preferred method of installation when using the precompiler as it ensures that your precompiled templates always run against the same version of the runtime.

# 下载 Handlebars

¥Downloading Handlebars

提供以下下载是为了方便社区。它们并不适合生产使用,但它们可以让你快速启动,而无需设置构建引擎。

¥The following downloads are provided as a convenience to the community. They are not meant for production use, but they can give you a quick-start without having to set up a build-engine.

# 最新版本(版本 4.7.8)

¥Latest release (version 4.7.8)

如果你想在浏览器中编译模板,请使用此版本作为快速入门。

¥Use this version as a quick start, if you want to compile your templates in the browser.

当你在浏览器中使用 预编译模板 时,请使用此版本。该版本不包含编译器。

¥Use this version when you are using precompiled templates in the browser. This version does not include the compiler.

# 非发布版本

¥Non-release builds

Handlebars 的所有发布版本和 CI 版本都可以在我们的 构建页面 (opens new window) 中的 S3 上下载。

¥All of Handlebars' released versions and CI builds are available for download on S3 in our builds page (opens new window).

最新传递的 master 版本名为 handlebars-latest.js,master 上的每个传递 SHA 将创建一个 handlebars-gitSHA.js 文件。虽然这些都通过了 CI,但最好使用标记的版本之一。

¥The latest passing master build is named handlebars-latest.js and each passing SHA on master will create a handlebars-gitSHA.js file. While these all pass the CI, it's preferable to use one of the tagged releases.

注意:提供构建页面是为了方便社区,但你不应该将其用于在生产中托管 Handlebars。

¥Note: The builds page is provided as a convenience for the community, but you should not use it for hosting Handlebars in production.

# CDN

Handlebars 也托管在许多免费 CDN 上。

¥Handlebars is hosted on a number of free CDNs as well.

# RubyGems

官方 Handlebars 版本已在 https://rubygems.org/gems/handlebars-source (opens new window) 上提供。

¥The official Handlebars build is available on https://rubygems.org/gems/handlebars-source (opens new window).

# Bower, Component, Composer, jspm

Handlebars 也可以通过使用其他包管理器来启用,例如

¥Handlebars can be enabled by using other package-managers as well, like

  • Bower(已弃用)

    ¥Bower (deprecated)

  • 组件

    ¥Component

  • 作曲家

    ¥Composer

  • jspm

详情请参见 https://github.com/components/handlebars.js (opens new window)

¥See https://github.com/components/handlebars.js (opens new window) for details.

# 用法

¥Usage

你可以通过将模板包含在 <script> 标记中来将模板传送到浏览器。

¥You can deliver a template to the browser by including it in a <script> tag.

<script id="entry-template" type="text/x-handlebars-template">
  <div class="entry">
    <h1>{{title}}</h1>
    <div class="body">
      {{body}}
    </div>
  </div>
</script>

始终为模板使用脚本标签

如果使用此方法,则必须使用脚本标签封装模板。否则,如果你不这样做,浏览器可能会删除或修改模板的部分内容。看一下 "表中出现意外标记" (opens new window) 的例子。

¥If you use this method, you have to wrap your template with a script-tag. Otherwise the browser may remove or modify parts of your template if you don't. Have a look at "Unexpected markup in tables" (opens new window) for an example.

使用 Handlebars.compile 在 JavaScript 中编译模板

¥Compile a template in JavaScript by using Handlebars.compile

var source = document.getElementById("entry-template").innerHTML;
var template = Handlebars.compile(source);

通过使用上下文执行模板来获取评估 Handlebars 模板的 HTML 结果。

¥Get the HTML result of evaluating a Handlebars template by executing the template with a context.

var context = { title: "My New Post", body: "This is my first post!" };
var html = template(context);

结果是

¥results in

<div class="entry">
  <h1>My New Post</h1>
  <div class="body">
    This is my first post!
  </div>
</div>

# 预编译模板

¥Precompiling Templates

在前面的示例中,我们加载了 Handlebars 的编译器和运行时版本。预先编译模板并将预编译版本包含在你的网站中会更有效。你可以包含较小的运行时,并且浏览器不必在运行模板之前对其进行编译。

¥In the previous example, we have loaded the compiler-and-runtime version of Handlebars. It is much more efficient, to compile your templates beforehand and include the precompiled version in your website. You can include the smaller runtime and the browser does not have to compile the templates before running them.

了解更多:预编译

¥!buttonLearn More: Precompilation

# Bower(已弃用)

¥Bower (deprecated)

警告

Bower 已被弃用 (opens new window)

¥Bower is deprecated (opens new window)

Bower 版本的 Handlebars 仍在发布(目前)以实现向后兼容性。但如果你正在建立一个新项目,则不应再使用它。

¥Bower versions of Handlebars are still published (at the moment) for backwards compatibility. But if you are setting up a new project, you should not use it anymore.

# 其他编程语言

¥Other programming languages

许多编程语言都有 Handlebars 实现。

¥There are Handlebars implementations for many programming languages.

Last Updated: 2024/4/16 21:37:19