如果你是一名前端工程师，那么你一定会遇到制作静态页面的情况。在这个过程中，选择一个好用的静态页面生成工具是至关重要的。这时候，metalsmith-template-content 这个 npm 包就显得非常重要了。本文将为大家介绍如何使用这个包，帮助大家更好地完成静态页面的制作。
什么是 metalsmith-template-content
metalsmith-template-content 是一个将模板内容插入到 markdown 文件中的 metalsmith 插件，在将 markdown 文件转换成 HTML 时会自动生成静态的 HTML 页面。该插件支持多种模板，包括 pug、jade、ejs、handlebars 等，同时也支持 markdown 模板。
安装
首先，需要使用 npm 进行安装。
npm install metalsmith-template-content
使用方法
假设你已经配置好了 metalsmith，那么你可以在项目中添加 metalsmith-template-content 插件，如下所示：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- -------- - -------------------------------
----- --------- - --------------------------------
----- --------------- - ---------------------------------------
---------------------
----------------
-----------------------
----------------
-----------------------
----------------
------- -------------
---------- -------------
---
------------ ------ -- -
-- ----- ----- ----
------------------ -----------
---这段代码使用了 markdown 插件将 markdown 文件转换成 HTML，同时使用了 metalsmith-template-content 插件生成了静态 HTML 文件。最后，使用了 metalsmith-templates 插件将 HTML 文件和模板合并，然后输出到指定目录下。
示例
下面给出一个示例代码，你可以创建一个 markdown 文件 src/index.md，并且在开头添加如下内容：
-- -------------------- ---- ------- --- ------ -- ----- ----- ------- ------- --- ------- -- -- ----- ----- -- -------- ---------
然后，你可以创建一个 handlebars 模板 templates/default.hbs，并添加如下内容：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------
-------
------
------------------
---- -------------
-------------
------
-------
-------在最后，你可以使用以下命令将它们结合为完整的静态页面：
node build.js
执行命令后，metalsmith 就会根据上面的配置对 markdown 文件进行处理，生成一个名为 index.html 的静态页面，并输出到 build 目录下。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ----- -------------
-------
------
------ ----- ----------
---- -------------
-----------------
----------------
------
-------
-------总结
本篇文章通过介绍 metalsmith-template-content 这个 npm 包的使用方法，希望能够给大家带来帮助。使用 metalsmith-template-content 可以帮助我们更好地完成静态页面的制作，同时也可以提高我们的工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f421d8e776d08040ddd