• 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%}
  • 相关阅读:
    增强MyEclipse提示功能
    Mysql安装配置,修改初试密码。
    在我的电脑里面创建图标
    popup non topmost
    多线程下载或上传数据限速
    SynchronizationContext
    linux运维笔记——常用命令详解diff
    linux运维笔记——curl
    linux下mysql的源码安装
    shell编程——变量的数值计算
  • 原文地址:https://www.cnblogs.com/bugoobird/p/13355302.html
Copyright © 2020-2023  润新知