# 新版文档使用说明
**依赖安装**
1. 安装nvm
```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash
```
安装完成后使用 `nvm -h`命令，如果可以正确运行，表示安装成功
2. 安装nodejs
```bash
nvm install v10.14.2
```
安装完成后使用`node -v`命令，如果显示`v10.14.2`，表示安装成功
3. 安装yarn
```bash
npm i -g yarn@1.22.0
```
安装完成后使用`yarn -v`命令，如果显示`1.22.0`，表示安装成功
4. 安装依赖包
```bash
yarn install
```
5. 启动本地服务
```bash
yarn dev
```
打开浏览器，输入http://localhost:4000 即可以看到本地预览
6. 构建
```bash
yarn buid
```
构建好的目录位于`docs/.vuepress/dist/`目录中
## 1. 目录结构
如何设置边栏
在`sr-docs/docs/.vuepress/config.js`中找到如下内容
```javascript
themeConfig: {
logo: "/logo.png",
repo: "",
editLinks: false,
docsDir: "",
editLinkText: "",
lastUpdated: false,
nav: [],
sidebar: [{ // 表示一个group，里面
title: '总览', // 标题
collapsable: false, // 是否可折叠，可选的, 默认值是 true,
sidebarDepth: 1, // 边栏的嵌套深度，可选的, 默认值是 1
children: [ // 表示其中间/叶子节点
'/common/' // 这个会默认找到/common目录下的README.md/index.md文件
]
}, {
title: 'API接入',
collapsable: true,
sidebarDepth: 1,
children: [
'/backend/',
]
}, {
title: '小程序SDK接入',
collapsable: true,
sidebarDepth: 1,
children: [
'/mini-program-sdk/', // 默认标题为文章中第一个标题
['/mini-program-sdk/sdk-guide', 'SDK指导'], // 这种设置方式可以定制左侧的标题
]
}]
},
```
**如何新增内容**
比如说我想在`mini-program-sdk`下新增一个文章，那么新建一个名称为`sdk-guide.md`的文件，然后编写内容，编写完成后，在`themeConfig`对应的值中的title为`小程序SDK接入`中的children中增加一项，如上面所示，即可。
**如何编辑首页**
找到`src-docs/docs/README.md`文件，会看到
```markdown
---
home: false
actionLink: /common/
---
```
其中三横线中的内容不要动，可以在后面添加内容。
## 2. 基本语法
**标题**
```markdown
# 一级标题
## 二级标题
### 三级标题
```
# 一级标题
## 二级标题
### 三级标题
**正文**
```markdown
斗草阶前初见，穿针楼上曾逢。罗裙香露玉钗风。靓妆眉沁绿，羞脸粉生红。
流水便随春远，行云终与谁同。酒醒长恨锦屏空。相寻梦里路，飞雨落花中。
```
斗草阶前初见，穿针楼上曾逢。罗裙香露玉钗风。靓妆眉沁绿，羞脸粉生红。
流水便随春远，行云终与谁同。酒醒长恨锦屏空。相寻梦里路，飞雨落花中。
**引用**
```markdown
> 蕙花香也。雪晴池馆如画。春风飞到，宝钗楼上，一片笙箫，琉璃光射。而今灯漫挂。不是暗尘明月，那时元夜。况年来、> 心懒意怯，羞与蛾儿争耍。
> 江城人悄初更打。问繁华谁解，再向天公借。剔残红灺。但梦里隐隐，钿车罗帕。吴笺银粉砑。待把旧家风景，写成闲话。> 笑绿鬟邻女，倚窗犹唱，夕阳西下。
```
> 蕙花香也。雪晴池馆如画。春风飞到，宝钗楼上，一片笙箫，琉璃光射。而今灯漫挂。不是暗尘明月，那时元夜。况年来、 心懒意怯，羞与蛾儿争耍。
> 江城人悄初更打。问繁华谁解，再向天公借。剔残红灺。但梦里隐隐，钿车罗帕。吴笺银粉砑。待把旧家风景，写成闲话。 笑绿鬟邻女，倚窗犹唱，夕阳西下。
**表格**
```markdown
| page | string | 行为发生的小程序页面路径 |
| -------------- | -------- | --------------------------------------------- |
| page_title | string | 行为发生的小程序页面标题 例商品详情、商城首页 |
| sr_sdk_version | string | sdk版本号 例1.1.6 |
| time 必填 | datetime | 行为发生时间 例1560409473714 |
```
| page | string | 行为发生的小程序页面路径 |
| -------------- | -------- | --------------------------------------------- |
| page_title | string | 行为发生的小程序页面标题 例商品详情、商城首页 |
| sr_sdk_version | string | sdk版本号 例1.1.6 |
| time 必填 | datetime | 行为发生时间 例1560409473714 |
**复杂表格**
```vue
```
在`sr-docs/docs/.vuepress/components/table-data.js`中，按照demoData格式添加一个新的表格数据。
```javascript
const demoData = { // 设置表格，children表示嵌套，可以使用多层嵌套
columns: [
{ dataIndex: "name", title: "名字" },
{ dataIndex: "age", title: "年龄" }
],
data: [
{
key: 1,
name: "yonglusun",
age: 28,
children: [{ key: 1001, name: "child", age: 2 }]
}
]
};
module.exports = {
demo: demoData, //将数据按照key: value导出，前面的key是demo，即在上面的代码中设置属性name为demo
}
```
暂无预览
**提示**
```markdown
::: tips
只有在调用 startReport() 后才会真正开始上报数据
:::
```
暂无预览
**代码**
```markdown
```javascript
let app = getApp()
app.sr.track('add_to_cart', {
sku_id: 'product_111',
sku_name: '苹果',
})
```
```
```javascript
let app = getApp()
app.sr.track('add_to_cart', {
sku_id: 'product_111',
sku_name: '苹果',
})
```
代码tabs
```markdown
```javascript
function getIntoAnArgument() {
var args = arguments.slice();
args.forEach(function(arg) {
console.log(arg);
});
}
```
```java
/* HelloWorld.java
*/
public class HelloWorld
{
public static void main(String[] args) {
System.out.println("Hello World!");
}
}
```
```
上面表示可以使用java，javascript两种tab，默认显示第一个java，注意要保证列表里的['java', 'javascript']和```java 字母一致
```javascript
function getIntoAnArgument() {
var args = arguments.slice();
args.forEach(function(arg) {
console.log(arg);
});
}
```
```java
/* HelloWorld.java
*/
public class HelloWorld
{
public static void main(String[] args) {
System.out.println("Hello World!");
}
}
```
列表**
```markdown
有序
1. 列表项
2. 列表项
3. 列表项
无序
* 列表项
* 列表项
* 列表项
```
有序
1. 列表项
2. 列表项
3. 列表项
无序
* 列表项
* 列表项
* 列表项
**水平线**
```markdown
------
```
------
**链接**
**页内链接**
```markdown
[复杂表格](./#复杂表格)
```
[复杂表格](./#复杂表格)
**跨页链接**
```markdown
[指引](../guide/using-vue.md) // 相对文件地址
```
[指引](../guide/using-vue.md)
## 图片
> 需要添加的图片放到自定义目录下，然后使用相对引用的方式引入。例如当前md文件在`develop/foo.md`，而图片文件在
> `develop/img/bar.png`，那么引入的方式为：
```
```
## 按钮容器
```code
::: button color
[abc](/develop/dev_account/dev_module/)
:::
```
button 表示为按钮容器
color 表示按钮的背景色，可以使用 blue/red, #18b6ff, rgb(3, 3, 3)等格式
内容部分为具体的链接
## 3. 排版建议
> 建议参考微信开发文档
>
> https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/scene.html
1. 除了文章首部标题外，尽量不要使用h1标题，使用h2、h3标题
## 4. FAQ
待添加