django全栈(二):django模板-从史前文明到现代文明

django全栈(二):django模板-从史前文明到现代文明

      原谅我第二篇就直接跳跃到了模板这里。。。因为按照正常的循序渐进的方式,应该先讲讲概念、整体结构、组件关系之类的。而这篇直接就到了专题。是的,就是专题。因为我觉得这个很重要,而且容易被忽视。而一旦被忽视,就会出现味道比较坏的代码,不符合dry原则的代码,这个是很不好的。所以,直接从这里说起。


  • 背景

      django渲染模板是一个html文件,里面可以加一些django的标记语言,然后django就可以自动往里面添加内容,如数据库某个表的某个域。

      既然前端用的是bootstrap,那么,我肯定需要引入bootstrap库啊,不论以本地文件的方式引用还是直接引用cdn的链接。都需要将资源对应的地址写进html文件里。这个地址一般有3-4个,分别js库,css库,jquery库,还有各个库是slim版本还是min版本等,整个设置也是挺长一个代码块的。如果我有10个html模板,那么我需要重复引入10个bootstrap的引用代码块。纯复制粘贴的话,这里似乎会有一片阴云。


  • 一个简单的需求如何实现

      所有的html模板都可以以简便的方式统一加载某些相同的html文件。

  • Brute Force方法

      直接复制粘贴。开始我也是这么干的。。。

  • html中的iframe

      用iframe来加载一个子网页,但是很难看,占槽位,而且很不正宗。。。

  • Javascript的ajax

      用一个ajax动态加载一个外部html文件的内容。。。代码好长,好笨。。。。

  • jQuery的load方法

      本质还是ajax。为什么这么说。:)jQuery就是封装的一个js库,二者的实现方式都只能通过服务器启动方式才能预览到网页内容。。。也就是说直接从本地打开一个html到浏览器中是显示不出来的。。。 

  • 让人怀念的php中的include

      php就很好,可以直接从外部文件加载footer之类的网页块。非常的方便。


  • 现代文明
  • django的include

    {% include 'section.html' %}

      直接一行代码就搞定了外部html文件的加载。所以,如果自定义了前端bootstrap的版本和引用链接块,全都放到一个html文件中,别的模板直接include这个文件就直接把其内容全部加载过来了。当然,如果直接使用django-bootstrap库的话,用load就可以加载相应的库。

{# Load the tag library #}
{% load bootstrap3 %}

{# Load CSS and JavaScript #}
{% bootstrap_css %}
{% bootstrap_javascript %}


  • 面向对象的模板--模板继承
{% extends "base.html" %}
{% block title %}Articles for {{ year }}{% endblock %}
{% block content %}
<h1>Articles for {{ year }}</h1>
{% for article in article_list %}
<p>{{ article.headline }}</p>
<p>By {{ article.reporter.full_name }}</p>
<p>Published {{ article.pub_date|date:"F j, Y" }}</p>
{% endfor %}
{% endblock %}
      如果你有一个大的架子,各个网页都用这个架子,只是小部分内容有差异,那就直接定义一个base.html。在里面定义好通用的部分,至于差异性的东西,用{% block name %}来预留槽位。在子模板中,需要重写某个块的内容,用{% block name} {% endblock %}包围你想要自定义的内容即可。


      所以,这样下来就很方便,很dry,很先进了。。。就点到这里了。。。。:)

      Do not repeat yourself !



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章