在现代 Web 开发中，通常需要处理大量的数据。如果你正在构建一个博客或者新闻网站类型的 Web 应用，那么读者也往往需要相关的内容推荐。这个推荐过程前端通常通过使用相关其他内容的 API 来处理。
@phenomic/plugin-api-related-content 就是一个非常好用的 npm 包，可以帮助你自动获取和展示相关的文章和内容。
使用 @phenomic/plugin-api-related-content 这个插件需要你深入了解 Phenomic，一个支持静态站点生成和动态构建的前端框架。由于我们的文章主要围绕 Phenomic 进行，因此建议先了解 Phenomic 然后再来使用本文中介绍的插件。
安装
使用以下命令安装 @phenomic/plugin-api-related-content：
npm i -D @phenomic/plugin-api-related-content
使用
使用前需要将 @phenomic/plugin-api-related-content 添加到 Phenomic 配置文件的插件列表中。这个插件需要两个参数：source 和 limit。source 是你需要获取相关内容的类型，例如获取最新文章、最热文章等等，limit 是你需要获取的相关内容数量。最后，你需要将这个插件传递给你的 Phenomic 插件列表，如下所示：
-- -------------------- ---- -------
-- ------------------
-------------- - -
-------- -
---
-------------------------------------------------
------- ---------
------ -
---
---
-
--现在你已经将 @phenomic/plugin-api-related-content 添加到 Phenomic 配置中，就可以在你的页面或博客文章中使用该插件了。你可以使用 this.props.__url 对全局变量进行调用，获取当前页面的信息。你可以将这个 url 传递给 Now 的 URL，并传递需要 limit 的属性。
// src/layouts/Default.js
const RelatedContent = require("@phenomic/plugin-api-related-content");
// define your layout
{component}
<RelatedContent limit={3} source="recent" filter={url => url !== this.props.__url} />
// other components, footer, etc.这个示例中，我们在布局的最后添加了一个 $RelatedContent 组件来获取和展示其他内容。
现在当你运行你的应用并点击文章的链接时，你应该看到页面底部已经自动生成和展示相关的其他内容了。因为它是根据设置的过滤器来获取内容，所以当它在到达页面的位置时它不会再展示当前页面了。
总结
使用 @phenomic/plugin-api-related-content 模块非常简单，它只需要一个 Phenomic 配置和一个相关的 filter 函数。当然，如果你想展示其他类型的内容或者增加其他功能，可以通过这个模块来实现。希望本文对你有所帮助，如果你有疑问或建议，请在评论区留言，谢谢！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672f00520b171f02e1f12