最近一直想参照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页面。