Flask强大的地方就可以引用模板,而且非常方便。

  这里不得不介绍block这个概念。

  模板的文件一般放在templates文件夹下,我们这里新建一个HTML文件,存放模板,'base.html'

  在这里面也,编排了整个页面的排版,里面会用到很多block的占位符

  每个block都代表一段html语句块,而这些块在哪里定义呢,可以在当前的base.html中定义,也可以在别的html中定义。反正要有一处定义,没有定义块只是没有效果而已

  定义的时候,home.html 顶部必须说明继承关系(如果py文件链接的是home.html,但home.html引用了base.html的模板,就要说明)

{% extends 'base.html' %}

  块的定义格式,endblock 后面块名可以省略,有时候加上会让结构更加明晰

{% block 块名 %}
块内容
{% endblock (块名)%}

  定义了块之后,base.html中对应的块,就会被这些块内容覆盖。

  • 块的覆盖情况

  有一种情况,base.html中定义了block B 块内容1,但是在home.html也定义block B 块内容2,注意这时会优先显示内容2,因为把内容1覆盖了。

理解起来,就是base.html是通用模板,我们可以直接引用过来,没有问题,但是也可以自定义块,修改通用模板的内容,达到我们想要的效果。

  还有一种情况,我们既不想不覆盖通用模板的内容,又想在其基础上,增加一些东西,这也是可以的。

  举个例子:在base.html

<footer>
{% block footer %}
<p>Posted:Bikmin</p>
<p>Contact with:<a href="someone@example.com">someone@example.com</a> </p>
{% endblock %}
</footer>

  如果我们不再自定义块,就会使用base.html通用模板的内容,效果如下

  

  觉得这个模板还行,不想覆盖,还想在这个基础上再添加些东西,想要上面添加一条水平线作为分隔符,该怎么做呢

  做法是,也是在home.html重新定义块,但是需要用到super()函数

{% block footer %}
<hr>
{{ super() }}
{% endblock %}

  {{ super() }} 就表示了通用模板里的内容

  在一个项目HTML中,块被定义多次,是会被覆盖的。

  有时候,我们想引用块的内容,又不想写一串很长的块内容,这时候可以用下面的语法,不管在哪个html文件里定义的都可以,只要有继承关系

{{ self.块名() }}

最新文章

  1. C# Exception 写入文件
  2. MySQL数据丢失讨论
  3. C++变量对比java变量所占内存
  4. paper 73 :HDR(High Dynamic Range Imaging)在摄影中指高动态范围成像
  5. NeHe OpenGL教程 第三十课:碰撞检测
  6. 关于 mvc 中 连字符 - 和下划线 _转换的问题。
  7. c#3位一分(money)
  8. js正则匹配查找
  9. VIM编辑命令的技巧
  10. [Q]将图纸转换为JPG、PNG、plt、DWF、DWFx,XPS等格式文件
  11. java中synchronized的使用
  12. sonar + jacoco + mockMvc 模拟session 用户登录 配合SpringSecurity 权限 快速测试代码覆盖率.
  13. Mongodb Mysql NoSQL的区别和联系
  14. 解题报告 『机器翻译(vector)』
  15. Maven打包相关插件集合
  16. MUI组件四:选择器、滚动条、单选框、区域滚动和轮播组件
  17. solr6.5.1搜索引擎的部署
  18. 实现Qemu aarch32虚拟开发板ping www.baidu.com
  19. centos安装Django之二:pip3安装
  20. eclipse 设置Java快捷键补全

热门文章

  1. maven阿里云镜像
  2. 【vim】按时间回退文本 :earlier 1m
  3. Win7 启动修复
  4. tomcat配置文件context.xml和server.xml分析
  5. 005_nginx414_nginx 414 Request-URI Too Large
  6. 基于MFC的ActiveX控件开发教程------------浏览器插件之ActiveX开发
  7. Java+Jmeter接口测试
  8. JQuery 插件一般方法
  9. java多线程快速入门(五)
  10. wpf 用户自定义事件传参2