vdocs

v0.0.1

Published

4 years ago

文档模板

0High
0Medium
0Low

yeyiyi119

新版文档使用说明

依赖安装

安装nvm
```
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash
```
安装完成后使用 nvm -h命令，如果可以正确运行，表示安装成功
安装nodejs
```
nvm install v10.14.2
```
安装完成后使用node -v命令，如果显示v10.14.2，表示安装成功
安装yarn
```
npm i -g [email protected]
```
安装完成后使用yarn -v命令，如果显示1.22.0，表示安装成功
安装依赖包
```
yarn install
```
启动本地服务
```
yarn dev
```
打开浏览器，输入http://localhost:4000 即可以看到本地预览
构建
```
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                    |

| 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 字母一致

public class HelloWorld { public static void main(String[] args) { System.out.println("Hello World!"); } } ```

列表**

有序

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

无序

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

有序

列表项
列表项
列表项

无序

列表项
列表项
列表项

水平线

------

链接

页内链接

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

复杂表格

跨页链接

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

指引

图片

需要添加的图片放到自定义目录下，然后使用相对引用的方式引入。例如当前md文件在develop/foo.md，而图片文件在 develop/img/bar.png，那么引入的方式为：

![bar](./bar.png)

bar

按钮容器

::: 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

除了文章首部标题外，尽量不要使用h1标题，使用h2、h3标题

4. FAQ

待添加

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme