art-template模板包含和模板继承使用分析

最新推荐文章于 2024-05-22 09:47:41 发布

oye-game

最新推荐文章于 2024-05-22 09:47:41 发布

阅读量314

点赞数 3

分类专栏： Nodejs

本文链接：https://blog.csdn.net/cangqiong_xiamen/article/details/103119994

版权

Nodejs 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1. 首先有一些公共的模块，如头部、尾部，这些模块可以单独拿出来，然后在每一个要使用这些模块的地方包含这些公共的模块

header.html

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

footer.html

<div>
    <h1>公共的底部</h1>
</div>

接着是总体布局模板，这个模板会包含一些公共模块，并留下一些坑
layout.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">
    {{ block 'head' }}
    <!-- 留一个样式坑，将要留给继承该模板的模板去填坑 -->
    {{ /block }}
</head>
<body>
<!-- 包含公共头部 -->
{{ include './header.html' }}

{{ block 'content' }}
<!-- 留一个内容坑，将要留给继承该模板的模板去填坑 -->
<!-- 坑里可以有一些默认内容 -->
<h1>默认内容</h1>
{{ /block }}
<!-- 包含公共底部 -->
{{ include './footer.html' }}
<script src="/node_modules/jquery/dist/jquery.js"></script>
{{ block 'script' }}
<!-- 留一个脚本坑 -->
{{ /block }}
</body>
</html>

最后是最终要渲染的模板，这个模板要继承布局模块模板并将其留下的坑填上

index.html

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

{{ block 'head' }}
<style>
    body {
        background-color: skyblue;
    }
</style>
{{ /block }}

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

{{ block 'script' }}
<script>
    window.alert('index 页面自己的 js 脚本')
</script>
{{ /block }}

并非必选填完所有坑
list.html

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

{{ block 'content' }}
<div>
    <h1>列表页自己的内容</h1>
</div>
{{ /block }}

oye-game

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
art-template模板包含和模板继承使用分析

1. 首先有一些公共的模块，如头部、尾部，这些模块可以单独拿出来，然后在每一个要使用这些模块的地方包含这些公共的模块header.html<div> <h1>公共的头部</h1></div>footer.html<div> <h1>公共的底部</h1></div>接着是...
复制链接

扫一扫

专栏目录