前言
在开发过程中，我们经常需要展示一些特色话题或热门话题。nodebb-plugin-featured-topics-extended-with-title 是一个用来支持 NodeBB 论坛展示特色话题或热门话题的插件，它通过nodebb-plugin-featured-topics的基础上添加水平滚动、支持话题标题及缩略图等更丰富的功能。本篇文章介绍了详细的使用教程，帮助开发者更快速、方便地实现相关需求。
安装
使用 npm 安装 nodebb-plugin-featured-topics-extended-with-title 插件。
npm install nodebb-plugin-featured-topics-extended-with-title
安装完成后，将插件注册到 NodeBB 后台即可。
配置和使用
后台设置
在 NodeBB 后台插件管理中，进入nodebb-plugin-featured-topics-extended-with-title设置项，根据需求进行相应的设置。主要设置有：
- 想要展示的话题数量
- 是否仅展示首页的特色话题
- 是否展示缩略图
- 是否具有水平滚动
插件的前端使用
在 apidoc 中，我们可以看到 nodebb-plugin-featured-topics-extended-with-title 暴露出的 API：
-- -------------------- ---- -------
--- --- - ----------------------------
--- ------ - --------------------
-------------- - -------- ------------ -
------------ ----------------------- ------------
--
-------- --------------- ---- ----- -
------------------------- -------- ----- -------- -
-- ----- -
------ ----------
-
------------------------ -
------- --------
---
---
-公共路由主要是访问 /，在打开 navigation 面板的时候，nodebb-plugin-featured-topics-extended-with-title 的命名空间会自动获取相应的数据，将它们注入到模板变量 topics 中并进行渲染，由此完成了插件的前端页面渲染。
前端模板
nodebb-plugin-featured-topics-extended-with-title 使用 templates 目录下定义的模板来渲染话题列表。模板文件是 navigation.tpl。模板的详细内容包括以下几点：
- 展示话题标题
- 展示话题缩略图
- 支持水平滚动展示（设定父级
div的overflow-x属性）
下面是一个基本的 navigation.tpl 的示例代码：
-- -------------------- ---- -------
--- ------------- -
---- ------------------------------------ ----------------------------------
---- ----------------------------------------
---- ---------------------------- ------------ -- ----------- --------
---- ---------------------------- ----------- -- --------
-- --------------- --------- --- ----------------
---- --------------------------------
---- ------------------------- ----------------------
------
---- ---------------------------------- ----------- --------
----
------
------
------
- ---- -
-----
-----通过将模板中的变量 topics 替换成自己的数据即可实现话题列表的渲染。其他的 CSS 样式和 JavaScript 功能可以根据个人需求进一步调整。
总结
本文介绍了 nodebb-plugin-featured-topics-extended-with-title 的安装、应用以及前端模板的使用方法，并提供了示例代码。希望本文的内容能够帮助到开发者。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005630081e8991b448e0d5f