基于React的静态网页创建工具(markdown)

安装及使用

npm install flammae -g

flammae create project-name cd project-name flammae run dev

项目目录

项目目录一般为：

|-.theme|-docs|-flammae.config.js

docs

docs目录下的每个文件都会作为一个单独的页面进行处理，且都可以在文件的头部做信息的声明。

对于.md文件，需要在头部使用类似yaml语言的方式书写信息：

---title: \'My first flammae page\'

.md 文件编写规范

为markdown引入样式

在markdown文件中这样写：

::: style``` javascriptrequire(\'./style.css\')

代码演示

如果代码想要被演示（根据markdown中的代码块动态渲染内容，目前仅支持jsx），需要用:::将代码块包起来， 并在代码标识符（```）后加lang字符串 ，例如，我们想演示一个`React`组件，要像下面这样写：

:::``` jsxclass Demo extends Component { ...code here

这样，当加载到这个markdown文件时，解析器就会知道该代码片段需要展示出来，且需要使用能解析jsx语法的编译器（即flame的代码插件，flame默认提供针对jsx的解析插件）来处理这段代码。

注意，必须指定代码块的语言（上方的jsx），不然flame不知道用什么编译器来处理该段代码。

代码演示的指令

此外我们还可以在:::符号后面加入一些指令或说明，就像下面这样

::: only这里是代码的一些说明here is some note for code``` jsxclass Demo extends Component { ...code here

:::内部的内容（不包括代码块）将被当作对代码的说明传给插件。

:::后面的字符将被当作指令传递给插件，具体的指令由不同的插件规定。

如上所示，当我们使用了only指令，该段代码将只会被执行演示，而不会作为html渲染出来。

还可以通过flammae自带指令：style，为每个.md文件编写样式。

::: style``` (可不用指定语言) require(\'./style.css\')

jsx解析插件的规则

class 的名称必须为 Demo。如果写成函数式的组件，那么函数名也必须为 Demo。

假如我们有如下需要演示的代码（当然，要使用:::包裹住。）：

import {Component} from \'react\'import {Button} from \'ui\'// must be Democlass Demo extends Component { handleClick() { console.log(\'clicked\') render() { return ( div  Button onClick={this.handleClick.bind(this)} click /Button  Button click /Button  /div }

flammae.config.js的配置

待续。。。

TODO:完善可配置项