宋子宪博客

docsify文档生成利器使用

docsify的官网：https://docsify.js.org

第一步 安装docsify-cli

打开命令行，执行以下命令安装 docsify-cli，方便本地初始化和实时预览。

npm i docsify-cli -g

第二步 初始化

创建一个文件夹,并在当前文件夹下执行以下命令创建文档目录并初始化。

docsify init ./docs

创建后之后会发现一个docs的目录,docs目录下有三个文件

第三步 启动docsify本地服务

docsify serve docs

第四步，浏览器预览

在浏览器地址栏输入http://localhost:3000 进行访问

个性化操作.1
自定义导航栏
打开 index.html 文件，在 body 标签中添加 nav 标签，如下所示：

  <nav>
      <a href="https://songzixian.com/">宋子宪博客</a>
  </nav>

保存后，就可以在浏览器上查看到效果。

定制化配置项 .2

打开 index.html 文件，在 script 标签中对 window.$docsify 进行配置，如下所示：

window.$docsify = {
        name: '宋子宪博客',
        repo: 'https://songzixian.com/',
}

1）name：文档标题，会显示在侧边栏顶部。

2）repo：GitHub 上的仓库地址，会在页面右上角渲染一个 GitHub 角标。

保存后，就可以在浏览器上查看到效果。

安装插件 .3

1）全文搜索

全文搜索插件会根据当前页面上的超链接获取文档内容，在 localStorage 内建立文档索引。默认过期时间为一天，也可以指定需要缓存的文件列表或者过期时间。

打开 index.html 文件，添加全文搜索配置项，并引入 search.min.js，如下所示：

<body>
  <script>
    window.$docsify = {
      search: {
        paths: 'auto',
        placeholder: '搜索',
        noData: '找不到结果',
        depth: 3,
      },
    }
  </script>
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
</body>

2）图片缩放

在 index.html 文件中引入 zoom-image.min.js 即可，如下所示：

复制到剪贴板

在所有的代码块上添加一个简单的 Click to copy 按钮来允许用户从你的文档中轻易地复制代码。在 index.html 文件中引入 docsify-copy-code 即可，如下所示：

<script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>


保存后，就可以在浏览器上查看到效果。

3）复制到剪贴板

在所有的代码块上添加一个简单的 Click to copy 按钮来允许用户从你的文档中轻易地复制代码。在 index.html 文件中引入 docsify-copy-code 即可，如下所示：

保存后，就可以在浏览器上查看到效果。

4）字数统计

提供了统计中文汉字和英文单词的功能，并且排除了一些 markdown 语法的特殊字符例如 *、- 等。

打开 index.html 文件，添加 count 配置项，并引入 countable.js，如下所示：

<body>
  <script>
    window.$docsify = {
      count:{
        countable:true,
        fontsize:'0.9em',
        color:'rgb(90,90,90)',
        language:'chinese'
      }
    }
  </script>
<script src="//unpkg.com/docsify-count/dist/countable.js"></script>
</body>


保存后，就可以在浏览器上查看到效果。

06、代码高亮
docsify 内置的代码高亮工具是 Prism。Prism 默认支持的语言如下：

Markup - markup, html, xml, svg, mathml, ssml, atom, rss
CSS - css
C-like - clike
JavaScript - javascript, js
Java 需要在 index.html 文件中添加额外的语法文件，如下所示：

<!-- 代码高亮-->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.22.0/components/prism-java.min.js"></script>


保存后，就可以在浏览器上查看到效果。

当前页面是本站的「Google AMP」版。查看和发表评论请点击：完整版 »