基于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:完善可配置项
本文链接: http://flamma.immuno-online.com/view-721979.html