有时我们在浏览一个网站时,会发现有些页面的元素是每个页面共有的,比如网页导航、底部注释等。如果每个页面都去重复的写 效率就太低下了,这是就需要继承一个基础的html,然后每个页面只需要在基础的页面上新加元素
例如,这是一个基础的html文件,base.html。他定义了这个网站多个页面的基础样式。我们只需要在这个基础文件中,预留出空间,让调用这个html的文件可以在这个基础上增加样式或者块。
预留CSS样式的格式:{%block css%} 和{%endblock%} 必须是成对出现的,这个中间就是我们空出来的位置,如果有新的css可以写在这里面。
{% block css %}
{# 为新页面预留CSS样式#}
{% endblock %}
预留JS样式格式:原理同上
{% block js %}
{% endblock %}
for 循环逻辑:
{% for nav in daohang %} {#循环#} <li><a href="/nav/{{ nav.id }}">{{ nav.name }}</a></li> {% endfor %}
举例:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>首页_{{ title }} - 一个站在web前端设计之路的女技术员个人博客网站</title> <meta name="keywords" content="个人博客,杨青个人博客,个人博客模板,杨青" /> <meta name="description" content="{{ title }},是一个站在web前端设计之路的女程序员个人网站,提供个人博客模板免费资源下载的个人原创网站。" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/static/css/base.css" rel="stylesheet"> <link href="/static/css/index.css" rel="stylesheet"> <link href="/static/css/m.css" rel="stylesheet"> <script src="/static/js/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="/static/js/hc-sticky.js"></script> <script type="text/javascript" src="/static/js/comm.js"></script> {% block css %} {# 为新页面预留CSS样式#} {% endblock %} {% block js %} {% endblock %} <!--[if lt IE 9]> <script src="/static/js/modernizr.js"></script> <![endif]--> </head> <body> <header class="header-navigation" id="header"> <nav><div class="logo"><a href="/">{{ title }}</a></div> <h2 id="mnavh"><span class="navicon"></span></h2> <ul id="starlist"> {% for nav in daohang %} {#循环#} <li><a href="/nav/{{ nav.id }}">{{ nav.name }}</a></li> {% endfor %} </ul> </nav> </header> {% block content %} #预留空间 {% endblock %} <footer> <p>Design by <a href="http://www.besttest.cn" target="_blank">{{ title }}</a> <a href="/">蜀ICP备11002373号-1</a></p> </footer> <a href="#" class="cd-top">Top</a> </body> </html>