qdoc
依赖于fekit
安装
npm install fekit-extension-qdoc -g
使用流程
- 在需要项目使用目录下执行 fekit qdoc init 命令,将在该下生成一个docfile.config文件
- 安装demo配置docfile.config文件
- 使用fekit qdoc build生成文档站
命令
init命令
fekit qdoc init -r|s|j|m
- 描述: 在当前目录下生成一个有demo的 docfile.config 文件
- 参数说明: -r react项目使用 -s scss项目使用 -j js项目使用 -m 下载模板文件到项目根下template文件夹下
build命令
fekit qdoc build
私有命令 kami yo react
Kami命令 专门为Kami项目创建文档站使用，具体使用如下：
进入到 kamiall/src/kami/scripts 目录下执行 [sudo] fekit qdoc kami
Yo命令 专门为Yo项目创建文档站使用，具体使用如下：
进入到 Yo 根目录下执行 [sudo] fekit qdoc yo
React命令 专门为React-Native项目创建文档站使用，具体使用如下：
进入到 React-Native 根目录下执行 [sudo] fekit qdoc react
docfile.config 文件介绍，内容如下：
{
"destDir": "yo-docs", //生成的文档目录
"template_js": "./template/template_js.html", //js文件模板
"template_scss": "./template/template_scss.html", //scss文件模板
"template_static": "./template/template_static.html", //静态文件模板
"template_react": "./template/template_react.html", //react文件模板
"project": {
"title": "YO Document",
"footer": "Made By Qunar Hotel FE Mobile Team. © 2014 - 2016",
"version": "1.1.0",
"banner": {
"title": "Yo 简介",
"description": "Yo 是一款基于 Mobile First 理念而设计的 CSS Framework，当然，你使用在PC高级浏览器中也完全没有问题；其具备轻量，易用，快速且高度强大的自定义能力。"
},
"pages": [
{
"name": "index",
"title": "起步",
"type": "markdown",
"content": "./README.md"
},
{
"name": "changelog",
"title": "历史",
"type": "markdown",
"content": "./changelog.md"
},
{
"name": "api",
"title": "文档",
"type": "scss",
"content": "./lib/**/*.scss"
},
{
"name": "api",
"title": "文档",
"url": "http://ued.qunar.com/mobile/yo/demo/"
}
]
},
"version": "0.0.1"
}
CSS文件注释规则(具体参考Yo注释)
注释规范
/**
* @module 一级分类 module
* @class 二级分类
* @skip 是否解析改注释块,有此标签为不解析
* @method 方法名
* @description 描述信息
* @demo demo描述 demo地址（空格区分）
* @param {type} $name param描述 &版本支持 （空格区分，版本号为&区分）
* @param {Color} {type} $name param描述 &版本支持 #废除不推荐版本 （空格区分 版本号为&区分 废除不推荐版本为#区分）
* @private 改方法是否标示为私有
* @version 此method在yo的哪个版本以上支持
* @example example描述|example code （|区分）
*/
注释示例
/**
* @module ani
* @class fade
* @skip
* @method yo-checked
* @description 构造单选多选的自定义使用方法，可同时作用于 checkbox 与 radio
* @demo 使用方法，详见 http://doyoe.github.io/Yo/demo/element/yo-checked.html
* @param {String} $name 为新的扩展定义一个名称
* @param {String} $content 标记（对勾，圆点或者任意字符，可以是webfonts的编码）
* @param {Length} $size 元件大小 &1.1.0
* @param {Length} $font-size 标记大小 &1.1.0
* @param {Length} $border-width 边框厚度
* @param {Color} $bordercolor 边框色
* @param {Color} $bgcolor 背景色
* @param {Color} $color 标记色
* @param {Color} $on-bordercolor 选中时的边框色
* @param {Color} $on-bgcolor 选中时的背景色
* @param {Color} $on-color 选中时的标记色 &1.1.0+
* @param {Length} $radius 圆角半径长度
* @private
* @demo dfasdfas http://doyoe.github.io/Yo/demo/element/yo-checked.html
* @version 1.1.1
* @example 实例代码描述拓展yo-checked | @include .yo-checked(
* $name: default,
* $content: default,
* $size: default,
* $on-bgcolor: default)
*
*/
JS文件注释规则(具体参考kami项目注释)
注释规范
/**
* @category 一级分类 module
* @extends 二级分类
* @skip 是否解析改注释块,有此标签为不解析
* @class 类名
* @description 描述信息
* @property {type} name property描述
* @demo demo地址
* @param {type} $name param描述 &版本支持 （空格区分，版本号为&区分）
* @param {Color} {type} $name param描述 &版本支持 #废除不推荐版本 （空格区分 版本号为&区分 废除不推荐版本为#区分）
* @example example描述|example code （|区分）
*/
/**
* @property {type} name property描述
* @property {type} name property描述
* @memberOf 类名
*/
/**
* 事件描述
* @event 事件名
* @memberOf 类名
*/
/**
* 方法说明
* @function 方法名
* @memberOf 类名
* @private
* @example ****
*/
注释示例
/**
* @category primary
* @extends Widget
* @class Alert
* @description 描述信息
* @demo http://ued.qunar.com/mobile/kami/demos/src/html/alert/index.html
*/
/**
* @property {HTMLElement| String} container 组件的容器
* @property {String| HTMLElement} content 弹窗的内容
* @property {String} extraClass 会额外添加到组件根节点的样式
* @property {Boolean} align 组件的对齐方式，center、bottom、top，默认为center
* @property {Boolean} resizable 是否会根据窗口大小重新调整位置，默认为true
* @property {String| HTMLElement} okText 确定按钮的文案
* @memberOf Alert
*/
/**
* 处理组件数据
* @function init
* @memberOf Alert
* @private
*/
/**
* 按钮点击触发的事件
* @event ok
* @memberOf Alert
*/
TODO
- 把所有静态文件统一放到一个站点
- 模板以及配置文件可配