前言
开发一个网站需要的不仅仅是后端代码和数据库设计，前端方面的代码同样非常重要。而在前端开发中，使用合适的工具能够提高效率。本篇文章将介绍一个前端工具 -- metalsmith-handlebars 的使用方法。
metalsmith-handlebars 简介
metalsmith-handlebars 是一个静态站点生成器，同时它也是一个专门用于处理 Handlebars 模版引擎的插件。我们可以使用 metalsmith-handlebars 将多个源文件渲染成一个 HTML 文件。
安装和配置
我们需要先安装好 Node.js 和 npm，然后在命令行中执行以下操作：
npm install metalsmith metalsmith-handlebars --save-dev
接着，我们需要创建一个 metalsmith.js 文件，列出该插件需要的配置信息，例如：
-- -------------------- ---- -------
--- ---------- - ----------------------
--- ---------- - ---------------------------------
---------------------
-----------
------ --- ------ ------
------------ ----- ----- ------ ------- -- --- --------
------- ----- -----
--
----------------
-----------------------
------------------
-------------------- -
-- ----- ----- ----
---
--
该配置文件中， metadata 对象中存放的是一些通用的信息，例如作者姓名、网站标题、网站描述等。 source 指定了源文件夹的路径， destination 指定了目标文件夹的路径。 use 用于使用 metalsmith-handlebars 这个插件进行渲染。
使用
在上一步完成配置之后，我们可以将我们的源文件都放到 ./src 文件夹中，在使用 node metalsmith.js 命令行命令生成网站。 metalsmith-handlebars 会按照我们的配置和模版文件中的内容进行渲染和整合。
在使用中，我们可以将所有页面的结构和共同的 HTML 片段写在一个母版文件中，例如：
-- -------------------- ---- -------
--------- -----
------
------
------------------------
---
-------
------
--------------------
---------
--------------
----------
--------------------
-------
-------其中 {{{contents}}} 的内容是用我们的源文件来替换的。
在源文件中，我们可以使用 Handlebars 的语法进行书写，例如：
---
title: Welcome to my Homepage!
---
<h1>{{title}}</h1>
<p>Hi, my name is {{author}}.</p>我们甚至可以使用变量、if 语句、循环语句等语法：
<ul>
{{#each myPosts }}
<li>{{this}}</li>
{{/each}}
</ul>结语
除了本篇文章介绍的 metalsmith-handlebars，还有很多静态站点生成器和模版引擎可供选择，唯有找到最适合自己的工具，并善加利用，才可以在开发效率上获得提升。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005720b81e8991b448e84a2