在 Hexo 博客系统中，相关文章展示是一个常见的需求。hexo-next 是一个非常受欢迎的 Hexo 主题，它提供了一个名为 list_related_posts 的模板标签，可以在文章页面中展示相关的文章。但是，该标签默认只展示标题和摘要，无法展示文章的缩略图。
为了解决这个问题，社区开发者开源了一个 npm 包，名为 hexo-next-list-related-posts，它可以扩展 list_related_posts 标签，支持展示文章的缩略图。本文将介绍此 npm 包的使用方法。
安装
在 Hexo 根目录下执行以下命令，安装 hexo-next-list-related-posts：
npm install hexo-next-list-related-posts --save
配置
在 Hexo 博客系统中，主题的配置文件是 _config.yml。在该文件中，找到 hexo-next 主题的配置节，添加以下配置：
next:
list_related_posts:
show_cover: true
cover_size: thumbnail其中，show_cover 表示是否展示缩略图，cover_size 表示缩略图的尺寸，可选值为 thumbnail 或 medium。当值为 thumbnail 时，缩略图的尺寸为主题中指定的缩略图尺寸；当值为 medium 时，缩略图的尺寸为 400x400。
使用
在文章模板中，使用 list_related_posts 标签，即可展示相关文章。例如，在 layout/_partials/article.ejs 文件中，添加以下代码：
<% if (theme.list_related_posts && theme.list_related_posts.enabled) { %>
<div class="post-related">
<h4 class="post-related__title"><%- theme.list_related_posts.title %></h4>
<% list_related_posts({ show_cover: theme.list_related_posts.show_cover, cover_size: theme.list_related_posts.cover_size }) %>
</div>
<% } %>其中，theme.list_related_posts.enabled 表示是否启用相关文章展示。
示例代码
本示例代码可以在 GitHub 上查看：
-- -------------------- ---- -------
-- -- ------------------------- -- --------------------------------- - --
---- ---------------------
--- ------------------------------- ------------------------------ -------
---- ---------------------------
-- -------------------- ----------- ------------------------------------ ----------- ----------------------------------- ------------------------- - --
---- ---------------------------
-- -- ------------ - --
-- --------- -------------- --- ----------------------------------------- ------------------------------- -------------------------------------------------------------- ---- ------
---- ------------------------------------------
---- ------------------------------------- ---------- --------
------
----
-- - ---- - --
-- --------- -------------- --- ---------------------------------------------
---- ------------------------------------- ---------- --------
----
-- - --
------
-- -- --
------
------
-- - --示例代码中，list_related_posts 标签返回一个包含相关文章信息的数组，包括文章的标题、链接、摘要、缩略图等。我们可以使用 forEach 循环遍历这个数组，依次展示每篇相关文章。
对于每篇文章，我们首先判断其是否有缩略图。如果有，我们将其展示在 post-related__item__cover-wrapper 样式类的元素中，作为背景图片；否则，我们将标题展示在 post-related__item__no-cover-wrapper 样式类的元素中。此外，我们使用 post-related__item__cover-overlay 样式类，给缩略图加上一个遮罩，并在遮罩上展示文章的标题。
总结
hexo-next-list-related-posts 是一个非常实用的 npm 包，可以帮助 Hexo 博客系统中的相关文章展示更加丰富和生动。在本文中，我们介绍了该 npm 包的安装、配置以及使用方法，并提供了示例代码。希望本文可以帮助读者更好地使用该 npm 包，提升博客的阅读体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557ea81e8991b448d4fba