docsify 是一个文档站点生成器。
使用起来非常简单。也是采用 Markdown 语法来编写文档。
但它与 Hexo 不同的是，Hexo 是编译完成之后再展示，会把源文件转换成 html 文件。
docsify 是在展示时再进行实时编译，这样做的好处是.md源文件不会变成 .html 文件。
安装
建议docsify-cli全局安装，这有助于在本地初始化和预览网站。
npm i docsify-cli -g
然后选择目录进行初始化,这里的 .docs是指在当前目录 dosc 文件夹下面安装 docsify
docsify init ./docs
初始化完成后，你可以看到 dosc 文件夹的目录结构
// 在之后init完成后，你可以看到在文件列表./docs子目录。
---index.html 作为条目文件
---README.md 作为主页
---.nojekyll 阻止GitHub页面忽略以下划线开头的文件
预览项目
docsify serve docs
默认地址是 http://localhost:3000，复制到浏览者打开便能看到了欢迎页面了。
给你的文档加点花样
侧边栏
- 添加属性
loadSidebar: true
<!-- index.html -->
<script>
window.$docsify = {
loadSidebar: true
}
</script>
- 新建文件
_sidebar.md
熟悉 Markdown 语法的同学，就可以直接做一个列表了。列表的内容就是你的侧边栏的内容
<!-- _sidebar.md -->
* **这里写标题(不写也没关系，只是为了分类更清楚，双引号只是加粗的意思，就是 md 语法而已)**
* [你的页面标题A](页面链接)
* [你的页面标题B](页面链接)
例如：
完成之后，进行项目预览
docsify serve docs
具体效果就如下啦
添加封面
- 添加属性
coverpage: true
<!-- index.html -->
<script>
window.$docsify = {
coverpage: true
}
</script>
- 新建文件
_coverpage.md
<!--logo图 可以用 <svg> 的方式添加图片-->
# docsify <small>3.5</small>
> A magical documentation site generator.
- Simple and lightweight (~21kB gzipped)
- No statically built html files
- Multiple themes
👨🏻🏫添加 vuep 实时预览代码
其他类似的功能我就不重复了，这里只举一两个例子，可以对照官方文档去举一反三使用。
vuep 是一个使用实时编辑器和预览渲染Vue组件的插件。
- 安装
下面这些东西放在 index.html 中就行，具体放哪里，不要我说了吧，不知道的话，我会锤死你哦
<link rel="stylesheet" href="//unpkg.com/vuep/dist/vuep.css">
<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/vuep"></script>
为了代码美观高亮，还可以引入如下两个插件
<script src="//unpkg.com/prismjs/components/prism-bash.min.js"></script>
<script src="//unpkg.com/prismjs/components/prism-php.js"></script>
做好这些准备工作之后，就可以使用了 vuep 了。
- 使用
这是一个简单的例子，如果你会 vue 的一些基本语法的话，那就太棒了。
vuep中的template 属性值 = scrip中的id属性值，至于属性值叫啥名，那就由你自己去决定了。
// vuep 中的 template 属性值 = scrip 中的 id 属性值
<vuep template="#demo"></vuep>
<script v-pre type="text/x-template" id="demo">
// html 模板文件
<template></template>
// 样式文件
<sytle></style>
// 事件处理
<script>
module.exports = {
data: () {
return { name: 'cinwell' }
}
}
</script>
</script>
如果你想要使用 ES6 语法的话，那么你得引入下面这个文件
<script src="//unpkg.com/babel-standalone/babel.min.js"></script>
如果你想要使用 JSX 语法的话，那么你得引入下面这些文件
<script src="//unpkg.com/babel-standalone/babel.min.js"></script>
<script src="//unpkg.com/babel-plugin-transform-vue-jsx"></script>
最后，你需要注意的是，<script v-pre type="text/x-template"> 必须放在末尾！
最后，你需要注意的是，<script v-pre type="text/x-template"> 必须放在末尾！
最后，你需要注意的是，<script v-pre type="text/x-template"> 必须放在末尾！
你可以就按照这样的格式来写就行了，正确的例子
<vuep></vuep>
<script v-pre type="text/x-template">
<template></template>
<style></style>
<script></script>
</script>