docsify神奇的文档网站生成工具

时间 2019-12-07 标签 docsify 神奇文档网站生成工具

原文连接css

我的博客-欢迎访问html

docsify 是一个动态生成文档网站的工具。不一样于 GitBook、Hexo 的地方是它不会生成将 .md 转成 .html 文件，全部转换工做都是在运行时进行。vue

这将很是实用，若是只是须要快速的搭建一个小型的文档网站，或者不想由于生成的一堆 .html 文件“污染” commit 记录，只须要建立一个 index.html 就能够开始写文档并且直接部署在 GitHub Pages。python

特性

无需构建，写完文档直接发布
容易使用而且轻量 (~19kB gzipped)
智能的全文搜索
提供多套主题
丰富的 API
支持 Emoji
兼容 IE10+
支持 SSR (example)

快速开始

推荐安装 docsify-cli 工具，能够方便建立及本地预览文档网站。git

npm i docsify-cli -g
复制代码

初始化项目

若是想在项目的 ./docs 目录里写文档，直接经过 init 初始化项目。github

docsify init ./docs
复制代码

开始写文档

初始化成功后，能够看到 ./docs 目录下建立的几个文件chrome

index.html 入口文件
README.md 会作为主页内容渲染
.nojekyll 用于阻止 GitHub Pages 会忽略掉下划线开头的文件直接编辑 docs/README.md 就能更新网站内容，固然也能够写多个页面。

本地预览网站

运行一个本地服务器经过 docsify serve 能够方便的预览效果，并且提供 LiveReload 功能，可让实时的预览。默认访问 http://localhost:3000 。npm

docsify serve docs
复制代码

更多命令行工具用法，参考 docsify-cli 文档。服务器

手动初始化

若是不喜欢 npm 或者以为安装工具太麻烦，咱们其实只须要直接建立一个 index.html 文件。app

// index.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta charset="UTF-8">
  <link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      //...
    }
  </script>
  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
</body>
</html>
复制代码

若是系统里安装 Python 的话，也能够很轻易的启动一个静态服务器。

cd docs && python -m SimpleHTTPServer 3000
复制代码

Loading 提示

初始化时会显示 Loading... 内容，你能够自定义提示信息。

// index.html

  <div id="app">加载中</div>
复制代码

若是更改了 el 的配置，须要将该元素加上 data-app 属性。

// index.html

  <div data-app id="main">加载中</div>

  <script>
    window.$docsify = {
      el: '#main'
    }
  </script>

复制代码

示例

这是一份docsify开发的文档欢迎点击查看

更加详细的设置配置参考官方文档