在前端开发中，静态网站生成器是很有用的工具，是许多技术站点的首选。Metalsmith 是其中一个很受欢迎的静态网站生成器，通过使用插件，Metalsmith 可以被扩展以满足各种需求。本文将介绍一个很实用的 Metalsmith 插件：metalsmith-static-related。
什么是 metalsmith-static-related？
metalsmith-static-related 是一个 Metalsmith 插件，它可以为页面生成静态相关链接和相关文章，以便读者可以更方便地阅读和发现相关内容。具体来说，该插件可以在页面中添加相关文章链接、类似文章链接和标签链接。
如何使用 metalsmith-static-related？
要使用 metalsmith-static-related 插件，需要在 Metalsmith 项目中安装它，使用以下命令：
npm install metalsmith-static-related
安装成功后，将其添加为 Metalsmith 插件，在 metalsmith.json 文件中添加以下配置：
{
"plugins": {
"metalsmith-static-related": {
"match": "**/*.html"
}
}
}该配置将启用 metalsmith-static-related 插件并将其应用于所有 html 文件。如果要将其应用于其他类型的文件，则可以根据需要更改匹配模式。
当插件启用后，可以将相关数据添加到页面中，并在其中包括以下模板变量：
allRelated: 包含有关所有相关文章的信息。related: 包含有关前三篇相关文章的信息。similar: 包含有关前三篇类似文章的信息。
这些模板变量包含链接、标题、关键字等信息，可用于在页面中生成链接。
示例代码
让我们来看一下如何使用 metalsmith-static-related。假设我们有一个 Metalsmith 项目，其文件结构如下：
. ├── index.html ├── post-1.html ├── post-2.html └── post-3.html
要配置 metalsmith-static-related，我们需要执行以下步骤：
- 安装插件
npm install metalsmith-static-related --save-dev
- 配置 metalsmith.json 文件
{
"plugins": {
"metalsmith-static-related": {
"match": "**/*.html"
}
}
}- 在模板文件中添加模板变量
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------- ----- ----------
-------
------
------ ----- -------
----------- -----------
----
---------------
------ ---------------------------- ---------------
---------------
-----
----------- -----------
----
------------
------ ---------------------------- ---------------
------------
-----
------------ -----------
----
------------
------ ---------------------------- ---------------
------------
-----
-------
-------这个模板文件中包含了三个模板变量 allRelated、similar、related。这些变量将链接到相关文章，类似文章和标签文章。
在实际应用中，插件和模板可以根据具体需要进行配置和自定义。
结论
metalsmith-static-related 是一个有用的 Metalsmith 插件，它可以为文章页增加方便的相关链接和标签链接。该插件的使用方法简单，只需安装它，并将其添加为 Metalsmith 插件即可。同时，该插件也可以根据具体需要进行自定义和配置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f411d8e776d08040da0