npm 包 Wikibox 使用教程-JavaScript中文网-JavaScript教程资源分享门户

npm 包 Wikibox 使用教程

随着现代互联网的快速发展，越来越多的网站需要提供搜索功能。而对于维基百科这样的知识库网站，搜索功能的重要性更是不言而喻。Wikibox 就是一款基于维基百科 API 的 npm 包，可以快速地在你的网站中集成维基百科相关信息的搜索功能。本文将详细介绍 Wikibox 的安装与使用，以及一些实际场景下的应用示例。

安装

在使用 Wikibox 之前，需要先进行安装。在终端中输入以下命令即可：

--- ------- ------- ------

使用

Wikibox 的使用非常简单。只需编写以下代码即可在你的网站中嵌入一段维基百科的搜索框：

--------- -----
------
------
    -------------- ------------
-------
------
    ---- -----------------------------
    ------- --------------------------------------------------------
    --------
        ---------
            ---------- --------------------
            ------- ------
        ---
    ---------
-------
-------

其中，wikibox-container 是你要放置搜索框的 div 元素的 id。engine 则指定了搜索引擎，这里我们指定为 'wiki' 表示使用维基百科搜索引擎。你还可以选择 'google' 或 'bing' 等其他搜索引擎。

启动网站后，你应该就能在页面中看到一个简单的搜索框了。

其他参数

除了必须的 container 和 engine 属性外，Wikibox 还支持很多其他的自定义参数：

language: 指定搜索的语言，默认为 'en'
minChars: 触发自动补全的最少字符数，默认为 3
maxItems: 自动补全框中最多展示的搜索结果数量，默认为 10
delay: 触发自动补全的时间间隔（毫秒），默认为 200

应用示例

现在我们来看看一些实际场景下，如何使用 Wikibox 来提升我们网站的搜索功能。下面是一些示例代码：

示例 1：搜索百科知识

如果你的网站上有一些专业术语或名词需要解释，那么可以使用 Wikibox 来快速搜索维基百科的相关词条，提供更加详细的解释。

---------
    ---------- -----------------------
    ------- -------
    --------- --
    --------- -------------- -
        --- ----- - -------------------- --------
        --- --- - -------------------------------- - ------
        -----------------
    -
---

上面的代码中，我们将 minChars 设为零，表示只要输入框有内容，就会触发自动补全。而为了方便用户直接进入相关词条页面，我们还在 onSelect 回调函数中，为搜索结果添加了单击事件处理，并打开了相应的维基百科页面。

示例 2：搜索图片

如果是一个图片网站，那么当用户在搜索框中输入图片名称时，我们可以使用 Wikibox 提供的 Bing 搜索引擎，搜索相关图片并展示出来。

---------
    ---------- ------------------
    ------- -------
    --------- -------------- -
        --- --- - ---------
        --- ---- - ----- ------ - --- - -----
        ---------------------------
    -
---

上面的代码中，我们将 engine 设为 'bing'，并在 onSelect 回调函数中使用搜索结果的图片 url，创建一个 img 标签并展示出来。

示例 3：搜索视频

如果是一个视频网站，我们可以使用 Wikibox 提供的 Google 搜索引擎，搜索相关视频并展示出来。

---------
    ---------- ------------------
    ------- ---------
    --------- -------------- -
        --- ------- - ----------------
        --- --- - ---------------------------------- - --------
        --- ---- - -------- ----------- ------------ ------ - --- - -- --------------- ---------------------------
        ---------------------------
    -
---

上面的代码中，我们将 engine 设为 'google'，并在 onSelect 回调函数中使用搜索结果的视频 id，创建一个 iframe 元素并展示出来。因为视频的 url 地址中包含视频 id，所以需要先从搜索结果中提取视频 id，然后再拼接出正确的 url 地址。另外，搜索结果的媒体类型可能不确定，我们需要先确认搜索结果是否为视频类型。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/6006710b8dd3466f61ffe0fd