2018-07-01 07:27:01 -04:00
|
|
|
# 快速开始
|
|
|
|
|
|
2020-07-05 00:51:07 -04:00
|
|
|
推荐全局安装 `docsify-cli` 工具，可以方便地创建及在本地预览生成的文档。
|
2018-07-01 07:27:01 -04:00
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
npm i docsify-cli -g
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 初始化项目
|
|
|
|
|
|
|
|
|
|
如果想在项目的 `./docs` 目录里写文档，直接通过 `init` 初始化项目。
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
docsify init ./docs
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 开始写文档
|
|
|
|
|
|
|
|
|
|
初始化成功后，可以看到 `./docs` 目录下创建的几个文件
|
|
|
|
|
|
|
|
|
|
- `index.html` 入口文件
|
|
|
|
|
- `README.md` 会做为主页内容渲染
|
2020-07-05 00:51:07 -04:00
|
|
|
- `.nojekyll` 用于阻止 GitHub Pages 忽略掉下划线开头的文件
|
2018-07-01 07:27:01 -04:00
|
|
|
|
2020-07-05 00:51:07 -04:00
|
|
|
直接编辑 `docs/README.md` 就能更新文档内容，当然也可以[添加更多页面](zh-cn/more-pages.md)。
|
2018-07-01 07:27:01 -04:00
|
|
|
|
2020-07-05 00:51:07 -04:00
|
|
|
## 本地预览
|
2018-07-01 07:27:01 -04:00
|
|
|
|
2020-07-05 00:51:07 -04:00
|
|
|
通过运行 `docsify serve` 启动一个本地服务器，可以方便地实时预览效果。默认访问地址 http://localhost:3000 。
|
2018-07-01 07:27:01 -04:00
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
docsify serve docs
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
?> 更多命令行工具用法，参考 [docsify-cli 文档](https://github.com/docsifyjs/docsify-cli)。
|
|
|
|
|
|
|
|
|
|
## 手动初始化
|
|
|
|
|
|
2020-07-05 00:51:07 -04:00
|
|
|
如果不喜欢 npm 或者觉得安装工具太麻烦，我们可以直接手动创建一个 `index.html` 文件。
|
2018-07-01 07:27:01 -04:00
|
|
|
|
|
|
|
|
*index.html*
|
|
|
|
|
|
|
|
|
|
```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">
|
2020-04-26 01:54:44 -04:00
|
|
|
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">
|
2018-07-01 07:27:01 -04:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="app"></div>
|
|
|
|
|
<script>
|
|
|
|
|
window.$docsify = {
|
|
|
|
|
//...
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2020-04-26 01:54:44 -04:00
|
|
|
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
|
2018-07-01 07:27:01 -04:00
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
```
|
|
|
|
|
|
2020-07-05 00:51:07 -04:00
|
|
|
如果你的系统里安装了 Python 的话，也可以很容易地启动一个静态服务器去预览你的网站。
|
2018-07-01 07:27:01 -04:00
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
cd docs && python -m SimpleHTTPServer 3000
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## Loading 提示
|
|
|
|
|
|
|
|
|
|
初始化时会显示 `Loading...` 内容，你可以自定义提示信息。
|
|
|
|
|
|
2020-04-26 01:54:44 -04:00
|
|
|
|
2018-07-01 07:27:01 -04:00
|
|
|
```html
|
2020-04-26 01:54:44 -04:00
|
|
|
<!-- index.html -->
|
|
|
|
|
|
2018-07-01 07:27:01 -04:00
|
|
|
<div id="app">加载中</div>
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
如果更改了 `el` 的配置，需要将该元素加上 `data-app` 属性。
|
|
|
|
|
|
|
|
|
|
```html
|
2020-04-26 01:54:44 -04:00
|
|
|
<!-- index.html -->
|
2018-07-01 07:27:01 -04:00
|
|
|
<div data-app id="main">加载中</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
window.$docsify = {
|
|
|
|
|
el: '#main'
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
```
|
2020-04-26 01:54:44 -04:00
|
|
|
|
2020-11-02 08:07:17 -05:00
|
|
|
对比 [el 设置](zh-cn/configuration.md#el)。
|
