X

Google App Engine 初學(8) - 共用 Template (Layout)

網頁通常會將頭、尾拆開, 然後每頁分別 include 進來, 版面就會一致.

那 GAE 的方式是用一個標準 Template, 然後再分別將此 Template 的變數區塊塞入內容.

GAE Template Layout 使用方式

  1. vim layout.html # template


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>{% block title %}Test layout{% endblock %}</title>
    </head>
    <body class="yui-skin-sam">
        <div id="header">{% block header %}{% endblock %}</div>
        <div id="body">
            <div id="sidebar">{% block sidebar %}{% endblock %}</div>
            <div id="content">{% block content %}{% endblock %}</div>
        </div>
        </div id="footer">{% block footer %}{% endblock %}</div>
    </body>
    </html>

  2. 於 content({% block content %}{% endblock %}) 區塊塞入內容.


    {% extens "layout.html" %}
    {% block content %}
        This is content.
    {% endblock %}

Template 使用方式、種類

  • 變數 {{ }} ex: {{ name|lower }}
  • 標籤 {% %} ex: {% for x in list %} {% endfor %}
  • 註解 {# #}
  • openblock, closeblock => {%, %}
  • openvariable , closevariable => {{, }}
  • openbrace, closebrace => {, }
  • opencomment, closecomment => {#, #}

Template 常用方法

{{ }} 系列
  • {{ salary | add:1000 }} # 加 1000
  • {{ foo | addslashes }} # ', " => \', \"
  • {{ created | date:"Y-m-d H:i:s" }}
  • {{ title | default:"default-value" }} # title = null, 秀出 default-value
  • {{ foo | escape }} # htmlspecialchars
  • {{ foo | fix_ampersands }} # & => &amp;
  • {{ str_list | join }} # ["A", "B"] => AB
  • {{ str_list | length }} # ["A", "B"] => 2
  • {{ foo | linebreaks }} # \n => <p> 或 <br/>
  • {{ foo | linebreaksbr }} # \n => <br/>
  • {{ foo | removetags:"a img" }} # 將<a>, <img> 這些 html 移除
  • {{ foo | striptags }} # 將 HTML Tag 全部移除
  • {{ foo | timesince:someday }} # 已經過多久, posted = datetime.date(2009, 4,10), someday = datetime.date(2009, 4, 1) => 1week, 2 days
  • {{ foo | timeutil }} # 時間計算與 timesince 相反 => 10 days
  • {{ foo | truncatewords:2 }} # 將文字超過2個字的後面截掉, 秀出 "..."
  • {{ foo | truncatewords_html:2 }} # 同 truncatewords, 但是會略過 HTML Tag.
  • {{ foo | unordered_list }} # 將 list 的資料結構, 以 <ul><li>.. 排列出來.
  • {{ foo | urlencode }} # urlencode
  • {{ foo | urlize }} # 資料是 URL 格式, 就過濾出來並包上 <a> Tag
  • {{ foo | urlizetrunc }} # 同 urlize, 但是 <a>...</a> 中間的文字過長的會變 "..."
  • {{ foo | wordwrap:5 }} # 英文連續幾個字元, 強迫換行.
  • {{ foo | yesno:"yeah, no, maybe" }} # True / False / None => yeah, no, maybe
{% %} 系列
  • {% extends %}
  • {% block %} {% endblock %}
  • {% comment %} {% endcomment %}
  • {% debug %}
  • {% filter %} {% endfilter %} # {% filter escape|lower %} ... {% endfilter %}, 包起來的字會被做 escape + lower
  • {% firstof %} {% firstof v1 v2 v3 %} # 秀出非 False 值
  • {% for item in list %} {% endfor %} # {% for item in the_list | dictsort:"age" %} {% endfor %} (dictsort => sort)
  • {% if data %} {% else %} {% endif %}
  • {% if data and data2 %} {% else %} {% endif %}
  • {% if not data %} {% else %} {% endif %}
  • {% ifchanged %} {% endifchanged %} # 在被 for 包起來的迴圈內, 此內容是否已經被改過.
  • {% ifequal user.name 'admin' %} {% endifequal %}
  • {% ifnotequal user.name 'admin' %} {% endifnotequal %}
  • {% include 'header.html' %}
  • {% now "Y-m-d H:i:s" %}
  • {% templatetag openblock %} {% templatetag closeblock %} # 若要輸出 {% %} .. 等 符號, 要用 templatetag 包起來.
Tsung: 對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.
Related Post