Django學習筆記（8）templates-模板繼承
阿新 • • 發佈：2020-07-21
模板繼承
templates有多個html檔案，各個檔案中相同程式碼的部分可以抽離做為一個公共的html，然後其他html用的公共的程式碼時繼承過來就可以了。具體用法如下
在templates資料夾下新建base.html檔案做為公共的html，在這個html留出css content js的口子，便於用來給其他html繼承
base.html
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>首頁_楊青個人部落格 - 一個站在web前端設計之路的女技術員個人部落格網站</title> 6<meta name="keywords" content="個人部落格,楊青個人部落格,個人部落格模板,楊青" /> 7 <meta name="description" content="楊青個人部落格，是一個站在web前端設計之路的女程式設計師個人網站，提供個人部落格模板免費資源下載的個人原創網站。" /> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 9 <link href="/static/css/base.css" rel="stylesheet"> 10 <link href="/static/css/index.css" rel="stylesheet"> 11 <link href="/static/css/info.css" rel="stylesheet"> 12 <link href="/static/css/m.css" rel="stylesheet"> 13 <script src="/static/js/jquery.min.js" type="text/javascript"></script> 14 <script type="text/javascript" src="/static/js/hc-sticky.js"></script> 15 <script type="text/javascript" src="/static/js/comm.js"></script> 16 <!--[if lt IE 9]> 17 <script src="/static/js/modernizr.js"></script> 18 <![endif]--> 19 {% block css %} #預留css口子 20 {% endblock %} 21 </head> 22 <body> 23 <header class="header-navigation" id="header"> 24 <nav><div class="logo"><a href="/">楊青個人部落格</a></div> 25 <h2 id="mnavh"><span class="navicon"></span></h2> 26 <ul id="starlist"> 27 {% for n in nav %} 28 <li><a href="/category/{{ n.id }}">{{n.name}}</a></li> 29 {% endfor %} 30 </ul> 31 </nav> 32 </header> 33 34 {% block content%} #預留content口子 35 {% endblock %} 36 37 <footer> 38 <p>Design by <a href="http://www.yangqq.com" target="_blank">楊青個人部落格</a> <a href="/">蜀ICP備11002373號-1</a></p> 39 </footer> 40 <a href="#" class="cd-top">Top</a> 41 42 {% block js %} #預留js口子 43 {% endblock %} 44 </body> 45 </html>
index.html繼承base.html，使用{% block content %}{%endblock%}將內容包裹起來
1 {% extends 'base.html' %}
2 {% block content %}
3 <article>xxxxxxx</article>
4 {%endblock%}