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 %}
Articles for {{ year }}
{% for article in article_list %}
{{ article.headline }}
By {{ article.reporter.full_name }}
Published {{ article.pub_date|date:"F j, Y" }}
{% endfor %}
{% endblock %}

      如果你有一个大的架子，各个网页都用这个架子，只是小部分内容有差异，那就直接定义一个base.html。在里面定义好通用的部分，至于差异性的东西，用{% block name %}来预留槽位。在子模板中，需要重写某个块的内容，用{% block name} {% endblock %}包围你想要自定义的内容即可。

      所以，这样下来就很方便，很dry，很先进了。。。就点到这里了。。。。：）

      Do not repeat yourself !