npm 包 gitbook-plugin-theme-mic 使用教程

简介

gitbook-plugin-theme-mic 是一款在 Gitbook 中使用的插件,它可以在 Gitbook 中提供类似微信读书 or 知乎日报的主题,提升文档的阅读体验。它基于 vuepress-theme-macarons 进行开发,使用了一些 Vue.js 的技术,因此在使用之前,需要先了解 Vue.js 的基础知识。

安装

在 Gitbook 中使用该主题,需要先安装 gitbook-plugin-theme-mic。可以使用 npm 进行安装:

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

使用

安装完成之后,在 Gitbook 的 book.json 中添加配置:

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

之后,可以使用 gitbook serve 命令进行预览。

配置

gitbook-plugin-theme-mic 也提供了一些配置选项,可以在 book.json 文件中进行设置。

首页

通过设置 themeConfig.home 可以设置首页的数据和布局:

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

侧边栏

侧边栏可以通过 themeConfig.sidebar 进行设置:

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

导航栏

导航栏可以通过 themeConfig.nav 进行设置:

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

示例

以下是一个简单的示例,通过配置 book.json 文件,实现了一个含有侧边栏、导航栏和主页的 Gitbook 站点。该站点含有两个章节,每个章节又各包含两个主题。

book.json

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

index.md

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

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

-- --

---------

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

-- ----

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

chapter-one/guide.md

- ---

-- --

-----

-- ----

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

chapter-one/theme-one.md

- ---

-----

chapter-one/theme-two.md

- ---

-----

chapter-two/abc.md

- ---

-- --

-----

-- ----

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

chapter-two/theme-three.md

- ---

-----

chapter-two/theme-four.md

- ---

-----

通过以上配置和文件,可以生成一个 Gitbook 站点,具体效果可以看截图:

结束语

gitbook-plugin-theme-mic 是一个非常好用的插件,可以让 Gitbook 显得更加漂亮。通过阅读本教程和学习示例,相信您已经能够熟练使用该插件,开发出一份满足需求的 Gitbook 了。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/63458


猜你喜欢

  • npm 包 vtex-utils 使用教程

    简介 vtex-utils 是一个由 VTEX 团队开发的npm包,专门用于在 VTEX 平台上进行前端开发。它包含了许多实用的工具函数和方法,可以大幅提高前端开发的效率和质量。

    5 年前
  • npm 包 Prajna-Wrapper-Plugin 使用教程

    简介 Prajna-Wrapper-Plugin 是一个基于 webpack 开发的插件,主要是为了让开发者能够更加方便地使用 Prajna,一个基于 Vue.js 构建的前端监控和异常上报系统。

    5 年前
  • npm 包 d3-parliament 使用教程

    摘要 d3-parliament 是基于 d3.js 的一个 npm 包,用于可视化议会的座位分布。本文为读者详细介绍了如何使用 d3-parliament 提供的 API 并提供实用示例。

    5 年前
  • npm 包 vueify 使用教程

    在开发 Vue.js 应用的过程中,我们经常需要对单个组件进行样式或逻辑的处理,而此时常常需要用到 vueify 这个 npm 包。本篇文章将详细介绍 vueify 的使用方法,并提供示例代码供读者参...

    5 年前
  • npm 包 js-to-string 使用教程

    介绍 在前端开发中,经常需要将 JavaScript 对象转换成字符串。这个过程中我们需要考虑很多问题,例如:空值、数组、对象嵌套等情况的处理方式。但是,如果手动去写这些转换函数,非常的麻烦且容易出错...

    5 年前
  • npm 包 sleep-ms 使用教程

    在前端开发中,我们经常需要使用定时器来执行一些异步操作。但是有些时候,我们希望等待一段时间再执行某些操作,而不是立即执行。这时候一个叫做 sleep-ms 的 npm 包就可以派上用场了。

    5 年前
  • npm 包 simple-vue-component-test 使用教程

    简介 simple-vue-component-test 是一个为 Vue 组件编写单元测试的 npm 包。该包集成了 Jest 和 vue-test-utils,简化了测试过程并让测试更加容易上手。

    5 年前
  • npm 包 iniparser 使用教程

    当我们需要读取或修改 ini 文件时,可以使用 iniparser 这个 npm 包。iniparser 是一个开源的 Node.js 模块,用于解析 ini 文件。

    5 年前
  • npm 包 generate-release 使用教程

    在前端开发中,我们经常需要使用第三方库,而这些库的更新与发布需要一定的管理方法。npm 包的 generate-release 就是一个非常实用的工具,可以帮助我们自动发布 npm 包,并处理版本号、...

    5 年前
  • npm 包 jscheck 使用教程

    什么是 jscheck jscheck 是一个 npm 包,它可以帮助开发人员对 JavaScript 代码进行测试和验证。它的主要优势之一是可以为 JavaScript 代码生成随机测试用例,从而发...

    5 年前
  • npm 包 immutable-diff 使用教程

    简介 immutable-diff 是一个基于 immutable.js 开发的 NPM 包,旨在帮助开发者比较两个对象之间的差异,并返回不变对象的差异表示。它可以自动性能优化,避免在处理大型对象时出...

    5 年前
  • npm 包 flame 使用教程

    本文将介绍如何使用 flame 这个实用的 npm 包,该包是一个强大的性能分析工具,可以帮助前端开发人员更好地分析网页的渲染性能,从而提高网站的用户体验和性能。

    5 年前
  • 移动平均在 HLS.JS 的实践

    移动平均是一种常用的信号处理方法,它可以使数据更加平滑。在 HLS.JS 中使用移动平均可以有效地改善音视频播放的质量。 移动平均的原理 移动平均通过计算一定时间窗口内数据的平均值来平滑数据,具体实现...

    6 年前
  • npm包vue-pronto使用教程

    什么是npm包 npm是Node.js Package Manager的缩写,是Node.js的官方包管理工具。在前端开发中,开发者可以通过npm获取各种JS库、插件、框架等资源,方便地进行前端开发。

    6 年前
  • npm 包 dragonbones-runtime 使用教程

    简介 DragonBones 是一款基于 Flash(Adobe Animate)的动画工具,可用于设计游戏中的角色动画、UI 动画、游戏特效等,其官网为 http://dragonbones.com...

    6 年前
  • 使用 gulp-pool 管理任务池

    简介 gulp-pool 是一个基于 gulp 的任务池管理器,可以方便地管理多个 gulp 任务,实现并发执行,提高工作效率。本文将介绍使用 gulp-pool 来管理任务池的方法,并给出详细的配置...

    6 年前
  • npm 包 httpolyglot 使用教程

    简介 httpolyglot 是一个用于在 Node.js 服务器上实现 HTTPS 协议的 npm 包。相比于使用自带的 https 模块实现 HTTPS 协议,httpolyglot 支持更多的协...

    6 年前
  • npm 包 generate-shortcode 使用教程

    一、前言 在前端开发的过程中,经常会遇到需要使用短码(即所谓的 shortcode)的需求。短码主要用于简化HTML模板中的代码,特别是当需要在模板中嵌入一些较为复杂的HTML结构时,使用短码可以节省...

    6 年前
  • npm 包 ringbufferjs 使用教程

    什么是 ringbufferjs? ringbufferjs 是一个基于 JavaScript 的 npm 包,用于创建环形缓冲区。它实现了一个环形数据结构,可以有效地将数据写入和读取出来。

    6 年前
  • npm 包 uber-statsd-client 使用教程

    在前端开发中,统计与监控是必不可少的环节。而 Uber StatsD Client 是一款易于使用的 Node.js 包,可以用于将统计数据发送到 StatsD 服务器。

    6 年前

相关推荐

    暂无文章