node 中 template 的继承

最新推荐文章于 2022-04-01 22:12:31 发布

原创最新推荐文章于 2022-04-01 22:12:31 发布 · 323 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#nodejs #template

NodeJS 专栏收录该内容

13 篇文章

订阅专栏

本文介绍Node.js中template的继承机制，通过模板继承实现页面公共头部和底部的处理。详细讲解了如何使用extend关键字进行模板的继承，并讨论了如何处理动态变化的部分以及JavaScript脚本和静态资源的继承。

Github 地址

template 模板继承

模板继承的功能

如何实现头部、底部公共部分的处理

自行查看模板继承

可以继承 <style></style> 、<div></div>、<script></script>

继承

header.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>头部</title>
</head>
<body>
    
    我是头部

</body>
</html>

Index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
</head>

<body>

    {{ include './header.html'}}  <!-- 将 header.html 放入 index.html中 -->
    <h1>{{name}}</h1>

</body>

</html>

写一个插槽，用于插入不断变化的部分

Layout.html

<!-- 写一个插槽，用于插入不断变化的部分 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内容部分的插槽</title>
</head>
<body>

        {{ include './header.html'}}

        <!-- 插槽 -->
        {{ block 'content'}}
        <h1>我是默认的，如果不传过来自定义的内容就用我</h1>
        {{ /block}}

        {{ include './footer.html'}}
    
</body>
</html>

修改 index.html 中的内容利用 extend 去继承 layout的

<!-- 去继承layout定义的 -->
{{ extend './layout.html' }}

<!-- 我要填写自己的坑 -->
{{ block 'content' }}

<div>
    <h1>我是index.html页面，我要填写自己的坑</h1>
</div>

{{ /block }}

继承 js脚本和静态的

{{ block 'css'}}  {{ /block}}

{{ block 'scripts'}}
	<script src=""></script>  <!-- 默认给个空的插槽 -->
{{ /block}}

填坑

{{ block 'css' }}
	<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">
{{ /block }}


{{ block 'scripts' }}
	<script src="/node_modules/jquery/dist/jquery.js"></script>
  <script src="/node_modules/bootstrap/dist/js/bootstrap.js"></script>
{{ /block }}