Django学习笔记(8)templates-模板继承

模板继承

  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%}
原文地址:https://www.cnblogs.com/bugoobird/p/13355302.html