Django之html-模板繼承

時間 2019-11-19

原文原文鏈接

在編程的過程當中，咱們常常會重複性的寫了不少的代碼，好比一個頁面的框架部分，這樣我又多少個頁面就得寫上多少次，這樣既很差維護，也不夠高效，因此咱們引出了html的模板繼承部分。css

一、寫好一個html文件。html

二、下面有個新的html文件須要繼承上面這個html。jquery

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

#這個manger.html就是母版的文件名稱，告訴這個html去哪裏繼承。

{% extends 'manger.html' %}

三、問題來了，咱們既然是繼承，總不能所有繼承吧，咱們確定是須要寫一些新的內容在新的html文件中展現，咱們只是繼承母版中的一部分，好比head之類的。框架

　　好比咱們要在html的一個位置更換新的內容。spa

　　一、定義一個繼承的塊，叫index。htm

{% block index %}{% endblock %}

　　二、繼承者在本身的文件中須要更換新的內容，須要這麼寫。blog

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

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

四、問題由來了，若是個人html內容特別多，我看着特別亂，這樣我能夠把這些內容都寫到一個新的html文件裏面，而後在個人html文件中直接引用就OK。ip

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

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

{% include "test.html" %}

五、寫本身的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 %}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。