template-composer

use multi templates in one page.

Usage no npm install needed!

<script type="module">
  import templateComposer from 'https://cdn.skypack.dev/template-composer';
</script>

README

template-composer

用于方便基于空白模板页面进行开发的express中间件.

安装

npm install template-composer --save

功能

默认支持react-engine模板引擎，可以配置以支持其它模板。

它会代理res.render()函数，对其处理后的view代码与空白模板合成，最终返回合成后的页面代码，将包含美团官网的页头、页脚及其它一些基本页面功能，而我们只需要专注完成页面的正文部分即可。

请求的时候url后添加?__debug__=1可以临时禁用

                  Middleware                    Controller                                          
                                                                                                    
                      +                             +                                               
                      |                             |                                               
request               |                             |                                               
+---------------------------------------------------------+                                         
                      |                             |     |                                         
                      |                             |     v                                         
                      |                             |                                               
                +-----+------+                      |   res.render('partial_view',data);            
                |            |                      |     +                                         
response        |            |                      |     |                                         
 <--------------+  wrapTpl() | <--------------------------+                                         
                |            |                      |                                               
                |            |                      |                                               
                +-----+------+                      |                                               
                      |                             |                                               
                      |                             |

默认的layout模板（内置）

<!DOCTYPE html>
<html ${htmlAttrs}>
<head>
        ${pageData.head}
        ${headContent}
</head>
<body ${bodyAttrs} ${pageData.bodyAttrs}>
        ${pageData.body1}

        ${mainContent}

        ${pageData.body2}

        ${footContent}
</body>
</html>

内层view模板示例

var React = require('react');

module.exports = React.createClass({

  render: function render() {

    // 这里必须 使用<html><body>标签，否则
    // ReactEngine会无法判断view是由server端生成还是client端生成，
    // 执行时会报错
    return (
      <html>
      <head>
        {/* <head>中的代码会放到最终页面的</head>标签前 */}
        <link href="test.css" rel="stylesheet" type="text/css" />
        {/* 会把empty页面模板中的title去掉，用这个替换 */}
        <title> Test Page </title>
      </head>
      <body>
          {this.props.children}
      </body>

        {/* 需要放到页面代码底部的脚本 */}
        <script src='/bundle.js'></script>

      </html>
    );
  }
});

用法

var app = express();

// 默认使用react-engine引擎，也可以设置`viewParser`和`template`以适用其它引擎
var templateComposer = require('template-composer')({
    // options are optional
    url: <template url>,
    viewParser: <function>,
    template: <string>
});

// 在需要的route前加入中间件调用即可
app.get('/', templateComposer, function(req, res) {

  // Use react-engine
  res.render('index.jsx', {
    title: 'React Engine Express Sample App',
    name: 'Jordan'
  });
});

调试

如果想临时禁用功能，可以在页面请求上添加查询参数?__debug__=1。

Contribute

npm install
npm test