python(Django之html模板繼承)


 

 

  在編程的過程中,我們經常會重復性的寫了很多的代碼,比如一個頁面的框架部分,這樣我又多少個頁面就得寫上多少次,這樣既不好維護,也不夠高效,所以我們引出了html的模板繼承部分。

 

1、寫好一個html文件。

2、下面有個新的html文件需要繼承上面這個html。

  直接在這個新的html文件的最頂端,寫上下面的內容

  

 
         
#這個manger.html就是母版的文件名稱,告訴這個html去哪里繼承。
{% extends 'manger.html' %}

 

 

3、問題來了,我們既然是繼承,總不能全部繼承吧,我們肯定是需要寫一些新的內容在新的html文件中展示,我們只是繼承母版中的一部分,比如head之類的。

  比如我們要在html的一個位置更換新的內容。

  1、定義一個繼承的塊,叫index。

{% block index %}{% endblock %}

  2、繼承者在自己的文件中需要更換新的內容,需要這么寫。

  注意:只需要在繼承的任意位置寫上{% block index %}內容區{% endblock  %}

{% block index %}
    <div style="background-color: gainsboro;height: 45px;line-height: 45px;font-size: 15px;font-weight: bolder">
        <span>首頁&nbsp;></span>
        <span>資產管理</span>
    </div>
{% endblock %}

 

 

4、問題由來了,如果我的html內容特別多,我看着特別亂,這樣我可以把這些內容都寫到一個新的html文件里面,然后在我的html文件中直接引用就OK。

 

例如:我單獨寫了一個test.html文件。

 

 

我想在html中引用直接寫入地下的東西就OK了。

{% include "test.html" %}

 

 

 

 5、寫自己的CSS和JS樣式或操作。

  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
    <style>
        body{
            height: 38px;
            width: 300px;
        }
    </style>
    {% block css %}{% endblock %}
<body>
    <div>
        
    </div>
    <script src="jquery-x.x.x"></script>
    {% block js %}{% endblock %}
</body>
</html>

 

 

 

 

   這樣,我們就可以在自己的html文件中直接寫自己的css樣式或者js操作。

{% block css %}
    <style>

    </style>
{% endblock %}

{% block js %}
    <script>

    </script>
{% endblock %}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM