Skip to content
zeus组件库的文档
JavaScript CSS Shell
Branch: master
Clone or download
qiaoming
qiaoming 自动化部署
Latest commit 6c0b58b Aug 8, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
components
pages
server
shell 修改自动化部署 Aug 3, 2018
static 组件库文档 Aug 3, 2018
styles
.gitignore
README.md
next.config.js get start 修改 Aug 3, 2018
package.json 添加进度条 Aug 3, 2018
yarn.lock

README.md

组件库文档�

如果是想看组件库的代码的话那么请点击这里

如果是想要�了解这个组件库的文档的话,那么请继续往下看,本文会很耐心的�告诉你这个组件库的相关

组件库代码构成

组件库内容包括两部分

  1. home页面
  2. docs页面

从网站的页面里也可以很直观的看到,代码和�网站的�页面构成是一样的,在pages下边有两个文件夹docs和home。

home 页面其实就是这个网站的主页
docs 页面是这个网站的文档内容,其中route.jsx是在配置文档侧面导航的路由,index.jsx 是网站的layout,为了让每一个文档引入这个layout,文档中通过 zeus-md-next-loader 赋予了articles和docs下的每一个页面引入的能力

module.exports = source => {
    const Component = source.match(/export default class ([\w]+)/)[1]
    source = `
import Layout from '../index.jsx'
${source.replace(/export default /, '')}
export default Layout(${Component})
    `
    return source
}

文档

其中docs里存放的components就是组件文档,而articles里存放的是一些介绍的文章

这两个文件夹下边会有两种特殊的文件格式mdsx,这个文件本质上是一种markdown,但是经过特殊的编译之后,可以识别一些特殊的语法,比如

+++ => content block  
--- => markdwon meta

如果想要为新添加的组件添加一篇文档的话

  1. 在components里添加一个component-name.mdsx文件。
  2. 那么这时你访问/docs/components/component-name就会看到这个页面
  3. /docs/routes里为这个组件在siderbar里添加一个位置,然后他就会出现在侧边栏里

文档的构成

文档构成很简单,如果没有任何内容块的话,比如article�里内容就是一个很直接的markdown,�那么�就忽略任何规则写markdown就好了

如果想要写一个组件的文档,需要注意以下

  1. markdwon meta 写在markdown的最上边,比如
  2. 用+++开头+++结尾可以表达一个内容块,内容块的类型可以用 --- typename --- 表示,目前会对demo和icon块做特殊处理,其他不处理
You can’t perform that action at this time.