Django template engine syntax: {%extend %}

這或許是一個難懂的概念, 每次要用到時都要一番工夫才弄懂, 決定這次要把它記下來

直接看範例:

這是 base.html


<!DOCTYPE HTML>
<html>
    <head>
      <meta charset="UTF-8">
      <title>{% block title %}Tagtoo{% endblock %}</title>
     {% block css %}
      <link rel="stylesheet" href="/media/css/jquery-ui-1.8.16.custom.css" type="text/css"/>
      <link rel="stylesheet" href="/media/css/style.css" type="text/css"/>
      {% block css_extends %}
      {% endblock %}
      {% endblock %}
      {% block javascript %}
      <script type="text/javascript" src="/media/js/jquery-1.6.2.min.js"></script>
      <script type="text/javascript" src="/media/js/jquery-ui-1.8.16.custom.min.js"></script>
      {% block javascript_extends %}
      {% endblock %}
      {% endblock %}
    </head>
    <body>
      <div id="wrapper">
      {% include "_banner.html" %}
      {% block content %}      {% endblock %}
      {% include "_footer.html" %}
      </div>
    </body>
</html>

------------------------------------------------------------------

{% include %} 因為相對比較直觀, 所以我們不在此討論

接下來這是 report.html, 基於base.html 去延伸

<!-- 先宣告要基於哪個模板去延伸 -->

{% extends "base.html" %}

<!-- 以下被 {% block content %}{% endblock %} 中的內容會去填入base.html 裡面的 {% block content %}{% endblock %} 裡 -->


{% block content %}
<div id="options">
{% block option %}
{% endblock %}
</div>
<div id="report">
{% block report %}
{% endblock %}
</div>
{% endblock %}


------------------------------------------------------------------
<!-- 先宣告要基於哪個模板去延伸 -->

{% extends "report.html" %}

<!-- 去填入 report.html 裡 {% block javascript_extends %} 的內容, 發現沒有的話, 再往上層追溯, 最後會追溯到base.html -->


{% block javascript_extends %}
<script type="text/javascript" src="/media/js/tagtoo_report.js"></script>
<script type="text/javascript" src="/media/js/mycover_trans.js"></script>
<script type="text/javascript">

var projects = eval('{{ projects }}');

(function($) {
  var cur_opts = {};
  ......
})(jQuery);
</script>
{% endblock %}

<!-- 去填入 report.html 裡 {% block option %} 的內容-->


{% block option %}
專案:
<select id="opt_project">
  <option value="">--------</option>
</select>
開始時間:
<input id="opt_start_date" type="text" value=""></input>
結束時間:
<input id="opt_end_date" type="text" value=""></input>
<br>
<div id="query_pane">
<input id="submit" type="button" value="查詢"></input>
</div>
{% endblock %}

<!-- 去填入 report.html 裡 {% block report %} 的內容-->


{% block report %}
<div style="text-align:center">
<h3 id="title">Title</h3>
總瀏覽頁次: <span id="total_page_views">0</span>
初次造訪時間: <span id="first_visit"></span>
最後造訪時間: <span id="last_visit"></span>
</div>
<br>
<div>
<table id="data">
<tr>
<th style="min-width:120px">使用者</th>
<th style="min-width:120px">Cookie</th>
<th style="min-width:120px">事件</th>
<th style="min-width:160px">時間</th>
</tr>
</table>
<div style="text-align:center" id="page_index"></div>
</div>
<br>
{% endblock %}




結論：對於要延展的子template 而言, 只要第一行先宣告自己要extend 哪個template, 接著就只要在內容裡面填上要填入的部分(由block id 去指定要填入母template 的哪個區塊), 例如:
{% block content %}
  Hello, world!
{% endblock %}

其中 "Hello, world"  就會填入母template 的 {% block content %}{% endblock %} 裡面

留言

張貼留言

熱門文章