Django入门:第十一章、基础模板
Title: Django入门:第十一章、基础模板
Author:宇宙之一粟
Time: 2019年11月8日
回顾
在上一章中,我们成功的将静态文件设置好。已经将bootstrap-4.3.1下的css和js文件导入,也已经简单的使用bootstrap.min.css将我们得博客变得好看一点,不过细心的读者发现,我们使用的home.html和content.html文件中包含重复的HTML代码,有没有好的方式改变一下这种情况?
基础模板
为了展示主页和详细的博客文章信息,我们会复制和粘贴HTML文档的多个部分(比如头部信息),其实,Django为我们提供了很好的模板继承功能,只要我们写好基础模板,然后将静态文件放在基础模板中使用,其他模板添加你自己需要定制的部分。就能大量减少我们的代码量,怎么样,是不是很激动?那我们来看一下,怎么做:
首先在./templates文件夹中创建一个名为base.html的文件:
{% load static %}<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>{% block title %}Django 博客{% endblock %}</title><link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"></head><body><nav class="navbar navbar-expand-lg navbar-dark bg-dark"><div class="container"><a class="navbar-expand" href="{% url 'home' %}">Django 博客</a></div></nav><div class="container"><ol class="breadcrumb my-4">{% block breadcrumb %}{% endblock %}</ol>{% block content %}{% endblock %}</div></body>
</html>
这是我们的母模板,之后我们创建的模板都 继承自这个特殊的模板。现在我们介绍 {% block %}标签。它用于在模板中保留一个空间,一个“子”模板(继承这个母模板)可以在这个部分中插入代码和HTML。
Django提供了强大的模板语言用于控制数据渲染,由模板标签(template tags)、模板变量(templates variables)、**模板过滤器(templates filters)**组成:
- templates tags:进行渲染控制,类似{% tag %}
- templates variables:可认为是模板标签的一种特殊形式,即只是一个变量,渲染的时候只替换内容,类似{{ variable }}
- templates filters:附加在模板变量上改变变量最终显示结果,类似{{ variable|filter }}
在{% block title %}Django 博客{% endblock %}
中,设置了一个默认值“Django博客”,如果子模板没有设置{%block title%}的值,它就会被使用。
接下来,我们改写我们之前写过的两个模板:home.html 和 content.html
./templates/home.html
{% extends 'base.html' %}
{% block breadcrumb %}<li class="breadcrumb-item active" ><a href="https://blog.csdn.net/yuzhou_1shu">欢迎来到宇宙之一粟的技术漂泊之旅</a></li>
{% endblock %}
{% block content %}<table class="table"><thead class="thead-dark"><tr><th>标题</th><th>作者</th><th>发布时间</th></tr></thead><tbody>{% for blog in blogs %}<tr><td><a href="{{ blog.id }}">{{ blog.title }} </a></td><td>{{ blog.author }}</td><td>{{ blog.publish }}</td></tr>{% endfor %}</tbody></table>
{% endblock %}
home.html的第一行是 {%extend ‘base.html’%}。这个标签用来告诉Django使用base.html作为母模板,使用block来放置这个页面独有的部分。
./templates/content.html
{% extends 'base.html' %}
{% block title %}{{ article.title }} - {{ article.author.username }}
{% endblock %}{% block breadcrumb %}<li class="breadcrumb-item"><a href="{% url 'home' %}">Home</a></li><li class="breadcrumb-item active">{{ article.author.username }}</li>
{% endblock %}{% block content %}<div class="blog-post" ><h2 class="blog-post-title">{{ article.title }}</h2><p class="blog-post-meta">Published {{ article.publish }} by<a href="#"> {{ article.author.username }}</a></p><p>{{ article.body|truncatewords:30|linebreaks }}</p></div>
{% endblock %}
在content.html中,我们改变了{%block title%}的默认值,然后运行整个Django,访问到主页,如下图:
随便选择并点击进入一篇博客,查看博客详细信息,如下图:
总结
我们能看到两个界面都有了导航页,说明母模板里面的内容被 home.html 和 content.html 继承下来,并各自能展示自己想要显示的内容。
其实,如果你还想分的更细的话,一般网站可以分为上、中、下三个部分。上部就是网站的头部,可以放导航栏,网站图标或商标,所以可以自己设置头部基础模板 header.html;中部就是你要向访问者展示的内容,比如博客、列表、图片,这个就是子模板该做的内容;下部就是网站底部,可以显示网站的版权信息或者友情链接等一般不怎么改变的内容,所以自己可以定义一个footer.html。
其实,关于模板,作者的审美也不是很好,所以网页布局也不太好看,感觉目前这个博客有点四不像,不过没关系,我们边写边学,可以参考网上好看的博客网站(偷偷学一下别人的优秀设计)。
Django入门:第十一章、基础模板相关推荐
- Django之入门 CMDB系统 (一) 基础环境
Django之入门 CMDB系统 (一) 基础环境前言作者: 何全,github地址: https://github.com/××× QQ交流群: 62-01-76-50-1 通过此教程完成从 ...
- 超实用的Django入门基础教程,新手必备!
Django入门基础教程 Django简介 安装Django 虚拟环境的建立和准备工作 一.通过pycharm创建 手动创建app 迁移数据库 二.手动创建 创建一个新的文件夹 创建虚拟环境 激活虚拟 ...
- 第一章:Django入门篇
文章目录 第一章:Django入门篇 一. web应用 二.HTTP协议(重要) 请求协议 响应协议 响应状态码 URL简介 三.django简介 3.2 目录介绍 3.3 启动项目 3.4 简单示例 ...
- 补学图论算法:算法竞赛入门经典(第二版)第十一章:
补学图论算法:算法竞赛入门经典(第二版)第十一章: 倒排索引还没有实现! 下面是左神的图论算法,并查集笔记.和一个美团题目. ''' https://www.nowcoder.com/live/11? ...
- Spring入门到精通:第一章 基础入门:1.Spring框架概述
Spring入门到精通:第一章 基础入门:1.Spring框架概述 前言:为什么要学习Spring框架? 为什么要学习Spring框架呐? (1)使用广泛:现在很多的企业都有Spring的影子,不管是 ...
- 鸟哥的Linux私房菜(基础篇)- 第十一章、认识与学习 BASH
第十一章.认识与学习 BASH 最近升级日期:2009/08/25 在 Linux 的环境下,如果你不懂 bash 是什么,那么其他的东西就不用学了!因为前面几章我们使用终端机下达命令的方式,就是透过 ...
- 《Flask 入门教程》第 6 章:模板优化
这一章我们会继续完善模板,学习几个非常实用的模板编写技巧,为下一章实现创建.编辑电影条目打下基础. 自定义错误页面 为了引出相关知识点,我们首先要为 Watchlist 编写一个错误页面.目前的程序中 ...
- 悟透delphi 第十一章 面向对象数据库基础
第十一章 面向对象数据库基础 第二节数据对象的标识 我们在关系数据库的设计和开发中,可能经常需要一些唯一的编号或标识,用来作为关键字,以区别每一个不同的人,每一张不同的单据,每一次不同的信息登记,等等 ...
- 网工学习 第十一章 网络管理 网络管理基础 网络管理协议五大标准 SNMP协议 RMON
目录 第十一章 网络管理 网络管理基础 网络管理协议五大标准 SNMP协议 SNMP协议的操作 SNMPv1 SNMPv2 SNMPv3 管理数据库MIB-2 被管理 对象标识符OID RMON 第十 ...
- 鸟哥的Linux私房菜(基础篇)- 第二十一章、系统配置工具(网络与打印机)与硬件侦测
第二十一章.系统配置工具(网络与打印机)与硬件侦测 最近升级日期:2009/09/15 除了手动配置之外,其实系统提供了一个名为 setup 的命令给系统管理员使用喔!这个命令还能够配置网络呢.此外, ...
最新文章
- C语言中的struct结构体对齐问题
- MySQL 大表优化方案
- uglifyjs压缩JS
- swing JTable 更新数据
- 不止代码:路径数量(ybtoj-最小生成树)
- 污染物在线自动监控(监测)系统数据传输标准 (HJ212-2017)-空气质量监测数据包构造...
- mysql忘记了密码、允许远程连接、mysql卸载 -- linux
- Autocad中批量调整增强属性块中的元素的位置
- html特殊符号的表示
- t420i升级固态硬盘提升_老电脑想升级,如何选购最适合的固态硬盘
- 孩子的编程启蒙好伙伴,自己动手打造小世界,长毛象教育AI百变编程积木套件上手
- Git详解之一 Git起步
- 【离散数学】最大元素、最小元素、极大元素、极小元素、上界、下界、最小上界(上确界)、最大下界(下确界)
- SCM:新一代存储介质技术
- uoj 36 玛里苟斯
- 篮球大师显示连接服务器,nba篮球大师能和好友联机打吗 能自己操作吗
- LabwindowsCVI 串口编程及事例
- fluent并行 linux_Fluent17.2在基于Linux下PC集群的并行计算.pdf
- 代购系统、代购源码、代购程序、电商API、淘宝API开发
- 关于机械臂的模仿学习
热门文章
- 嵌入式驱动开发遇到version magic不匹配解决办法
- c#调用摄像头进行二维码扫码
- 星之卡比镜之迷宫机器人_星之卡比镜之迷宫boss全方位攻略
- 【bzoj4011】【HNOI2015】落忆枫音【树形DP】
- 国外资源 - 含技术 - 收集
- 如何快速注册一个谷歌gmail邮箱(2021)
- 一个Layered Window从支持多屏到高DPI开始,遭遇的性能雪崩及其优化历程
- java定时器定时发短信_quartz-job实现实时或定时发送短信任务(示例代码)
- C# 高并发场景下 共享内存 Actor并发模型到底哪个快?
- URL 长链地址转短链 URL地址