模板引擎

QMUI 提供了轻量实用的模板引擎，除了支持基础的 include 功能以外，还支持条件判断以及变量传递，即在调用 include 方法时可以传递任意自定义的变量，在被 include 的模板中可以获取这些变量对应的值，并利用这些值来进行条件判断，支持 Number，Boolean, String，Object 几种变量类型。另外，不希望被编译输出的文件（例如被 include 的文件通常不希望被编译输出），使用 _ 作为文件名开头即可，例如：

  1. <!-- _header.html -->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.   <meta charset="UTF-8" />
  6.   <title>&&title</title>
  7.   <link rel="stylesheet" type="text/css" href="../public/style/css/main.css" />
  8.   <meta name="description" content="&&meta.description" />
  9.   <meta name="keywords" content="&&meta.keywork" />
  10. </head>
  11. <body class="frame_wrap">
  12.   <div class="frame_head">
  13.     &&if ( typeof index !== 'undefined') {
  14.     <h1 class="frame_head_title">
  15.       <a class="frame_head_title_link" href="./start.html">QMUI Web</a>
  16.     </h1>
  17.     }
  18.     &&if ( typeof index === 'undefined') {
  19.     <div class="frame_head_title">
  20.       <a class="frame_head_title_link" href="./start.html">QMUI Web</a>
  21.     </div>
  22.     }
  23.   </div>
  1. <!-- start.html -->
  2. &&include('./_header.html', {
  3.   "index" : true,
  4.   "title": "QMUI Web",
  5.   "meta": {
  6.     "keywork": "QMUI Web,QMUI,UI 开发,QMUI Web 官网,前端工作流,UI 开发框架",
  7.     "description": "一个旨在提高 UI 开发效率，快速产生项目 UI 的前端框架"
  8.   }
  9. })
  10.   <div class="frame_cnt">正文内容</div>
  11.   <div>页脚</div>
  12. </body>
  13. </html>
<!-- start.html（输出结果） -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>QMUI Web</title>
  <link rel="stylesheet" type="text/css" href="../public/style/css/main.css" />
  <meta name="description" content="一个旨在提高 UI 开发效率，快速产生项目 UI 的前端框架" />
  <meta name="keywords" content="QMUI Web,QMUI,UI 开发,QMUI Web 官网,前端工作流,UI 开发框架" />
</head>
<body class="frame_wrap">
  <div class="frame_head">
    <h1 class="frame_head_title">
      <a class="frame_head_title_link" href="./start.html">QMUI Web</a>
    </h1>
  </div>
  <div class="frame_cnt">正文内容</div>
  <div>页脚</div>
</body>
</html>

这个例子中，_header.html 作为一个公共模块，被 start.html include，然后再由 Gulp 处理生成最终的页面。这里为了避免 gulp 起效，使用了"&&"代替"@@"，实际上 QMUI 中使用的 include 引擎的默认前缀为 @@，即所有的方法和变量都以 @@ 开头。这个前缀以及是否开启 include 引擎都可以在 qmui.config.js 中配置。

另外值得注意的是，如果一个变量在某些模板中需要省略不写（例如一个布尔值，默认设定为 false，大部分的页面按需求都是 false 因此都不写），那么在使用这个变量进行条件判断时，需要先用 javascript 的 typeof 方法判断变量是否 undefined 再进行其他判断，否则 Gulp 会报 warning。