art-template 模板继承和子模板

最新推荐文章于 2022-05-08 16:54:42 发布

陈小梓forever

最新推荐文章于 2022-05-08 16:54:42 发布

阅读量509

点赞数

文章标签： node.js

本文链接：https://blog.csdn.net/weixin_43916694/article/details/107511991

版权

子模板

标准语法

{{ include'./header.art' }}

使用：

header.html

<div>公共的头部</div>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    {{ include'./header.html' }}
    <h1>index 页面</h1>
</body>
</html>

模板继承

标准语法

{{ extend './layout.art' }}
{{ block 'head' }}...{{ /block }}

使用：

layout.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    {{ include'./header.html' }}
    
    <!-- 留一个坑，将来留给孩子去填坑 -->
    {{ block 'content' }}  
        <h1>默认内容</h1>
    {{ /block }}
</body>
</html>

index.html

<!-- 在 index.html 中继承 layout.html -->
<!-- 不填坑就显示默认内容 填坑就显示填坑内容 -->

{{ extend './layout.html' }}

<!-- 填坑 -->
{{ block 'content' }}
    <div>
        <h1>
            index 页面填坑内容
        </h1>
    </div>
{{ /block }}

可以将需要引入的文件，在模板也引入，由子模板去继承。页面的样式（CSS）和 script 也可以使用模板继承。

陈小梓forever

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
art-template 模板继承和子模板

安装：npm install --save art-template// 在浏览器中下载时不需要安装npm install --save express-art-template配置：// 第一个参数用来配置视图的后缀名，这里是 art ，则存储在 views 目录中的模板文件必须是 xxx.art// app.engine('art', require('express-art-template'))// 这里把 art 改为 htmlapp.engine('html', requir
复制链接

扫一扫