看下面两个页面：

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

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

所有就此例可以设置三个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. map端join

    package my.hadoop.hdfs.mapreduceJoin; import java.io.BufferedReader; import java.io.FileInputStream; ...

  2. Viewer 是一款强大的 jQuery 图像浏览插件。

    Viewer 是一款强大的 jQuery 图像浏览插件. 主要功能: 支持选项 支持方法 支持事件 支持触摸 支持移动 支持缩放 支持旋转 支持键盘 跨浏览器支持 链接: viewer的官方演示,及g ...

  3. C#实战Microsoft Messaging Queue(MSMQ)消息队列(干货)<转>

    前言 在使用MSMQ之前,我们需要自行安装消息队列组件!(具体安装方法大家自己搜一下吧) 采用MSMQ带来的好处是:由于是异步通信,无论是发送方还是接收方都不用等待对方返回成功消息,就可以执行余下的代 ...

  4. CIA 读书笔记

    对此书的评价只有八个字:粗制滥造,到处粘贴. 对于通过表情识别人情绪的教程,最好要有图,图很重要,也最好有案例.

  5. linux应用网址

    APUE学习:(十三) [终篇] 一起学 Unix 环境高级编程 (APUE) 之 网络 IPC:套接字 linux应用学习笔记(已列目录供跳转):http://www.cnblogs.com/ggj ...

  6. RecyclerView加载更多用notifyDataSetChanged()刷新图片闪烁

    首先来看看对比ListView看一下RecyclerView的Adapter主要增加了哪些方法: notifyItemChanged(int position) 更新列表position位置上的数据可 ...

  7. python#模拟发送电子邮件

    #-*- coding:utf-8 -*- #模拟发送电子邮件 from email.mime.text import MIMEText from_addr = 'aa@sss.com' passwo ...

  8. 002android初级篇之ViewPager及PagerSlidingTabStrip listview的使用

    002android初级篇之ViewPager及PagerSlidingTabStrip listview的使用 ViewPager ViewPager类直接继承了ViewGroup类,所有它是一个容 ...

  9. Linq系列(7)——表达式树之ExpressionVisitor

    大家好,由于今天项目升级,大家都在获最新代码,所以我又有时间在这里写点东西,跟大家分享. 在上一篇的文章中我介绍了一个dll,使大家在debug的时候可以可视化的看到ExpressionTree的Bo ...

  10. 1065. [Nescafe19] 绿豆蛙的归宿（概率）

    1065. [Nescafe19] 绿豆蛙的归宿 ★   输入文件:ldfrog.in   输出文件:ldfrog.out   简单对比时间限制:1 s   内存限制:128 MB [背景] 随着新版 ...