Django模板語言中的自定義方法filter過濾器實現web網頁的瀑布流


模板語言自定義方法介紹

自定義方法注意事項

Django中有simple_tag 和 filter 兩種自定義方法,之前也提到過,需要注意的是

  1. 擴展目錄名稱必須是templatetags
  2. templatetags中的自定義標簽和過濾器必須依賴於一個django app,也就是說,自定義標簽和過濾器是綁定app的。該app應該包含一個templatetags目錄,這個目錄一個和model.py,views.py在同一個層級
  3. 包含templatetags目錄的app一定要在INSTALLED_APPS列表里面
  4. 在頁面中使用{% load %}加載擴展方法,load的是模塊名,而不是app名
  5. 記得使用 from django import template ,register=template.Library()注冊

simple_tag 和 filter 的區別

  • simple_tag:可以有多個參數,一般是做數據處理,但不能做if判斷語句
  • filter:一般只能有1個參數(可以字符串切割,變通為多個參數),過濾器,一般是return true或者false,可以和if判斷語句使用.在過濾器 {{ var|foo:"bar" }} 中 ,過濾器 foo 會被傳入變量 var 和默認參數 bar。過濾器函數應該總有返回值

使用方法

目錄結構

目錄結構

xx.py代碼:

#需要從django中導入一些模塊
from django import template
from django.utils.safestring import mark_safe
from django.template.base import resolve_variable, Node, TemplateSyntaxError

register = template.Library()

@register.filter
def detail1(value,arg):

    """
    查看余數是否等於remainder arg="1,2"
    :param counter:
    :param allcount:
    :param remainder:
    :return:
    """
    allcount, remainder = arg.split(',')
    allcount = int(allcount)
    remainder = int(remainder)
    if value%allcount == remainder:
        return True
    return False

@register.simple_tag
def my_simple_time(v1,v2,v3):
    return  v1 + v2 + v3

simple_tag 頁面使用

{% load xx %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
{% my_simple_time 1 2 3 %}
 
</body>
</html>

filter 頁面使用

{% load xx %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
{{  23|detail4:"4,0" }}
 
{% if  23|detail4:"4,0" %}
<h1>123</h1>
{% endif %}
 
</body>
</html>

頁面實現瀑布流

布局介紹

由於圖片有大有小,所以為了頁面的整齊,沒有空隙,可以將頁面body主體分為4列,每一列依次往下排列圖片和介紹即可.

由於頁面是從左到右排序的,所以我們可以將圖片的列隊索引+1后除以4后得到的余數,就是所在頁面中所在的列數,所以可以使用python中的div()函數來處理.

代碼

擴展方法代碼:xx.py 文件

from django import template
from django.utils.safestring import mark_safe
from django.template.base import resolve_variable, Node, TemplateSyntaxError

register = template.Library()

@register.filter
def detail1(value,arg):

    """
    查看余數是否等於remainder arg="1,2"
    :param counter:
    :param allcount:
    :param remainder:
    :return:
    """
    allcount, remainder = arg.split(',')
    allcount = int(allcount)
    remainder = int(remainder)
    if value%allcount == remainder:
        return True
    return False

views.py范例

from django.shortcuts import render

# Create your views here.

def student(request):
    img_list = [
        {'src': '1.jpg', 'title': 'asdfasdfasdf','content': 'asdf'},# 1
        {'src': '2.jpg', 'title': 'asdfasdfasdf','content': 'asdf'},# 2
        {'src': '3.jpg', 'title': 'asdfasdfasdf','content': 'asdf'},
        {'src': '4.jpg', 'title': 'asdfasdfasdf','content': 'asdf'},
        {'src': '18.jpg', 'title': 'asdfasdfasdf','content': 'asdf'},# 5
        {'src': '21.jpg', 'title': 'asdfasdfasdf','content': 'asdf'},
    ]

    return render(request, 'student.html', {"img_list":img_list})

html頁面代碼

{% load xx %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .container{
            width: 980px;
            margin: 0 auto;
        }
        .container .column{
            float: left;
            width: 245px;
        }
        .container .item img{
            width: 245px;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="column">
            {% for i in img_list %}
                {% if forloop.counter|detail1:"4,1" %}
                    <div class="item">
                        {{ forloop.counter }}
                        <img src="/static/{{ i.src }}">
                    </div>
                {% endif %}
            {% endfor %}
        </div>
        <div class="column">
            {% for i in img_list %}
                {% if forloop.counter|detail1:"4,2" %}
                    <div class="item">
                        {{ forloop.counter }}
                        <img src="/static/{{ i.src }}">
                    </div>
                {% endif %}
            {% endfor %}
        </div>
        <div class="column">
            {% for i in img_list %}
                {% if forloop.counter|detail1:"4,3" %}
                    <div class="item">
                        {{ forloop.counter }}
                        <img src="/static/{{ i.src }}">
                    </div>
                {% endif %}
            {% endfor %}
        </div>
        <div class="column">
            {% for i in img_list %}
                {% if forloop.counter|detail1:"4,0" %}
                    <div class="item">
                        {{ forloop.counter }}
                        <img src="/static/{{ i.src }}">
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    </div>

</body>
</html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM