在前端开发中，Metalsmith 是一个非常流行的静态网站生成器，它可以通过插件来扩展功能，以实现更高效的网站生成。metalsmith-filemetadata 就是其中一个非常实用的插件，它可以帮助我们读取文件的 metadata，并将其传递给其他的 Metalsmith 插件，从而操作和生成网站内容。
在本文中，我们将介绍如何使用 npm 包 metalsmith-filemetadata，并结合具体的代码示例，让你更好的理解和应用这个插件。
安装 Metalsmith 和 metalsmith-filemetadata
首先，我们需要安装两个 npm 包：
$ npm install --save-dev metalsmith metalsmith-filemetadata
这里我们分别安装了 metalsmith 和 metalsmith-filemetadata，其中 metalsmith 是静态网站生成器，而 metalsmith-filemetadata 就是我们需要使用的插件了。
接下来，我们需要在项目根目录下创建一个 metalsmith.js 的文件，并在文件中引入 metalsmith 和 metalsmith-filemetadata：
const Metalsmith = require('metalsmith') const filemetadata = require('metalsmith-filemetadata')
使用 metalsmith-filemetadata
下面我们来看一下如何使用 metalsmith-filemetadata 插件。
- 添加 metadata
我们可以在插件配置中添加需要读取的 metadata key，这样插件会自动读取并为我们提供它们的值。
Metalsmith(__dirname) .source('./src') .destination('./build') .use(filemetadata([ { pattern: '*.md', metadata: { type: 'blog' } } ]))
这里，我们添加了一个 pattern，让插件只读取 .md 文件，并为其添加了一个名为 type 的 metadata。
- 使用 metadata
当我们添加完 metadata 后，我们就可以在其它的 Metalsmith 插件中使用它们了。
-- -------------------- ---- ------- -- -------- -- ----- -------- - ------------------------------ --------------------- ---------------- ----------------------- ------------------- - -------- ------- --------- - ----- ------ - - --- ----------------展开代码
在这个例子中，我们调用了 markdown 插件来解析 markdown 文件，并且在插件中也可以使用我们添加的 metadata。
-- -------------------- ---- ------- -- ---- ----- ----------- - --------------------------------- --------------------- ---------------- ----------------------- ------------------- - -------- ------- --------- - ----- ------ - - --- ---------------- ------------------ ------- ------------- ---------- -------------- --------- ----------------------- --------- - ------ --- ---- ----- - ---展开代码
最后，我们使用 consolidate 定制了一个 handlebars 模板，也可以使用我们添加的 metadata。
结论
Metalsmith 是一个非常灵活的静态网站生成器，metalsmith-filemetadata 是其中一个非常实用的插件。如果你正在使用 Metalsmith 来生成网站，metalsmith-filemetadata 将是一个非常好的选择，它可以帮助你更好地操作和生成网站内容。
希望这篇教程对你有所帮助，如果你有什么疑问或建议，欢迎在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/158172
