模板引擎——继承和导入

最新推荐文章于 2024-04-12 04:16:49 发布

咳咳咳咳咳咳咳4444

最新推荐文章于 2024-04-12 04:16:49 发布

阅读量560

点赞数

分类专栏：黑历史18-19

本文链接：https://blog.csdn.net/lincoco49/article/details/90372132

版权

黑历史18-19 专栏收录该内容

32 篇文章 4 订阅

订阅专栏

3.继承后实际的index.html文件的内容

三.导入

1.写组件

2.导入组件

一.由来：

当我们写一个web应用程序时，会发现不同的多个html页面，页面布局基本一致，变化的可能只是页面中间的位置，这时我们需要重复地写页面布局html吗?显然浪费时间，因此我们可以用模板引擎里面的【继承extend】，只需要写一份模板，其他类似页面布局的html直接集成模板即可，每个页面个性化的内容再自行添加。

同样，我们也会发现多个页面中会有很多类似的小组件，比如下图中红色框中的内容，不同的页面可能都需要类似的组件，这时我们可以将小组件的html写在一个单独的地方，其他页面需要用时，直接用模板引擎【导入include】即可。

二.继承

1.模板

首先需要写一个模板

语法结构：{% block css%}{% end%} {% block body%}{% end%} {% block js%}{% end%}

每一个block都要与一个end对应

以下模板的文件名为：muban.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--公用样式-->
    <style>
        .pg-header{
            height:48px;
            background-color:pink;
        }
        .pg-footer{
            height:50px;
            background-color:gray;
        }
    </style>
    <!--某页面自定义CSS-->
    {% block css%}{% end %}
</head>
<body>
    <div class="pg-header"></div>
    <div class="pg-content">
        <!--某页面自定义body-->
        {% block body%}{% end %}
    </div>
    <div class="pg-footer">end</div>

    <!--公用js-->
    <script src=""></script>

    <!--某页面自定义JS-->
    {% block js%}{% end %}
</body>
</html>

2.继承模板

首先用 {% extends '../master/muban.html'%}继承muban.html模板，extends后面为muban.html的路径

接下来分别在{% block css%}{% end%} 等模板块中写入本页面特定的代码块

以下代码的文件名为：index.html

<!--继承模板文件-->
{% extends '../master/muban.html'%}

{% block css%}
    <style>
        .div{
            border:1px solid red;
        }
    </style>

{% end%}

{% block body%}
    <h1>Hello!</h1>
    <h1>Index!</h1>
{% end %}


{% block js%}
    <script>
        console.log('Index');
    </script>
{% end %}

3.继承后实际的index.html文件的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--公用样式-->
    <style>
        .pg-header{
            height:48px;
            background-color:pink;
        }
        .pg-footer{
            height:50px;
            background-color:gray;
        }
    </style>
    <!--某页面自定义CSS-->
    <!--{% block css%}{% end %}-->
    <style>
        .div{
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div class="pg-header"></div>
    <div class="pg-content">
        <!--某页面自定义body-->
        <!--{% block body%}{% end %}-->
        <h1>Hello!</h1>
        <h1>Index!</h1>
    </div>
    <div class="pg-footer">end</div>

    <!--公用js-->
    <script src=""></script>

    <!--某页面自定义JS-->
    <!--{% block js%}{% end %}-->
    <script>
        console.log('Index');
    </script>
</body>
</html>

三.导入

1.写组件

首先我们可以像封装一个函数一样，封装一个小组件的html代码，如下代码，封装了一个表单组件，文件命名为：form.html

<form action="/">
    <input type="text"/>
    <input type="submit" value="提交"/>
</form>

2.导入组件

接下来我们在上文中【继承模板】部分中的index.html中导入form.html

这样index.html中的{% include '../include/form.html'%}就会被替换成form.html中的内容,include后面为form.html的路径

{% extends '../master/layout.html'%}

{% block css%}
    <style>
        .div{
            border:1px solid red;
        }
    </style>

{% end%}

{% block body%}
    <h1>Hello!</h1>
    <h1>Index!</h1>
    <!--导入组件-->
    {% include '../include/form.html'%}
    {% include '../include/form.html'%}
    {% include '../include/form.html'%}
{% end %}


{% block js%}
    <script>
        console.log('Index');
    </script>
{% end %}

咳咳咳咳咳咳咳4444

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
模板引擎——继承和导入

目录一.由来：二.继承1.模板2.继承模板3.继承后实际的index.html文件的内容三.导入1.写组件2.导入组件一.由来：当我们写一个web应用程序时，会发现不同的多个html页面，页面布局基本一致，变化的可能只是页面中间的位置，这时我们需要重复地写页面布局html吗?显然浪费时间，因此我们可以用模板引擎里面的【继承extend】，只需要写一份模板，其...
复制链接

扫一扫

专栏目录