简介

书写静态页面时候,我们常常会需要循环类似的HTML结构,以及一个项目中公用的页面片段, 模板引擎部分主要就是为了解决这种HTML等资源的代码公用问题而产生的。

f2e-server使用 underscore.template, 作为默认的模板引擎, 因为它足够简单。

默认的: <%%> 中间的部分是服务端执行的代码, <%=%>是将服务端对象的toString()拼接到响应中, <%-%>HTML-escape

例如:

<ul>
    <% var t=0, arr = ["使用入门","WEB服务器","模板引擎","中间件","项目输出","代理","其他"]; 
    for(; t<arr.length; t++){%>
    <li><%=arr[t]%></li>
    <%}%>
</ul>

服务端输出结果为:

<ul>
    <li>使用入门</li>
    <li>WEB服务器</li>
    <li>模板引擎</li>
    <li>中间件</li>
    <li>项目输出</li>
    <li>代理</li>
    <li>其他</li>
</ul>

当然你可以书写更复杂的循环结构,然而只需要修改元数据就能批量生产,从而避免了大量重复冗余的HTML代码 (最重要的:你可以使用项目输出功能将书写的源码输出成为普通的HTML文件, 而且css,js等所有文本类型资源均被支持)

模板引用和包含

如果说: 上述的模板引擎是为了在一个页面内部快速公共化代码, 引用和包含则方便了整个项目组织代码片段:
如下图所示代码片段:

  • include是为了获取一个公共代码片段拿来拼接使用, 例如你的很多页面都使用到了 header.html 中的片段
  • 另外,如果你的项目中很多页面都具有相同的头和尾, 也就是说所有页面的基本框架是一样的, belong则可以引入一个公共的模板页面,把目前文件的html代码放在模板中生成一个完整的页面
  • 关于模板引用和包含,可以参见 f2e-server.com 源码实例: https://github.com/shy2850/node-server/tree/gh-pages

page.html

$belong[layout.html]
<ul>
    <% var t=0, arr = ["使用入门","WEB服务器","模板引擎","中间件","项目输出","代理","其他"]; 
    for(; t<arr.length; t++){%>
    <li><%=arr[t]%></li>
    <%}%>
</ul>

layout.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    $include[header.html]
    $[placeholder]
</body>
</html>

header.html

<h2 style="text-align:center">我是header</h2>

通过f2e-server服务器访问page.html时, 生成的结果代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h2 style="text-align:center">我是header</h2>

<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
    <li>列表5</li>
    <li>列表6</li>
</ul>
</body>
</html>

你还可以修改conf.js 中相关配置,支持不同的关键字替换内容 (扩展功能, 可不做了解)

include和belong字段可以配置正则字符串或者正则对象, 其中的第一组分组获得的结果即为索引文件名

exports[localhost] = {
    include: "\\$include\\[[\"\\s]*([^\"\\s]+)[\"\\s]*\\]",
    placeholder: "$[placeholder]",
    belong: "\\$belong\\[[\"\\s]*([^\"\\s]+)[\"\\s]*\\]"
};

服务端内置对象 (扩展功能, 可不做了解)

  • request: 包转完成的当前请求
    • request.data: GET请求参数包装, 如 request.data.type 表示GET请求参数type的值
    • request.post: POST请求参数包装, 获取方式同GET, 注:GET请求时, request.post === null
    • request.util:
      • request.util.mime: f2e-server扩展mime模块
      • request.util.conf: 当前服务配置
      • request.util.staticServer: 预留staticconf配置的url
    • request.$:
      • request.$.title: 当前请求路径 pathname
      • request.$.host: 当前host
      • request.$.fileList: 文件夹列表存储
  • response: 原生的响应对象
  • require: nodejs 全局require
  • _: underscore源对象

你可以基于这个快速构建一个jsonp支持页面 jsonp.js

<%=(request.data.callback||"callback")%>({
    serverTime: <%=+new Date%>,
    clientTime: +new Date,
    data:{
        /*any others*/
    }
});

也可以阅读默认的文件夹列表展示 nodeLib/html/folder.html 有关样例, 了解fileList用法

自定义引擎 (扩展功能, 可不做了解)

支持通过配置 template 属性修改默认的模板引擎配置

以 artTemplate 为例. 配置前在 conf.js 同级目录 安装artTemplate npm install art-template

var artTemplate = require("art-template");
    artTemplate.config('base', 'E:\\');// 设置模板根目录,默认为引擎所在目录
    artTemplate.config('compress', true);// 压缩输出


exports.localhost = {
    root: "E:\\",
    "template": {
        // 配置需要进行模板渲染的匹配, 默认 html,js,css,json 等所有文本型都被渲染
        filter: /\.html$/, 
        get: function(source/*源字符串*/, file/*源文件相对root路径*/, request, response){
            var path = file.replace(/^\/(.*?)\.\w+$/,'$1'),  // 去除 .html
                json, data = {};
            var render = artTemplate.compile(source, { // 根据模板字符串和文件路径(include需要)编译
                filename:path
            });
            try{
                // 同文件名的json文件作为data数据。
                json = require("fs").readFileSync( "E:\\" + path + ".json" ),
                data = JSON.parse(json);
            }catch(e){
                console.log( e );
            }
            //渲染返回结果
            return render( data );
        }
    }
};

以下是直接下载 artTemplate 中 demo 的渲染效果截图

artTemplate 官方demo