docsify常用的一些插件及配置

前面的几篇文章，我们陆续介绍了docsify网站的搭建及一些基本配置。

本篇是我们关于docsify系列介绍的最后一篇。

主要介绍一下我们常用的一些docsify插件。

docsify的配置其实就是一些js及css插件，因此我们下面凡是脚本，大家都放到body中，凡是css文件，都放到head中，配置文件统一放到docsify配置节点。

有不会配置的可以参考https://lisen.cc/blog/the-docsify-configuration-article-navigation.html

一、统计文章字数

1.1、添加插件

<!-- 字数插件 -->
<script src="//cdn.jsdelivr.net/npm/docsify-count@latest/dist/countable.min.js"></script>

1.2、配置

// 字数插件
      count: {
        countable: true,
        position: 'top',
        margin: '10px',
        float: 'left',
        fontsize: '0.9em',
        color: 'rgb(90,90,90)',
        language: 'chinese',
        localization: {
          words: "",
          minute: ""
        },
        isExpected: true
      },

二、支持翻页

1.1、添加插件

<!-- 翻页 -->
  <script src="//cdn.jsdelivr.net/npm/docsify-pagination/dist/docsify-pagination.min.js"></script>

1.2、配置

pagination: {
        previousText: '上一章节',
        nextText: '下一章节',
        crossChapter: true,
        crossChapterText: true,
      },

三、图片放大缩小

点击图片可以查看大图。

  <!-- 图片放大缩小支持 -->
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>

四、emoji表情支持

  <!-- emoji表情支持 -->
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>

五、点击复制

所有的代码块上添加一个简单的Click to copy按钮来允许用户从你的文档中轻易地复制代码。

  <!--在所有的代码块上添加一个简单的Click to copy按钮来允许用户从你的文档中轻易地复制代码-->
  <script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>

六、美化提示

 <!-- 美化提示 -->
  <script src="//cdn.jsdelivr.net/npm/docsify-plugin-flexible-alerts"></script>

具体使用方式可以参考https://www.npmjs.com/package/docsify-plugin-flexible-alerts