在前端开发中，我们经常需要为静态页面添加一些元数据，比如标题、描述、关键词等等。手动编辑 HTML 文件肯定是不现实的，因此我们需要使用自动化构建工具来实现这个功能。在这篇文章中，我们介绍一个 npm 包 gulp-add-front-matter，它可以帮助我们更加方便地为静态页面添加元数据。
安装
使用 npm 安装 gulp-add-front-matter：
npm i gulp-add-front-matter --save-dev
配置 gulpfile.js
在 gulpfile.js 中配置 gulp-add-front-matter 的任务：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------- - ---------------------------------
----------------------------- ---------- -
------ -------------------------
-------------------
----------- -
------ ----- -------
------------ ----- -------------
--------- ----- ---------
-
---
-------------------------
---在这个任务中，我们使用了 gulp-add-front-matter 提供的插件 frontMatter，为 src 目录下的所有 HTML 文件添加元数据，并将其输出到 dist 目录中。
使用示例
我们来看看一个 HTML 文件和添加元数据后的效果：
原始的 HTML 文件：
-- -------------------- ---- ------- --------- ----- ------ ------ --------- ---------------- ------- ------ --------- ----------- ---------- -- -- ------------ ------- -------
添加元数据之后的 HTML 文件：
-- -------------------- ---- ------- --- ------ -- -------- ------------ ---- -- -- --------- --------- --------- -- ------- --- --------- ----- ------ ------ --------- ---------------- ------- ------ --------- ----------- ---------- -- -- ------------ ------- -------
可以看到，我们在 HTML 文件的前几行添加了一些 YAML 格式的内容，它们即为元数据。在配置文件中，我们定义了 title、description、keywords 三个属性。在使用时，我们可以根据需求自定义属性和属性值。
总结
通过使用 npm 包 gulp-add-front-matter，我们可以轻松地为静态页面添加元数据，提升页面的 SEO 效果。在开发时，我们应尽可能地使用自动化构建工具来提高工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005571281e8991b448d3fcd