npm 包 gitbook-plugin-wrapper 使用教程

前言

对于前端开发者而言，使用 GitBook 是非常便捷的。然而，在使用 GitBook 进行文档编写时，也会遇到一些问题。其中一个问题是，如何轻松实现 Markdown 中插入各种常用的媒体内容，如 YouTube 视频、Slideshare 文档、GitHub 代码等等。而 gitbook-plugin-wrapper 简化了这些需求的实现，本文将详细介绍如何使用该插件。

安装

使用 npm 可以轻松地安装 gitbook-plugin-wrapper 插件：

npm install --save-dev gitbook-plugin-wrapper

安装完毕之后，需要在 GitBook 的插件列表中进行注册，打开 book.json 文件，添加以下配置：

{
  "plugins": [
    "wrapper"
  ]
}

注意，若已经存在其他插件，则需要将 wrapper 插件添加在其中。

使用

使用 gitbook-plugin-wrapper 插件，需要使用以下格式的 HTML 代码：

<div data-type="type" data-url="url"></div>

其中 data-type 为需要插入的内容的类型，data-url 为要插入内容的 URL。

常用的类型包括：

• YouTube：YouTube 的视频。
• Slideshare：Slideshare 的文档。
• Codepen：Codepen 的代码块。
• Twitter：Twitter 的推文。
• GitHub：GitHub 的代码。

例如，下面是一个插入了 YouTube 视频的例子：

<div data-type="YouTube" data-url="https://www.youtube.com/watch?v=dQw4w9WgXcQ"></div>

这样一来，就可以轻松地将 YouTube 视频插入到 GitBook 的文档中。

关于更多的类型和示例，请参考插件的 GitHub 页面：https://github.com/GitbookIO/plugin-wrapper

总结

使用 gitbook-plugin-wrapper 插件，可以让 GitBook 的文档编写更加方便快捷。在使用时，需要注意 data-type 和 data-url 的使用格式，并参考插件的示例代码，尤其是针对某些类型（如 GitHub 代码）需要使用特定的参数来进行配置。

此外，在文档编写过程中，需要注意遵守基本文档编写规范，如 Markdown 语法等，以免影响阅读体验。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557fb81e8991b448d5156