模板引擎——继承和导入

今天药忘吃喽~ 2022-01-28 23:27 263阅读 0赞

**目录**

一.由来：

二.继承

1.模板

2.继承模板

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

三.导入

1.写组件

2.导入组件

--------------------

## 一.由来： ##

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbmNvY280OQ_size_16_color_FFFFFF_t_70][]

## 二.继承 ##

### 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>
        
        {% block css%}{% end %}
    </head>
    <body>
        <div class="pg-header"></div>
        <div class="pg-content">
            
            {% block body%}{% end %}
        </div>
        <div class="pg-footer">end</div>
    
        
        <script src=""></script>
    
        
        {% 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>
        
        
        <style>
            .div{
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <div class="pg-header"></div>
        <div class="pg-content">
            
            
            <h1>Hello!</h1>
            <h1>Index!</h1>
        </div>
        <div class="pg-footer">end</div>
    
        
        <script src=""></script>
    
        
        
        <script>
            console.log('Index');
        </script>
    </body>
    </html>

## 三.导入 ##

### 1.写组件 ###

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbmNvY280OQ_size_16_color_FFFFFF_t_70]: /images/20220129/875246192e8c466d953c2ec86c3a0b84.png