当前位置：网站首页>Template inheritance and import

Template inheritance and import

2022-07-24 18:16:00 【Full stack programmer webmaster】

Hello everyone , I meet you again , I'm your friend, Quan Jun .

Scenarios inherited by the template

 situation 1： A template is usually used to frame the header of a page LOGO page , Left navigation menu , Only the content on the right is different . If you don't use a template, you do a lot of repetitive work .

　　　  Especially if the head or left navigation needs to be modified or added , All pages need to be modified .django  Solve through template inheritance .

 situation 2： If a page has a lot of content , It's impossible to write the same page together . For example, jd.com has a lot of content on its homepage . How to solve ？django adopt include Import other pages .

One ： Template inheritance

1） To use by inheritance

step 1： Write in motherboard block, Can be inherited ,content Is the name.

    {% block title %}
    {% endblock%}

    {% block “content“ %}
    {% endblock%}

step 2： The sub page passes extends Specify which template to inherit

    {% extends 'master.html'%} # Inherit that template 

    {% block “content“ %}  This place is to replace the template block “content“
        <ul>
            {% for i in u%}
                <li>{{i}}</li> 
            {%endfor%}
    {% endblock%}

2） If the sub page has its own css,js What's the use of ？ 　　A) If it is written on a sub page CSS and JS,CSS It's not on the head , and JS It's not <body> Before , If you want to quote jquery, The sub page is written JS Will be in jquery Quote from the front , Will not take effect

　　B) Inherit CSS And JS All in common .

resolvent ：

It's in the template css and js The position is written block block . And then in block In the introduction , In this block Write your own js and css notes ：block It has nothing to do with order

Two : Template introduction

3) A page can only inherit one template , How to solve ？ How to use multiple templates , Or introduce other pages

　　　　<% include “a.html” %> You can quote multiple times

　4） Templates ,include, How to render sub pages ？ First render yourself into a string , Taking templates and include Rendering , So there is no rendering problem ( You can inherit sub pages include As a whole page )

3、 ... and ： Example

    #url.py
        url(r'^tpl1$',views.tpl1),
        url(r'^tpl2$',views.tpl2),
        url(r'^tpl3$',views.tpl3),

    #views.py

        def tpl1(request):
            u=[1,2,3]
            return render(request,"tp1.html",{"u":u})
        
        def tpl2(request):
            name="alex"
            return render(request,"tp2.html",{"name":name})
        
        def tpl3(request):
            status=" The modified "
            return render(request,"tp3.html",{"status":status})

    # modular ：master.html
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>
                {% block title %}{% endblock %} <!-- This is used to set the title -->
            </title>
            <link rel="stylesheet" href="/static/common.css">
        
            {% block css %}<!-- This is used to set the sub page's own css-->
            {% endblock %}
        </head>
        <body>
            {% block content %}<!-- This is used to set the content of the sub page -->
            {% endblock %}
            <script src="/static/js/jquery-1.12.4.js"></script>
    　　　　　　<script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
            {% block js %}<!-- This is used to set the sub page's own js-->
            {% endblock %}
        </body>
        </html>

    # Subpage ：tp1.html
        {% extends "master.html" %} <!--  Inherit that template -->

        {% block title %}
             User management 
        {% endblock %}
        
        {% block css %}
            <style>
                body{
                    background-color: aqua;
                }
            </style>
        {% endblock %}
        
        {% block content %}
            <h1> User management </h1>
            <ul>
                {% for i in u %}
                    <li>{{ i }}</li>
                {% endfor %}
            </ul>
        {% endblock %}
    # Subpage ：tp2.html
        {% extends "master.html" %}
        
        {% block content %}
            <h1> Change Password {{ name }}</h1>
            {% include "tp3.html" %} <!--  Introduce other pages -->
        {% endblock %}

    #include page ：tp3.html
    <div>
        <input type="text">
        <input type="button" value="++">
    </div>

Publisher ： Full stack programmer stack length , Reprint please indicate the source ：https://javaforall.cn/124460.html Link to the original text ：https://javaforall.cn

原网站

版权声明
本文为[Full stack programmer webmaster]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/203/202207211150281643.html