site-flamedeprecated

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

Usage no npm install needed!

<script type="module">
  import siteFlame from 'https://cdn.skypack.dev/site-flame';
</script>

README

site-flame已改名为flammae! 将停止更新此npm包，请更换成flammae

site-flame

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

注意

site-flame 还在开发阶段，可能存在bug，发现bug请及时反馈，多谢！

issues: https://github.com/LiZ2z/flammae/issues

安装

npm install site-flame

在package.json中添加

 "scripts": {
    "start": "node node_modules/site-flame/scripts/start -dev",
    "build": "node node_modules/site-flame/scripts/start -build"
  }

项目目录

项目目录一般为：

|-node_modules
|-src
|-package.json
|-flame.config.js

src目录下又包括（这些文件夹将被flame解析，其他命名文件夹不会被解析）：

|-templates     用于存放 .jsx 文件
|-docs          用于存放 .md  文件
|-pages         用于存放 .jsx 文件
|-styles        用于存放 .css 文件

1. templates

templates用于存放模板文件，目前可选的有index.js和content.js。

index.js将会作为网站的首页，可通过#/index访问到。

content.js将被用作每个.md文件的渲染模板。 例如：

import React, { Component } from 'react';
import {
   siteData
} from 'site-flame'

class Content extends Component {
    render() {
        return (
            <div>
                {/* 其他的一些代码 */}
                {this.props.renderMarkdown()}
                {/* 其他的一些代码 */}
            </div>
        );
    }
}

export default Content;

2. pages和docs

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

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

---
path: '/router'
title: 'My first flame page'
---

这样，我们就可以在上面说到的templates\content.js中通过this.props.data来访问这些信息。

对于.jsx文件，需要在头部使用行级注释（//）的方式书写信息：

// path: '/router'
// title: 'My first flame page'

同样，这些信息可以在this.props.data中访问到。

注意： path是必须的，path声明的值将作为访问这个页面的路由地址，如果没有path，该文件将不被显示。

在flame的项目中你可以通过import {siteData} from 'site-flame'的方式访问到全部文件的头部数据

3. styles

styles下只能用来存放样式文件（.css、.less或.scss），否则会导致错误。这些文件将会作为全局的样式文件，放在项目的入口处。对于.less或.scss之类的文件，需要在root\flame.config.js中添加配置，并安装相应的loader。

flame.config.js的配置

待续。。。

markdown 编写规范

为markdown引入样式

::: style
\`\`\` javascript
require('./style.css')
\`\`\`
:::

代码演示

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

:::
\`\`\` jsx
class Demo extends Component {
    ...code here
}
\`\`\`
:::

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

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

代码的编写规则由相应的插件规定。

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

::: only

这里是代码的一些说明
here is some note for code

\`\`\` jsx
class Demo extends Component {
    ...code here
}
\`\`\`
:::

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

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

flame目前有一个自带指令：style，通过该指令，你就可以为每个.md文件编写样式。

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

jsx解析插件的规则

一般规则

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

import {Component} from 'react'
import {Button} from 'ui'
class Demo extends Component {
    handleClick() {
        console.log('clicked')
    }
    render() {
        return (
            <div>
                <Button onClick={this.handleClick.bind(this)}>click</Button>
                <Button>click</Button>
            </div>
        );
    }
}
  1. class 的名称必须为 Demo。如果写成函数式的组件，那么函数名也必须为 Demo。

指令

待续。。。

TODO:

  • 完善可配置项
  • 自动化监听文件部分功能代码优化

CONCEPT

  • 将site-flame改成webpack的插件
  • 提取loader跟模板，要求每个loader自带一套模板