npm 包 nodebb-plugin-featured-topics-extended-with-title 使用教程-JavaScript中文网-JavaScript教程资源分享门户

npm 包 nodebb-plugin-featured-topics-extended-with-title 使用教程

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

前言

在开发过程中，我们经常需要展示一些特色话题或热门话题。nodebb-plugin-featured-topics-extended-with-title 是一个用来支持 NodeBB 论坛展示特色话题或热门话题的插件，它通过nodebb-plugin-featured-topics的基础上添加水平滚动、支持话题标题及缩略图等更丰富的功能。本篇文章介绍了详细的使用教程，帮助开发者更快速、方便地实现相关需求。

安装

使用 npm 安装 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