看下面两个页面：

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

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

所有就此例可以设置三个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. C指针解析 ------ 指针的算术运算

    本文是自己学习所做笔记.欢迎转载.但请注明出处:http://blog.csdn.net/jesson20121020 指针是一个特殊的变量,表示一个地址,而地址能够上减去或加上一个整数,从而能够表示 ...

  2. IE hack 条件语句

    只在固定IE版本下执行 将以下代码放在head标签中,在script标签中写js即可 <!--[if IE 8]> <script> console.log("in ...

  3. IE 下 log 调试的一点不同

    介绍一点IE下控制台调试与chrome的区别 数组 alert([1,2]) console.log([1,2]) console.log([1,2],"1,2") alert I ...

  4. VSCode 运行go test显示打印日志

    在VSCode中运行go test,在代码中写的 fmt.Printf("TestB \n") 这些语句均不打印,只显示最终的结果 PASS ok github.com/B .03 ...

  5. iOS 递归锁

    原理:递归锁也是通过 pthread_mutex_lock 函数来实现,在函数内部会判断锁的类型.NSRecursiveLock 与 NSLock 的区别在于内部封装的 pthread_mutex_t ...

  6. python tensorflow 学习

    Tensorflow系列——Saver的用法:http://blog.csdn.net/u011500062/article/details/51728830 Tensorflow学习系列(二): t ...

  7. JS获取图片的缩略图

    js获取上传文件的缩略图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  8. css 坑记

    1. div 内容超出 (做换行处理)   要注意 white-space属性的运用 设置 div width:100%;(或者固定值) 设置换行  word-break: break-all; 设置 ...

  9. 【学员管理系统】0x04 数据库连接优化

    [学员管理系统]0x04  pymysql数据库连接优化 写在前面 项目详细需求参见:Django项目之[学员管理系统] 优化实现 把操作封装成函数 我们之前使用pymysql操作数据库的操作都是写死 ...

  10. 解决oracle锁表

    1.查看被锁住的表select b.owner,b.object_name,a.session_id,a.locked_mode from v$locked_object a,dba_objects ...