作为前端开发者，我们有时候需要为博客或者网站添加相关文章以促进阅读和提高转化率。Metalsmith 是一个类似于 Grunt 和 Gulp 的构建工具，它可以用 JavaScript 作为配置文件轻松构建静态网站，并且非常容易扩展。 在本文中，我们将介绍如何使用 metalsmith-related-posts 插件来查找和添加相关博客文章。
安装 metalsmith 和插件 metalsmith-related-posts
首先，我们需要安装 Metalsmith 和插件 metalsmith-related-posts。 运行以下命令：
--- ------- ------ ---------- ------------------------
添加插件到 metalsmith 的配置文件
安装完成之后，我们需要在 metalsmith 的配置文件中添加相关的插件，以实现相关文章的功能。 这里我们使用 JavaScript 作为配置文件，如下所示：
----- ---------- - ----------------------
----- ------------ - ------------------------------------
---------------------
-----
--------------
--------- -- -- ---- - --------------
---------- - -- ---------------------------------------------
--
-
-------------------- -
-- ----- ----- ----
---在上面的代码中，我们首先引入了 metalsmith 和 metalsmith-related-posts，然后在 metalsmith 对象中使用了 .use() 方法添加了我们的插件。
在 relatedPosts() 选项中，我们定义了 maxCount 为 5，表示在每篇文章下面最多添加 5 篇相关文章。我们还设置了 threshold 为 1，这意味着仅当两篇文章的标题或标签至少有一个匹配时，才将两篇文章连接起来。
配置相关文章页面的模板
现在我们需要在模板中添加相关文章的部分。 这里我们使用 ejs 模板库并利用模板语法来循环并显示相关文章。 下面是一个简单的 blogPost.ejs 模板文件的例子：
-- --- ---- ----- -- ------ - --
-- --- ---- - ------------ --
-- -- ------------------- - --
----------- ----------
----
-- --- ---- --------- -- ------------------ - --
-- --- ----------- - ---------------------------- --
----
-- --------- ---------------- ----
--- ----------------- --
----
-----
-- - --
-----
-- - --
-- - --在上面的模板中，我们首先使用 for 循环遍历所有文章，然后使用 if 语句来检查当前文章是否有相关文章。 再次使用 for 循环遍历relatedPosts数组，并将每篇相关文章显示为链接。
运行 metalsmith
有了以上的配置，我们现在可以使用以下命令来构建我们的静态网站：
---- --------
这将启动 metalsmith 并使用我们配置的插件查找相关文章并将其添加到我们的网站中。
总结
通过使用 metalsmith-related-posts 插件，我们可以轻松地为静态网站添加相关文章。 您可以根据需要调整 maxCount 和 threshold 参数来获得最佳结果，并使用模板语言获取相关文章数组并进行进一步的修改或样式化。
如果你想学习更多关于 Metalsmith 和相关插件的知识，可以查看官方文档 以及 Metalsmith 的 Github 仓库。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005590e81e8991b448d67ce