art-template

recol1

已于 2022-06-01 15:01:23 修改

阅读量132

点赞数

文章标签： html

于 2021-05-21 19:57:58 首次发布

本文链接：https://blog.csdn.net/weixin_42454057/article/details/117133178

版权

1、art-template

art-template 是一个简约、超快的模板引擎。
版本特性：支持 Express、Koa、Webpack，浏览器版本仅 6KB 大小，支持模板继承与子模板，支持在模板文件上打断点（Webpack Loader）

1.1、安装与配置art-template

// 安装
npm i -S art-template express-art-template
// 模板引擎配置
// 指定art-template模板，并指定模块后缀为.html
app.engine('html', require('express-art-template'));
// 指定模板视图路径
app.set('views', path.join(__dirname, 'views'));

const express = require('express')
const path = require('path')
const app = express()
app.listen(3000)

// 显示html页面
// 指定express中解析以哪一个扩展名的静态文件，用art-template来解析
app.engine('html', require('express-art-template'));
/* app.set('view options', {
  debug: process.env.NODE_ENV !== 'production'
}); */
// 指定模板的路径
app.set('views', path.join(__dirname, 'views'));
// 在指定模板名称时，可以忽略扩展名
// app.set('view engine', 'html');

// routes
app.get('/', function (req, res) {

  let title = '你好，我是一个标题!!!'
  let aTag = '<a href="###">a链接</a>'

  res.render('index.html', {
    title,
    aTag,
    age: 25,
    users: [
      { id: 1, name: '张三' },
      { id: 2, name: '李四' },
    ]
  });
});

### 输出
标准语法
{{ username }} // 有转义输出   未转义输出  {{@ username }}
原始语法
<%= username %> // 有转义输出  未转义输出  <%- username %>

#### 条件判断
{{if 条件}} … {{else if 条件}} … {{/if}}
<%if (条件){%> … <%}else if (条件){%> … <%}%>

#### 循环
// 支持 数组和对象的迭代  默认元素变量为$value 下标为$index  可以自定义 {{each target val key}}
{{each target}}
    {{$index}} {{$value}}
{{/each}}
<% for(var i = 0; i < target.length; i++){ %>
    <%= i %> <%= target[i] %>
<% } %>

#### 子模板 --- 模板包含
{{include './header.art'}}
<% include('./header.art') %>
注：在子模板中不要有html、head和body标签

html父页

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{block name="title"}}公共的{{/block}}</title>
  <link rel="stylesheet" href="a.css">
  {{block name="css"}}{{/block}}
</head>

<body>
  {{block name="main"}}{{/block}}
  <script src="./js/jquery.js?v=1"></script>
  {{block name="js"}}{{/block}}
</body>

</html>

html页的子页

<!-- 继承父模板 -->
{{ extend './public/layout.html' }}

<!-- 实现占位 -->
{{block name="title"}}
我是首页
{{/block}}

{{block name="css"}}
<style>
  h3 {
    color: red;
  }
</style>
{{/block}}


{{block name="js"}}
<script>
  alert(1111)
</script>
{{/block}}


{{block name="main"}}
<h3>我是一个内容</h3>
{{/block}}

recol1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
art-template

1、art-templateart-template 是一个简约、超快的模板引擎。版本特性：支持 Express、Koa、Webpack，浏览器版本仅 6KB 大小，支持模板继承与子模板，支持在模板文件上打断点（Webpack Loader）1.1、安装与配置art-template// 安装npm i -S art-template express-art-template// 模板引擎配置// 指定art-template模板，并指定模块后缀为.htmlapp.engine('html'
复制链接

扫一扫