简介
metalsmith-handlebars-within 是一个 npm 包，它是 metalsmith 和 handlebars 的结合体。它提供了一种简单且有效的方式来处理静态网站的生成。
metalsmith 是一个简单且易于使用的静态站点生成器，它使用 node.js 来自动构建一个静态的网站。metalsmith 可以方便地管理内容和整个企业站点。而 handlebars 是一个强大的模板引擎，它可以帮助我们构建出美观的 web 页面。
metalsmith-handlebars-within 利用了这两个工具的优点来生成静态网站。它提供了一种强大且易用的方式来处理网站生成的过程，同时也保留了与现有文件结构一致性的简单性。
使用教程
安装
使用 npm 在终端中输入以下命令来安装 metalsmith-handlebars-within：
npm install metalsmith-handlebars-within --save-dev
建立文件夹结构
首先，我们需要建立一个文件夹作为我们的静态网站的根目录。然后，在该文件夹中创建以下结构：
-- -------------------- ---- ------- ----- --- ---- - -- --------- --- ---- - -- --------- --- --- - -- ---------- --- ---- --- -------- --- -----------
其中，src 文件夹存放我们的 handlebars 模板文件，css 文件夹存放我们的 css 文件，js 文件夹存放我们的 JavaScript 文件，img 文件夹存放我们的图片。
index.md 文件是我们的内容文件，config.json 文件是我们的配置文件。这些文件及其作用将在后文中详细讲解。
配置
在开始使用 metalsmith-handlebars-within 之前，我们需要配置一些参数。我们的配置文件 config.json 如下：
-- -------------------- ---- -------
-
--------- ------
-------------- --------
------------ --------------
-------------- ---------------
------------- --------------
----------- ---
-------------- ---
------------- -
-
------- -------
------ ---
-
--
--------- ---
-------- -----
----------- -----
------ ------
------- -----
------- -----
-------- -----
------------- -
-------- -----
-
-其中，各参数的作用如下：
source：源文件夹路径。destination：生成的静态网站存储的文件夹路径。layoutDir：handlebars 布局文件夹路径。partialsDir：handlebars 片段文件夹路径。helpersDir：handlebars 帮助函数文件夹路径。metadata：元数据。collections：文档集合。navigation：网站导航。ignore：要忽略的文件夹路径。clean：是否清除目标文件夹。relative：生成站点时是否使用相对路径。dev：是否处于开发模式。port：服务器端口。open：是否自动打开浏览器。watch：是否监视文件更改。browserify：Browserify 配置。
创建 index.hbs 文件
接下来，我们需要创建 index.hbs 文件。打开 src 文件夹，在其中创建名为 index.hbs 的文件：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------------
----- ---------------- ----------------------
------- -------------------- ---------------
-------
------
--------
------- ------------
-- ---------------------------
---------
---------
------
-------------
-------
--------
------ -------- -- ------- ----
---------
-------
-------这是我们的 index 应用程序的主要布局。它包含了一个换完了自视口标签和我们所需的脚本和样式引用。此外，它还包含一个顶部导航和一个页脚。页面的主要内容被插入到 {{{content}}} 中。
创建 index.md 文件
接下来，我们需要创建 index.md 文件。打开根目录，在其中创建名为 index.md 的文件：
--- title: My Amazing Site --- # Hello, World! Welcome to my amazing site!
该文件中包含了我们的独立标记格式语法的主要内容。其中包括页面的标题和我们的 Markdown 中的实际内容。
运行 metalsmith-handlebars-within
最后，我们需要运行 metalsmith-handlebars-within。
在终端中输入以下命令：
npx metalsmith
然后打开浏览器，在 http://localhost:8080/ 查看你的站点即可。
总结
metalsmith-handlebars-within 是一个非常强大的 npm 包，它结合了 metalsmith 和 handlebars 的优点，可以让我们更加方便地处理静态网站的生成。本文详细介绍了使用该包的过程，希望能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3f1d8e776d08040bd0