django使用html模板减少代码代码解析


Posted in Python onDecember 12, 2017

看下面两个页面:

django使用html模板减少代码代码解析

django使用html模板减少代码代码解析

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

所有就此例可以设置三个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 " rel="external nofollow" 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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a>
        </li>
        <li>
          <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >资料</a>
        </li>
        <li >
          <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >信息</a>
        </li>
      </ul>
      {% block context %}
      添加内容
      {% endblock context %}
    </div>
    <div class="span4">
    </div>
  </div>
</div>
</body>
</html>

使用{%blockcontext%}{%endblockcontext%}标签,添加不同内容

目录部分

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 %}" rel="external nofollow" >
           {{ 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模板减少代码代码解析的全部内容,希望对大家有所帮助。感兴趣的朋友可以继续参阅本站:

如有不足之处,欢迎留言指出。感谢朋友们对本站的支持!

Python 相关文章推荐
Python实现新浪博客备份的方法
Apr 27 Python
python函数中return后的语句一定不会执行吗?
Jul 06 Python
Python操作MongoDB数据库的方法示例
Jan 04 Python
详解python之协程gevent模块
Jun 14 Python
python实现三次样条插值
Dec 17 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
Feb 12 Python
python对矩阵进行转置的2种处理方法
Jul 17 Python
python科学计算之numpy——ufunc函数用法
Nov 25 Python
Python3和PyCharm安装与环境配置【图文教程】
Feb 14 Python
Python开发之pip安装及使用方法详解
Feb 21 Python
python3 配置logging日志类的操作
Apr 08 Python
python实现马丁策略回测3000只股票的实例代码
Jan 22 Python
Python使用三种方法实现PCA算法
Dec 12 #Python
Java分治归并排序算法实例详解
Dec 12 #Python
Python数据结构与算法之二叉树结构定义与遍历方法详解
Dec 12 #Python
Python数据结构与算法之图的基本实现及迭代器实例详解
Dec 12 #Python
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
Dec 12 #Python
你真的了解Python的random模块吗?
Dec 12 #Python
Python判断两个对象相等的原理
Dec 12 #Python
You might like
PHP中其实也可以用方法链
2011/11/10 PHP
Php中文件下载功能实现超详细流程分析
2012/06/13 PHP
php 调试利器debug_print_backtrace()
2012/07/23 PHP
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
ThinkPHP实现动态包含文件的方法
2014/11/29 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
js实现统计字符串中特定字符出现个数的方法
2016/08/02 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
vuejs router history 配置到iis的方法
2018/09/20 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
2020/07/27 Javascript
python中map()与zip()操作方法
2016/02/27 Python
python 获取指定文件夹下所有文件名称并写入列表的实例
2018/04/23 Python
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
Python时间序列缺失值的处理方法(日期缺失填充)
2019/08/11 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
军训鉴定表自我鉴定
2014/02/13 职场文书
公司投资建议书
2014/05/16 职场文书
小学领导班子对照材料
2014/08/23 职场文书
校长师德表现自我评价
2015/03/05 职场文书
2015年端午节活动方案
2015/05/05 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android
关于JavaScript轮播图的实现
2021/11/20 Javascript
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB