新版文档使用说明

依赖安装

1. 安装nvm

   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash
   

   安装完成后使用 nvm -h命令，如果可以正确运行，表示安装成功

2. 安装nodejs

   nvm install v10.14.2
   

   安装完成后使用node -v命令，如果显示v10.14.2，表示安装成功

3. 安装yarn

   npm i -g yarn@1.22.0
   

   安装完成后使用yarn -v命令，如果显示1.22.0，表示安装成功

4. 安装依赖包

   yarn install
   

5. 启动本地服务

   yarn dev
   

   打开浏览器，输入http://localhost:4000 即可以看到本地预览

6. 构建

   yarn buid
   

   构建好的目录位于docs/.vuepress/dist/目录中

1. 目录结构

如何设置边栏

在sr-docs/docs/.vuepress/config.js中找到如下内容

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文件，会看到

---
home: false 
actionLink: /common/
---

其中三横线中的内容不要动，可以在后面添加内容。

2. 基本语法

标题

# 一级标题
## 二级标题
### 三级标题

一级标题

二级标题

三级标题

正文

斗草阶前初见，穿针楼上曾逢。罗裙香露玉钗风。靓妆眉沁绿，羞脸粉生红。
流水便随春远，行云终与谁同。酒醒长恨锦屏空。相寻梦里路，飞雨落花中。

斗草阶前初见，穿针楼上曾逢。罗裙香露玉钗风。靓妆眉沁绿，羞脸粉生红。 流水便随春远，行云终与谁同。酒醒长恨锦屏空。相寻梦里路，飞雨落花中。

引用

> 蕙花香也。雪晴池馆如画。春风飞到，宝钗楼上，一片笙箫，琉璃光射。而今灯漫挂。不是暗尘明月，那时元夜。况年来、> 心懒意怯，羞与蛾儿争耍。
> 江城人悄初更打。问繁华谁解，再向天公借。剔残红灺。但梦里隐隐，钿车罗帕。吴笺银粉砑。待把旧家风景，写成闲话。> 笑绿鬟邻女，倚窗犹唱，夕阳西下。

蕙花香也。雪晴池馆如画。春风飞到，宝钗楼上，一片笙箫，琉璃光射。而今灯漫挂。不是暗尘明月，那时元夜。况年来、 心懒意怯，羞与蛾儿争耍。 江城人悄初更打。问繁华谁解，再向天公借。剔残红灺。但梦里隐隐，钿车罗帕。吴笺银粉砑。待把旧家风景，写成闲话。 笑绿鬟邻女，倚窗犹唱，夕阳西下。

表格

| page           | string   | 行为发生的小程序页面路径                          |
| -------------- | -------- | --------------------------------------------- |
| page_title     | string   | 行为发生的小程序页面标题 例商品详情、商城首页        |
| sr_sdk_version | string   | sdk版本号 例1.1.6                              |
| time 必填       | datetime | 行为发生时间 例1560409473714                    |

复杂表格

<youshu-table name="demo" />

在sr-docs/docs/.vuepress/components/table-data.js中，按照demoData格式添加一个新的表格数据。

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
}

暂无预览

提示

::: tips
只有在调用 startReport() 后才会真正开始上报数据
:::

暂无预览

代码

​```javascript
let app = getApp()
app.sr.track('add_to_cart', {
    sku_id: 'product_111',
    sku_name: '苹果',
})
​```

let app = getApp()
app.sr.track('add_to_cart', {
    sku_id: 'product_111',
    sku_name: '苹果',
})

代码tabs

<ys-code-tabs :codes="['java', 'javascript']">
​```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!");
    }
}
​```
</ys-code-tabs>

上面表示可以使用java，javascript两种tab，默认显示第一个java，注意要保证列表里的['java', 'javascript']和```java 字母一致

有序

1. 列表项
2. 列表项
3. 列表项

无序

* 列表项
* 列表项
* 列表项

------

[复杂表格](./#复杂表格) 

[指引](../guide/using-vue.md) // 相对文件地址

![bar](./bar.png)

::: button color
[abc](/develop/dev_account/dev_module/)
:::