Metalsmith 是一个简单通用的文件处理器。它的插件架构让开发者能够方便地创建和组合各种处理步骤，用于对文件进行各种操作，例如编译 Markdown、转化 ES6 代码等等。metalsmith-marko 是 metalsmith 的一个插件，让我们能够使用 Marko 模板语言对文件进行渲染。在本文中，我们将详细介绍如何使用 metalsmith-marko 进行前端开发。
安装 metalsmith 和 metalsmith-marko
首先需要全局安装 Metalsmith：
npm install -g metalsmith
接下来，在你的项目中安装 metalsmith-marko：
npm install metalsmith-marko
配置 Metalsmith 和 metalsmith-marko
在配置 Metalsmith 之前，需要默认去创建一个目录。
mkdir metalsmith-marko cd metalsmith-marko touch index.js
-- -------------------- ---- -------
----- ---------- - ----------------------
----- -------- - -------------------------------
----- ----- - ----------------------------
---------------------
---------------- -- ---
---------------------- -- ----
---------------- -- -- --------
------------ -- -- -----
-------- ------------- -- ----
---
------------ -- -
-- ----- -
-----------------
- ---- -
------------------ -----------
-
---在以上的代码中，我们先是引入了 metalsmith-markdown 和 metalsmith-marko 两个插件。接下来，我们使用 Metalsmith 将源目录 src 下的 markdown 文件转成 HTML，再使用 metalsmith-marko 来将 HTML 文件渲染成为 Marko 组件。
Metalsmith 在构建时支持各种形式的数据操作。我们可以在构建中通过读写文件，并在它们之间应用各种转换器和操作器，将各种文件转换成可发布的形式。接下来，我们将发现如何使用 src 和 destination 选项指向我们的资源和输出文件。
编写 Marko 组件
在渲染之前，我们需要先编写好对应的 Marko 组件。下面是一个简单的例子：
<div class="post">
<h1>${post.title}</h1>
<div class="content">
${post.content}
</div>
</div>在这个例子中，我们定义了一个名为 post 的数据源。其中，post.title 和 post.content 分别是数据源中的两个不同的属性。下面我们来看如何将这个组件应用到实际渲染中。
渲染 Marko 组件
在以上的代码中，metalsmith-marko 插件使用了 glob 模式 **/*.marko 匹配了所有后缀为‘.marko'的文件。现在假设我们的源文件夹 src 下有一篇名为 example.marko 的文章，我们可以将其渲染成我们在上面定义的 Marko 组件：
-- -------------------- ---- -------
--------- -----
------
------
----------------------------
-------
------
------ - ---------------------
-------
-------在这个例子中，我们首先声明了一个标题 <title>${post.title}</title>，然后在 <body> 内部使用了 post | render('post.marko')。这里我们使用管道来链接两个操作，其中管道前面的 post 是 Markdown 渲染出的 HTML，管道后面的 render 将其渲染成为 Marko 组件。这将会把 HTML 字符串转化为 Marko 对象。
在上面的运行完成后，最终生成的 HTML 文件应该看起来类似以下的代码：
-- -------------------- ---- -------
--------- -----
------
------
----------------------
-------
------
---- -------------
----------------
---- ----------------
------- -- -- ------------
------
------
-------
-------总结
在本文中，我们介绍了如何使用 Metalsmith 和 metalsmith-marko 插件来进行前端开发。我们以一个简单的例子为基础，详细介绍了渲染 Marko 组件的过程，希望能对你对于前端开发中使用 Metalsmith 和 metalsmith-marko 插件有所帮助。如果你感兴趣，可以通过参考 Marko 文档来进一步学习深入了解该模板语言，优化模板渲染带来更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005552181e8991b448d2571