简介
metalsmith-collection-scoping 是一个基于 Metalsmith 框架的 npm 包，允许你对你的文章、博客等网页内容进行分开编译和分别管理。该包充分利用了 Metalsmith 的插件架构和模板化的工作流系统，是一款十分强大和易用的前端工具。
安装
npm install metalsmith-collection-scoping --save
使用
基本用法
使用前需要引入它并初始化（例如在 metalsmith-worker.js 文件中）：
-- -------------------- ---- -------
--- ---------- - ----------------------
--- ----------- - ----------------------------------
--- ------- - -----------------------------------------
---------------------
------------------
------ -------------
------ -------------
---
---------------
-------------------- -
-- ----- ----- ----
---上面的代码中，我们使用 Metalsmith 的 collections 插件，将我们的文章和页面分别分类，在 scoping 插件中进行分别管理。
配置选项
我们还可以通过 scoping 插件的配置选项来实现更复杂和高度自定义的工作流程和规则。下面是一个例子：
-- -------------------- ---- -------
--------------
------------ -
------ -
-------- -------------
------------- ------
--
------ -
-------- -------------
------------- -------
-
-
---上面的代码中，我们定义了两个不一样的集合（collections.posts 和 collections.pages），并分别指定了分类规则。在这个例子中，我们将文章按照它们的发布日期进行分类，将页面按照它们的标题进行分类。
模板渲染
scoping 插件可以自动模板化你的集合，让你能够在模板中轻松的访问集合中的每篇文章或页面。以下是一个例子：
{% for post in collections.posts %}
<article>
<h2>{{ post.title }}</h2>
<p>{{ post.description }}</p>
</article>
{% endfor %}上面的代码中使用了一部分 Twig 代码渲染了一个基本的文章页面。在 for 循环中，我们遍历了 collections.posts 集合中的数据，并分别访问它们的标题和描述内容。在默认的配置中，scoping 插件会自动根据文件名（去掉扩展名之后的部分）向元数据中添加一个 title 属性，也就是说如果我们的文章文件名为 2019-01-01-hello-world.md，那么可以访问到它的标题。
在模板中，你也可以使用 collections.page 来访问你的页面集合。
资源文件的分类
scoping 插件不仅仅轻松处理文章和页面，它还可以处理其他任何的资源文件，例如图片或 css 文件。下面是一个例子：
.metalsmith(__dirname)
.source('./content')
.destination('./public')
.use(scoping())
.build(function (err) {
if (err) throw err;
});上面的代码中，我们简单地使用了默认的配置将资源文件拆分为一个名为 collections.assets 的集合。在模板中，我们可以使用下面的 Twig 代码来处理这个集合：
-- -------------------- ---- -------
-- --- ----- -- ------------------ --
-- -- --------------------------- --- - --
----- ---------------- -------- ---------- ----- ------------------ ----
-- ------ -------------------------- --- - --
------- ------- ---------- ----- ------------------ -------------
-- ---- --
---- ------- ---------- ----- ------------------ ----
-- ----- --
-- ------ --上面的代码会为不同的文件种类设置不同的加载方式，例如 css 文件会被载入到 head 标签中，而 js 文件会被载入到 body 标签中等等。
结语
metalsmith-collection-scoping 是一款非常实用和易用的前端工具，可以使文章、页面和资源文件等相关内容更加容易管理和编译。它充分利用了 Metalsmith 的插件架构和模板化的工作流系统，为网站开发提供了最优质的解决方案。希望本篇文章能够帮助到你在使用和学习 metalsmith-collection-scoping 过程中遇到的问题，同时也能够掌握更多的前端技术知识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3e1d8e776d08040b2b