| typora-copy-images-to | typora-root-url |
|---|---|
image |
./ |
本系列文档都是使用docsify来编写的，在本档中记录了docsify的使用方法。
类似产品：gitbook
官网推荐全局安装 docsify-cli 工具，可以方便地创建及在本地预览生成的文档。这里使用的是nodejs的包管理工具npm
npm i docsify-cli -g
可以看到docsify-cli工具安装到了如下位置
使用命令docsify init xxx，初始化一下项目。这里我们初始化了一个hello项目
初始化成功后，可以看到生成了hello目录，其下创建的3个文件
①index.html 入口文件
②README.md 会做为主页内容渲染
③.nojekyll 用于阻止 GitHub Pages 忽略掉下划线开头的文件
我们直接编辑 hello/README.md 就能更新文档内容，当然也可以添加更多页面。
通过运行 docsify serve 启动一个本地服务器，可以方便地实时预览效果。默认访问地址 http://localhost:3000 。
docsify serve xxx，这里我们启动之前新建的hello项目。
默认效果如下，可以看到空空如也
详细内容参考本文位置：Typora用法
如果需要创建多个页面，或者需要多级路由的网站，在 docsify 里也能很容易的实现。例如创建一个 guide.md 文件，那么对应的路由就是 /#/guide。
在hello项目下新建一个WORK_BTR.md，然后同样使用Typora对其进行编辑，预览时特别注意网址的写法。
对比一下，在根目录下新建一个子文件夹，并在子文件夹下新建一个readme.md文件，其网址如下：
下图是index.html中的默认配置，其对应的侧边栏样式如下：
我们在根目录下新建一个子文件info，其下建立md文件readme和history，并简要编辑其内容。
在根目录下新建_sidebar.md，并且将刚才新建的info下的readme和history加入其中。
修改根目录下的index.html文件，修改如下：
可以看到name对应左侧侧边栏的标题，repo对应右上角的GitHub仓库链接图标。而loadSidebar: true；使得侧边栏样式也发生了改变。
当我们点击“首页”和“历史”时，显示的对应的就是info下的readme.md和history.md。
你可能想要浏览到一个目录时，只显示这个目录自己的侧边栏，这可以通过在每个文件夹中添加一个 _sidebar.md 文件来实现。
_sidebar.md 的加载逻辑是从每层目录下获取文件，如果当前目录不存在该文件则回退到上一级目录。例如当前路径为 /zh-cn/more-pages 则从 /zh-cn/_sidebar.md 获取文件，如果不存在则从 /_sidebar.md 获取。
下图是我根目录下_sidebar.md的配置，效果如下：
我这里想要info下的显示的侧边栏与根目录下的不一样，故在info下新建一个_sidebar.md，修改如下：
可以看到，当我们访问info下面的文档是，侧边栏确实显示不一样的信息
？？没明白alias的作用？？回退是指什么？？
自定义侧边栏同时也可以开启目录功能。设置 subMaxLevel 配置项。
效果如下;
docsify官方并不支持侧边栏折叠，目前只能通过第三方插件实现或者自己DIY。
https://github.com/iPeng6/docsify-sidebar-collapse
可以用 HTML 创建一个导航栏。 注意：文档的链接都要以 #/ 开头。
新建_navbar.md文件，并在其中编写目录
修改index.html中的配置。
<script>
window.$docsify = {
name: '系统信息',
//仓库地址
repo: 'https://github.com/tongbiaos/docs',
//自定义侧边栏
loadSidebar: true,
//自定义导航栏
loadNavbar: true,
//开启目录，并设置最大层级
subMaxLevel: 6,
//开启封面
//coverpage: true,
//开启全文检索
search: 'auto', // 默认值
}
</script>
效果如下：
注意检索前，需要清空一下浏览器的缓存数据，然后重新加载网页，获取最新的网页数据，然后再检索。
通过设置 coverpage 参数，可以开启渲染封面的功能。
我们可以把文档网站部署到 GitHub Pages 上，但对于国内用户来说，码云的访问速度显然会更快一些。
这里我使用一个我的二级域名来完成映射，修改github上的pages中Custom domain。
注意配置完成之后会多一个CNAME文件。
在阿里云上配置一下二级域名的映射记录，注意记录类型。
链接引用，不显示
用 # 可以表示标题，一级标题对应一个 # ，二级标题对应两个 # 号，最多至六级标题。
实例测试：这种情况会默认加载视频并播放，
测试效果：
在PC上显示正常，还可以显示指定页数，但是在android上就显示得不是太好。
本页内测试效果：跳转到“Typora用法-图片”
其他页跳转测试效果：跳转到“鸿学院-市场结构梳理归纳”
一个markdown文件的编辑器，我目前就在用这个来编辑文件，外观如下：
在Typora中，# 后要紧接着一个空格才能表示标题，否则就是普通字符。Ctrl+0表示段落，Ctrl+1（2，3，4，5，6）表示相对应的标题。
注意在规划标题时最好保留一级标题不使用，留给最终的目录。
在插入图片前，要先设置好图片的根目录。
另外要设置好插入本地图片时，复制图片到项目文件夹的指定目录内，我一般是放在image中。这样在使用浏览器查看的时候图片也能正常显示。
先插入一个超链接
在[]中填入要显示的文字，()中填入#和跳转的标题。
网上的一个教程：最齐全的Typora使用教程