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

最新推荐文章于 2024-04-28 17:05:59 发布

qq_32915337

最新推荐文章于 2024-04-28 17:05:59 发布

阅读量144

点赞数

分类专栏：前端模板引擎文章标签： html 前端模板引擎 art-template

原文链接：https://www.cnblogs.com/chuanzi/p/10539289.html

版权

前端模板引擎专栏收录该内容

1 篇文章 0 订阅

订阅专栏

官方文档链接:http://aui.github.io/art-template/zh-cn/docs/index.html

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

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 }}

在html标签里的使用

<a href="{{ctx}}/index">测试</a>

qq_32915337

关注

0
点赞
踩
0

收藏

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

首先有一些公共的模块，如头部、尾部，这些模块可以单独拿出来，然后在每一个要使用这些模块的地方包含这些公共的模块header.html<div> <h1>公共的头部</h1></div>footer.html<div> <h1>公共的底部</h1></div>接着是总体布局模板，这个模板会包含一些公共模块，并留下一些坑layout.html<!DOCTYP
复制链接

扫一扫