前言
在前端开发中，静态网站生成器是非常实用的工具，它们可以帮助我们将 Markdown 文件等源文件编译成 HTML 或其他格式的文件，同时提供了丰富的插件机制，让我们可以轻松地扩展功能。其中，Metalsmith 是一个十分流行的静态网站生成器，其核心就是一个基于 Node.js 的简单的静态文件生成器。
Metalsmith 提供了众多插件支持，其中有一个比较特殊的插件，那就是 metalsmith-filedata，这个插件可以添加源文件的元数据，便于在处理文件时数据处理和扩展。本文就是为大家介绍一下这个插件的详细使用方法。
安装
首先，你需要在本地安装 Metalsmith。可以通过 npm 安装：
npm install metalsmith
然后，安装 metalsmith-filedata 插件：
npm install metalsmith-filedata
使用方法
配置
在使用 metalsmith-filedata 插件前，你需要在 Metalsmith 配置文件中添加一个或多个函数，用于对文件进行元数据的转换或添加。比如：
-- -------------------- ---- -------
----- -------- - -------------------------------
---------------------
----------------
----------------------
-----
----------
---- ------
----- --- ---------------------
------------- ---------- ----- -- --------------------------------
--
-
------------ ------ -- -
-- ----- ----- ----
---在本例中，我们定义了一个叫做 filedata 的函数，该函数接受一个对象作为参数，对象的属性就是要添加的元数据和其对应值。其中 foo 属性直接被设置为字符串 'bar'，year 属性被设置为当前年份，created_time 属性的值是一个函数，它接受两个参数 filename 和 file，分别代表当前正在处理的文件名和文件对象，使用 fs 模块来获取文件的创建时间。
通过使用上述配置，我们可以将 foo、year 和 created_time 这三个元数据属性添加到所有的源文件中。
使用
添加了元数据以后，我们就可以在处理文件时使用这些元数据来进行更复杂的操作。比如你可以在模板中引用这些属性，也可以在生成 HTML 文件时将这些元数据写入到文档的 head 标签内：
-- -------------------- ---- -------
----- -------- - -------------------------------
----- ------- - ------------------------------
---------------------
----------------
----------------------
-----
----------
---- ------
----- --- ---------------------
------------- ---------- ----- -- --------------------------------
--
-
----------------
-----
---------
------- -------------
---------- ------------
--------- ------------
--
-
------------ ------ -- -
-- ----- ----- ----
------------------ ------------
---在上述代码中，我们除了使用了 filedata 插件外，还同时使用了另外两个插件：markdown 和 layouts。通过使用这两个插件，我们能够将 Markdown 文件编译成 HTML，并使用 Handlebars 模板引擎将 HTML 文件注入到模板之中。
在我们的 HTML 模板中，可以使用如下方式访问元数据：
<head>
<title>{{title}}</title>
<meta name="description" content="{{description}}" />
<meta name="year" content="{{year}}" />
</head>
<body>
...
</body>这样，我们就可以在 head 标签中添加元数据，从而实现 SEO 等相关功能。
示例代码
为了更容易地理解 metalsmith-filedata 插件的使用方法，下面我们提供一个示例代码，代码结构如下：
-- -------------------- ---- ------- - --- ------- - --- ----------- --- ------------ --- --- - --- -------- - --- ---------- - --- -------- --- -----------------
下面是具体的代码内容：
package.json:
-- -------------------- ---- -------
-
------- ---------------------------
---------- --------
-------------- ---
------- -----------
---------- -
-------- -------- ----- --------
-------- ---------
--
----------- ---
--------- ---
---------- ------
--------------- -
----- ------------------
------------- ---------
---------------------- ---------
------------- ---------
---------------------- ---------
--------------------- ---------
---------------------- ---------
---------- ----------
-------------- ---------
--------------------- --------
--
------------------ --
-webpack.config.js:
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ -------------
------- -
----- ----------------------- --------
--------- ----------
--
----- --------------
---------- -
------- --------
--
-------- -
--- -------------------
--------- -----------------
--
-
--layouts/default.hbs:
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------
-------
------
----------
------------------
-------------------
---------------------------
-------
-------src/index.md:
--- title: Homepage description: This is my homepage. --- # 这是我的主页 在这里你可以找到我的所有最新博客文章。
src/about.md:
--- title: About Me description: Some information about me. --- # 关于我 我是一名来自中国的前端工程师。
src/contact.md:
--- title: Contact Me description: Contact information. --- # 联系我 Email: xxx@xxx.com
index.js:
-- -------------------- ---- -------
----- ---------- - ----------------------
----- -------- - -------------------------------
----- ------- - ------------------------------
----- -------- - -------------------------------
----- ---- - ----------------
---------------------
----------------
----------------------
-----
----------
---- ------
----- --- ---------------------
------------- ---------- ----- -- -
----- ----- - ----------------------------------- ------ -----------
------ ----------------
-
--
-
-----
----------
---- -----
------- -----
------- ------
--------- ------
--------- -----
----------- -----
------------ -----
--
-
-----
---------
------- -------------
---------- ------------
-------- --------------
-------- -----------
--
-
------------ ------ -- -
-- ----- ----- ----
------------------ --------------
---在使用以上示例代码时，可以通过执行以下命令启动服务：
npm start
然后访问 http://localhost:8080 即可看到效果。
总结
metalsmith-filedata 插件可以让我们在处理静态网站生成器过程中实现更多的功能，其中包括 SEO 等相关功能。通过使用本文所介绍的示例代码，相信读者可以更好的了解和掌握 metalsmith-filedata 插件的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3f1d8e776d08040ba2