用markdown写一个静态网站，还带搜索功能，确定不来看看？

docsify 是什么？

docsify 可以快速帮你生成文档网站。将你写的markdown文件直接在浏览器中转换为html。如果你想要开始使用它，只需要创建一个 index.html 就可以开始编写文档并直接部署在 GitHub Pages。

什么时候我会用到它？

如果你是vue开发者的话，你一定很熟悉vue的官网了，docsify就可以生成一个跟vue的官网一样的一个静态网站。当你要把自己用markdown写的笔记发布为一个网站给别人看，或者给自己的npm包写一个使用说明文档时非常有用。

入个门

1 新建一个目录 `demo`, 创建一个 `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">
  <!-- 加载css样式 -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">
</head>
<body>
    <!-- docsify 会默认渲染页面在id为app的div上 -->
    <div id="app"></div>
    <!-- 配置下 -->
    <script>
    window.$docsify = {}
    </script>
    <!-- 加载依赖的js文件 -->
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
</body>
</html>
复制代码

2 再创建一个 `README.md`文件（docsify默认把它作为主页）, 输入以下文本

    ## 我是主页啊

    > 写一段代码白

    ```javascript
    var string = "hello world"
    console.log(string)
    ```
复制代码

3、看看效果

在demo目录下，运行live-server

live-server 不知道？来来来学习以下（其实就是简便的在运行目录，开启一个服务）

# 控制台输出
docsify git:(master) ✗ live-server
http://0.0.0.0:8080 is already in use. Trying another port.
Ready for changes
Serving "/Users/baymax/Desktop/workspace/note-repo/docsify" at http://127.0.0.1:59329
GET /README.md 404 2.709 ms - 148
GET /favicon.ico 404 0.518 ms - 150
GET /README.md 404 0.635 ms - 148
复制代码

打开 http://127.0.0.1:59329，即可看到我们用docsify创建的网站

初步效果

网站没个导航吗？

安排！！

<!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">
  <!-- 加载css样式 -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">
</head>
<body>
    <!-- 导航在这里啊 -->
    <nav>
        <a href="#/">首页</a>
        <a href="#/quick-start/">快速上手</a>
        <a href="#/api/">api</a>
        <a href="#/other/">其他</a>
    </nav>
    <!-- docsify 会默认渲染页面在id为app的div上 -->
    <div id="app"></div>
    <!-- 配置下 -->
    <script>
    window.$docsify = {}
    </script>
    <!-- 加载依赖的js文件 -->
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
</body>
</html>
复制代码

左侧的导航好丑

去掉吧

<script>
window.$docsify = {
    hideSidebar: true,
}
</script>
复制代码

什么？你想定制侧边栏

走起！！！

<script>
// 启用加载侧边栏
window.$docsify = {
    loadSidebar: true,
}
</script>
复制代码

接着创建 _sidebar.md 文件，内容如下

<!-- demo/_sidebar.md -->

* [快速上手](quick-start/)
    * [模板字符串](quick-start/str)
    * [v-bind](quick-start/bind)
    * [v-html](quick-start/html)
    * [v-click](quick-start/click)
* [其他](other)

复制代码

说好的搜索功能呢？

    <!-- 配置下 -->
    <script>
        window.$docsify = {
            loadSidebar: true,
            search: 'auto', // 默认值,
            // hideSidebar: true,
        }
    </script>
    <!-- 加载依赖的js文件 -->
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
复制代码

给网站中所有的代码块增加复制到剪贴板功能（加载一个插件即可）

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

<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
复制代码

复制到剪切板更多配置 docsify-copy-code

进阶使用

请参看docsify的官网