ant-design的文档系统生成工具BiSheng

最近一直想参照ant-design给react-inputPassword组件写demo，查看ant-design的编译配置，终于找到了它的文档系统生成工具-Bisheng，git地址https://github.com/benjycui/bisheng。

一、介绍

bisheng 是一个把 Markdown 转为 React 单页网站的工具，可以支持简单的 个人博客，通过插件扩展后可支持更加 复杂的网站。

现有的插件有：

• bisheng-plugin-description 用于把 Markdown 的描述部分提取出来。
• bisheng-plugin-toc 可以自动生成文章的 TOC(Table of Content)。
• bisheng-plugin-react 在 Markdown 中写 React 代码，会被转为 React Element .

也可以自行 开发插件。文档不是很全，所以可能需要阅读下 已有的 theme 和插件才能完全搞懂 bisheng 怎么用。。

二、使用

1、安装

npm install --save-dev bisheng
npm install --save bisheng-theme-one

2、在package.json中添加site命令

"scripts": {
    "site": "bisheng start --config ./site/bisheng.config.js"
  },

3、在项目目录下创建如下文件./site/bisheng.config.js

const path = require('path');

module.exports = {
	port: 8000, //服务启动的端口号
	source: './site/posts', //引入的md文件路径
	htmlTemplate: path.resolve(__dirname, './template/template.html'),//页面模板
	exclude: /should-be-ignore/,
	theme: 'bisheng-theme-one',
	themeConfig: {
		home: '/',
		sitename: '目录结构名',
		tagline: 'The one theme for bisheng',
		// navigation: [{
		//   title: 'BiSheng',
		//   link: 'https://github.com/benjycui/bisheng',
		// }],
		// footer: 'Copyright and so on...',
		// hideBisheng: true,
		github: 'https://github.com/benjycui/bisheng',
	},
	root: '/bisheng/',
};

参数说明：

• port：服务启动的端口号
• sourece：找到这个source下的所有的markdown文件并返回一个数组（数组中返回的都是markdown文件的路径 ），把路径形成了树形结构
• htmlTemplate：页面模板，如果没有写该参数，默认为bisheng/lib/template.html文件

完成以上配置后，运动npm run site，会自动寻找./site/posts/目录下的所有.md文件，在local:8000中打开html页面。