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 相关文章推荐
pandas 对series和dataframe进行排序的实例
Jun 09 Python
python去掉 unicode 字符串前面的u方法
Oct 21 Python
python+opencv实现高斯平滑滤波
Jul 21 Python
基于Python的ModbusTCP客户端实现详解
Jul 13 Python
django ModelForm修改显示缩略图 imagefield类型的实例
Jul 28 Python
python中pygame安装过程(超级详细)
Aug 04 Python
python 画出使用分类器得到的决策边界
Aug 21 Python
pygame实现非图片按钮效果
Oct 29 Python
python 爬虫 实现增量去重和定时爬取实例
Feb 28 Python
解决python便携版无法直接运行py文件的问题
Sep 01 Python
python实现自动打卡的示例代码
Oct 10 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
Nov 26 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操作文件的一些基本函数使用示例
2014/11/18 PHP
Expandable &quot;Detail&quot; Table Rows
2007/08/29 Javascript
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
JS画5角星方法介绍
2013/09/17 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
jQuery设置和移除文本框默认值的方法
2015/03/09 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
2015/09/09 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
关于RxJS Subject的学习笔记
2018/12/05 Javascript
基于Vue插入视频的2种方法小结
2019/04/02 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
JavaScript数组及常见操作方法小结
2019/11/13 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
python实现360的字符显示界面
2014/02/21 Python
让 python 命令行也可以自动补全
2014/11/30 Python
Python中使用PIL库实现图片高斯模糊实例
2015/02/08 Python
python获取外网IP并发邮件的实现方法
2017/10/01 Python
spark: RDD与DataFrame之间的相互转换方法
2018/06/07 Python
将python图片转为二进制文本的实例
2019/01/24 Python
Python中按键来获取指定的值
2019/03/02 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
python实现无边框进度条的实例代码
2020/12/30 Python
PyCharm+Miniconda3安装配置教程详解
2021/02/16 Python
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
影视动画专业个人的自我评价
2013/12/31 职场文书
买房协议书范本
2014/10/23 职场文书
护士求职自荐信
2015/03/25 职场文书
2015年施工员工作总结范文
2015/04/20 职场文书
Elasticsearch 数据类型及管理
2022/04/19 Python