08.Django自定義模板，自定義標籤和自定義過濾器

Thinkgamer_gyt發表於2016-03-31
Django過濾器

一：自定義模板

模板繼承我們可以簡單的理解為類的繼承，其實他們有很大的相似之處，定義一個基類别範本，我們便可以在子頁面中進行引用,django中模板中的塊用block進行標示，他屬於django自定義的tag

例如：我們定義了一個基類的模板base.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description " content="Thinkgamer 部落格" />
    <meta name="keywords" content="Thinkgamer 部落格" />
    <title>{% block title %}{% endblock %}</title>
    <link type="text/css" rel="stylesheet" href="/static/css/base_css/base_logre.css" />
</head>
<body>
    <script language="JavaScript">
        {% if error %}
            alert("{{ error }}");
        {% endif %}
    </script>

    <a class="logo" href="/"><img src="/static/image/login.png" /></a>
    <h2 class="lrr-sub">CYANSCIKIT</h2>

    {%  block container%}
    {% endblock %}

    <div class="hmc-copyright"> Copyright 2014-2015  |  版本1.0 |  Made By CyanScikit </div>
</body>
</html>
login.html 繼承base模板 

{% extends "base_logre.html" %}

{% block title %}
歡迎登陸CyanScikit科技網站
{% endblock %}
{% block container %}
<div class="reg-log-main login">
        <div class="rlm_content">
            <form action="" method="post">
                <div class="rlmcl_content phone">
                    <input type="text" name="account"  id="user" placeholder="使用者名稱" />
                </div>
                <div class="rlmcl_content pwd">
                    <input type="password" name="password"  id="pwd" placeholder="密碼" />
                </div>
                <p>
                    <input type="radio" name="check" />記住密碼
                </p>
                <div class="log_reset">
                    <button class="btn" id="enterlogin" onClick="check()">登　錄</button>
                    <span>
                        <a style="float:left;cursor:pointer" href="/index/index" >隨便看看<i></i></a>
                        <a style="float:right;cursor:pointer" href="/logre/regeister">新手註冊<i></i></a>
                    </span>
                </div>
            </form>
        </div>
    </div>
{% endblock %}
regeister.html 繼承base.html 

{% extends "base_logre.html" %}

    {% block container %}
    <div class="reg-log-main regist">
        <form action="" method="post">
            <div class="rlm_content">
                <div class="rlmcl_content phone">
                    <input type="text" name="name" id="user" placeholder="使用者名稱" />
                </div>
                <div class="rlmcl_content pwd">
                    <input type="password" id="password" name="pwd" placeholder="密碼" />
                </div>
                <div class="log_reset">
                    <button class="btn" id="enterlogin">注  冊</button>
                    <span>
                        <a style="float:left;cursor:pointer" href="/index/index" target="_blank">隨便看看<i></i></a>
                        <a style="float:right;cursor:pointer" href="/logre/login" >賬戶登入<i></i></a>
                    </span>
                </div>
            </div>
        </form>
    </div>
    {% endblock %}

效果圖如下：



二：自定義標籤

其實前邊已經提到了django的標籤功能，django自身提供了許多標籤，例如if, for, block.....但這並不能滿足我們實際開發中的需求，幸好django支援自定義標籤，下面我們拿個例子來詳細說一下

比如我們要定義一個upper的標籤，其作用是將字串全部轉換為大寫

首先在你要載入這個tag的app中新建一個Python Package，建立一個upper.py

#coding:utf-8
from django import template

register = template.Library()

class upperNode(template.Node):
    def __init__(self,nodelist):
        self.nodelist = nodelist

    def render(self, context):
        content = self.nodelist.render(context)
        return content.upper()

@register.tag
def upper(parser,token):
    nodelist = parser.parse("endupper") #指定結束符
    parser.delete_first_token()

    return upperNode(nodelist)

我是在logre的模組下建立的，然後在login.html中載入：

{% load  upper %}
{% upper %}
    這是我自定義的標籤{{ test }}
{% endupper %}
login函式傳參如下： 

return render_to_response("logre/login.html", {"test":"test",})
前端顯示如下：


其他更加有趣的tag還請大家自己動手實現

三：自定義過濾器

自定義過濾器其實和自定義標籤是很相似的，其目的都是為了使顯示達到自己想要的內容或者格式
建立 assets.py，和二中tag在同一目錄下，其作用是在全域性變數的變動下載入不同的css
首先在settings.py檔案中 設定一個變數  IS_DEVELOP=True,作用是當問true時載入測試的css，False時載入正常用的css

asserts.py:
#coding:utf-8

from django import template

from my_blog.settings import IS_DEVELOP

register = template.Library()

@register.filter
def assets(value):
    if IS_DEVELOP:
        return "/static/css/test.css"
    return "/static/css/base_css/base_logre.css"

在base.html中做如下修改
{% load assets %}
<link type="text/css" rel="stylesheet" href="{{ '/static/css/base_css/base_logre.css | assets' }}" />

這邊這個圖是IS_DEVELOP為True時的情況：

css連結為： <link type="text/css" rel="stylesheet" src="/static/css/test.css" />

下面是IS_DEVELOP為false時：

css連結： <link type="text/css" rel="stylesheet" src="/static/css/base_css/base_logre.css" />

哈哈，又恢復正常了吧

相關文章