看下面两个页面：

——————————————————————————————————————————————————————————————————————————————————

一个显示文章列表，一个显示文章详细信息，其中的部分内容相同，有可以重用的部分。

所有就此例可以设置三个html文件：重用部分，目录部分，文章部分。

重用部分：

base.html

 <!DOCTYPE html>

 <!DOCTYPE html>

 <html lang="zh-CN">

 {% load staticfiles %}

   <head>

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <title>首页</title>

     <script type="text/javascript" src="{% static "bootstrap/js/jquery-2.0.0.min.js" %}"> </script>

     <script type="text/javascript" src="{% static "bootstrap/js/jquery-ui.js" %}"></script>

     <link href="{% static "bootstrap/css/bootstrap-combined.min.css" %}" rel="stylesheet" media="screen" >

     <script type="text/javascript" src="{% static "bootstrap/js/bootstrap.min.js" %}"s></script>

 </head>

 <body>

 <div class="container-fluid" id="LG">

     <div class="row-fluid">

         <img src="{% static "img/head1.png" %}" alt="返回主页">

         <div class="span12" >

         </div>

     </div>

     <div class="row-fluid">

         <div class="span2">

         </div>

         <div class="span6">

             <ul class="nav nav-tabs">

                 <li class="active">

                     <a href="#">首页</a>

                 </li>

                 <li>

                     <a href="#">资料</a>

                 </li>

                 <li >

                     <a href="#">信息</a>

                 </li>

             </ul>

             {% block context %}

             添加内容

             {% endblock context %}

         </div>

         <div class="span4">

         </div>

     </div>

 </div>

 </body>

 </html>

使用 {% block context %}     {% endblock context %}标签，添加不同内容

目录部分
index.html
 {% extends "blog/base.html" %}

     {% block context %}

             {% if latest_article_list %}

             <ul>

                 {% for article in latest_article_list %}

                 <li>

                     <a href="{% url 'blog:detail' article.id %}">

                      {{ article.title }} </a>

                 </li>

                      {% endfor %}

             </ul>

             {% else %}

                 <p>No articles are available.</p>

             {% endif %}

     {% endblock context %}

使用  {% extends "blog/base.html" %}  载入模板文件，模板文件的位置为相对于templates的路径。

文章部分：

detail.html

 {% extends "blog/base.html" %}

     {% block context %}

             <h1>{{ article.title }}</h1>

             <p>{{ article.content }}</p>

     {% endblock context %}

django文档地址：http://python.usyiyi.cn/django_182/ref/templates/language.html

django使用html模板减少代码的更多相关文章

  1. Django Template（模板）

    一.模板组成 组成:HTML代码 + 逻辑控制代码 二.逻辑控制代码的组成 1.变量 语法格式 : {{ name }} # 使用双大括号来引用变量 1.Template和Context对象(不推荐使 ...

  2. Django框架之模板继承和静态文件配置

    一.模板继承 目的是:减少代码的冗余 语法: {% block classinfo %} {% endblock %} 具体步骤: 1.创建一个base.html文件,2.把要显示的页面的内容写在这里 ...

  3. Django框架之模板基础，静态文件配置

    一.模板继承 目的是:减少代码的冗余 语法: {% block classinfo %} {% endblock %} 具体步骤: 1.创建一个base.html文件,2.把要显示的页面的内容写在这里 ...

  4. Django 路由、模板和模型系统

    一.路由系统 URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL模式以及要为该URL模式调用的视图函数之间的映射表:你就是以这种方式告诉Django,对于这个URL调用这 ...

  5. Django继承HTML模板

    Django在渲染模板的过程中可以实现模板样式的继承,以减少重复的代码 1.extend继承 模板.html: 模板内容 {{% block name1 %}} {{% enfblock %}} #n ...

  6. Django框架2——模板

    django框架2--模板 直接将HTML硬编码到你的视图里却并不是一个好主意: 对页面设计进行的任何改变都必须对 Python 代码进行相应的修改. 站点设计的修改往往比底层 Python 代码的修 ...

  7. Django项目: 2.模板抽取

    为什么要抽模板,因为这样能够复用代码,减少代码量,需要原代码时就不需要修改,也不需要添加; 如果不同,就只需要单独修改不一样的地方就行  : 多挖坑,少代码,这就是抽模板的精髓,挖坑就是({% blo ...

  8. python Django教程 之模板渲染、循环、条件判断、常用的标签、过滤器

    python3.5 manage.py runserver python Django教程 之模板渲染.循环.条件判断.常用的标签.过滤器 一.Django模板渲染模板 1. 创建一个 zqxt_tm ...

  9. 第三百一十节，Django框架，模板语言

    第三百一十节,Django框架,模板语言 模板语言就是可以将动态数据在html模板渲染的语言 一.接收值渲染 locals()函数,写在请求响应render()函数里,可以将逻辑处理函数里的变量传到h ...

随机推荐

  1. linux把某个文件拷贝到不同的目录下面

    find -name '7*' -type d|xargs -n 1 cp PBClassname.properties

  2. 自动make工具--CMake

    http://www.cnblogs.com/lyq105/archive/2010/12/03/1895067.html http://www.linuxidc.com/Linux/2015-10/ ...

  3. 一个简单的数据增量更新策略（Android / MongoDB / Django)

    我在做个人APP - CayKANJI - 的时候遇到一个问题: 如何增量式地把日语汉字数据地从server更新到APP端,即每次用户运行更新操作时,仅仅获取版本号高于本地缓存的内容. 数据格式 为了 ...

  4. MySQL的基本操作--第一弹

    前言:在听许嵩,忆当年,意气风发 ———————————————————————————————————————————————— 好了,今天和大家同步讲解mysql的知识了.都是最基本的知识. 一. ...

  5. 小程序发起post请求回调成功没有数据

    get请求时为 header:{ "content-type":'application/json' },POST 请求会将data的值放在Request Payload里面,而不 ...

  6. NSTheard 详解

    一.什么是NSThread NSThread是基于线程使用,轻量级的多线程编程方法(相对GCD和NSOperation),一个NSThread对象代表一个线程, 需要手动管理线程的生命周期,处理线程同 ...

  7. phpstorm10激活方法

    选择 license server ---> http://idea.lanyus.com/   (末尾的斜杠不能漏了!) 2016-7-5更新 上面的注册方法再试时,已被封杀 2017-9-1 ...

  8. 我的Android进阶之旅------>android:drawableLeft的用法

    有时候想在EditText左边放一个图片,如图所示: 就可以在xml布局文件中的EditText定义代码中,添加入下面的代码,即可实现: android:drawableLeft="@dra ...

  9. linux 中sort命令 按照指定列排序

    sort怎样按指定的列排序0000 27189 41925425065f 15 419254250663 7 419254250675 5 419254250691 76 419254250693 2 ...

  10. HTML 5 本地存储

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...