模板继承
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%}