django-模板繼承 block、endblock、 extend
阿新 • • 發佈:2021-08-02
django載入模板
extend block endblock
views.py
##模板繼承
def base_html(request):
#基礎模板頁面
return render(request,'base_html.html')
def music_html(request):
return render(request,'music_html.html')
def sport_html(request):
return render(request,'sport_html.html')
base_html.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!----- 標題重寫----->> {% block base %} <title>base_html</title> {% endblock %} </head> <body> <!-----頂部導航欄--> {% block top %} <a href="{% url 'base_html'%}">主介面</a> <a href="{% url 'music'%}">音樂頻道</a> <a href="{% url 'sport' %}">體育頻道</a> {% endblock content %} <!--- 主體重寫部分-->> {% block bodycontent %} <div>歡迎來到主頁面</div> {% endblock %} <!-----底部導航欄------> {% block bottom %} <div class="worker clearfix"> <a class="link-a" href="http://www.tencent.com/zh-cn/index.shtml">關於騰訊</a> <a class="link-a" href="http://ieg.tencent.com/">騰訊互動娛樂</a> <a class="link-a" href="//game.qq.com/">騰訊遊戲</a> <a class="link-a" href="/v2/bussiness">商務合作</a> </div> {% endblock %} </body> </html>
music_html.html
{% extends 'base_html.html' %}
<!--- 標題重寫-->>
{% block base %}
<title>音樂頻道</title>
{% endblock base %}
<!--- 內容主體重寫-->>
{% block bodycontent %}
<div>歡迎來到音樂頻道</div>
{% endblock bodycontent %}
sport_html.html
{% extends 'base_html.html' %} <!--- 重寫內容-->> {% block base %} <title>體育頻道</title> {% endblock %} {% block bodycontent %} <div>歡迎來到體育頻道</div> {% endblock %}
頁面顯示內容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>base_html</title> </head> <body> <!-----頂部導航欄--> <a href="/base_html/">主介面</a> <a href="/music_html/">音樂頻道</a> <a href="/sport_html/">體育頻道</a> <div>歡迎來到主頁面</div> <!-----底部導航欄--> <div class="worker clearfix"> <a class="link-a" href="http://www.tencent.com/zh-cn/index.shtml">關於騰訊</a> <a class="link-a" href="http://ieg.tencent.com/">騰訊互動娛樂</a> <a class="link-a" href="//game.qq.com/">騰訊遊戲</a> <a class="link-a" href="/v2/bussiness">商務合作</a> </div> </body> </html>