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>

转载于:https://www.cnblogs.com/zxmbky/p/9769153.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/279209.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

dsp怪胎_2012年6月最佳怪胎文章

dsp怪胎This past month we covered topics such as why you only have to wipe a disk once to erase it, what RSS is and how you can benefit from using it, how websites are tracking you online, and more. Join us as we look back at the best articles for June. 在…

如何在Ubuntu上查看和写入系统日志文件

Linux logs a large amount of events to the disk, where they’re mostly stored in the /var/log directory in plain text. Most log entries go through the system logging daemon, syslogd, and are written to the system log. Linux将大量事件记录到磁盘上&#xff0c…

向Ubuntu提供反馈的5种方法

Ubuntu, like many other Linux distributions, is a community-developed operating system. In addition to getting involved and submitting patches, there are a variety of ways you can provide useful feedback and suggest features to Ubuntu. 与许多其他Linux发行版…

Tomcat 发布项目 conf/Catalina/localhost 配置 及数据源配置

本文介绍通过在tomcat的conf/Catalina/localhost目录下添加配置文件&#xff0c;来发布项目。因为这样对 tomcat 的入侵性最小&#xff0c;只需要新增一个配置文件&#xff0c;不需要修改原有配置&#xff1b;而且支持动态解析&#xff0c;修改完代码直接生效(修改配置除外)。在…

Centos7 中文乱码

1. 安装中文库 yum groupinstall "fonts" 2. 检查是否有中文语言包 locale -a 3. 查看当前系统语言环境 locale 解析如下 LANG:当前系统的语言LC_CTYPE&#xff1a;语言符号及其分类LC_NUMERIC&#xff1a;数字LC_COLLATE&#xff1a;比较和排序习惯LC_TIME&#xff…

chrome自动退出的原因_Chrome 70将让用户选择退出新的自动登录功能

chrome自动退出的原因An upcoming Chrome option allows users to log into Google accounts without logging into the browser. The change was prompted by a backlash among users and privacy advocates. 即将推出的Chrome选项允许用户无需登录浏览器即可登录Google帐户。…

学习笔记DL007:Moore-Penrose伪逆,迹运算,行列式,主成分分析PCA

2019独角兽企业重金招聘Python工程师标准>>> Moore-Penrose伪逆(pseudoinverse)。 非方矩阵&#xff0c;逆矩阵没有定义。矩阵A的左逆B求解线性方程Axy。两边左乘左逆B&#xff0c;xBy。可能无法设计唯一映射将A映射到B。矩阵A行数大于列数&#xff0c;方程无解。矩…

mysql40题_mysql40题

一、表关系请创建如下表&#xff0c;并创建相关约束导入现有数据库数据&#xff1a;/*Navicat Premium Data TransferSource Server : localhostSource Server Type : MySQLSource Server Version :50624Source Host : localhostSource Database : sqlexamTarget Server Type :…

ubuntu取消主目录加密_如何在Ubuntu上恢复加密的主目录

ubuntu取消主目录加密Access an encrypted home directory when you’re not logged in – say, from a live CD – and all you’ll see is a README file. You’ll need a terminal command to recover your encrypted files. 当您未登录时(例如&#xff0c;从实时CD)访问加密…

python数据结构与算法第六讲_Python 学习 -- 数据结构与算法 (六)

栈 是一种 “操作受限”的线性表&#xff0c;只允许在一端插入和删除数据。从功能是上来说&#xff0c;数组和链表确实可以替代栈&#xff0c;但是特定的数据结构是对特定场景的抽象&#xff0c;而且&#xff0c;数组或链表暴露了太多的操作接口&#xff0c;操作上的确灵活自由…

spring-springmvc code-based

idea设置maven在下载依赖的同时把对应的源码下载过来。图0&#xff1a;1主要实现零配置来完成springMVC环境搭建&#xff0c;当然现在有了springBoot也是零配置&#xff0c;但是很多同仁都是从spring3.x中的springMVC直接过渡到springBoot的&#xff0c;spring3.x的MVC大部分都…

powershell 入门_使用PowerShell入门的5个Cmdlet

powershell 入门PowerShell is quickly becoming the preferred scripting language and CLI of Power Users as well as IT Pros. It’s well worth learning a few commands to get you started, so we’ve got 5 useful cmdlets for you to learn today. PowerShellSwift成为…

Part 3: Services

介绍 在第3部分中&#xff0c;我们将扩展应用程序并启用负载平衡。为此&#xff0c;我们必须在分布式应用程序的层次结构中提升一个级别:服务。 StackServices (你在这里)Container (涵盖在第2部分中)关于服务 在分布式应用程序中&#xff0c;应用程序的不同部分被称为“服务”…

diy感应usb摄像头拍照_DIY无线感应充电器

diy感应usb摄像头拍照Courtesy of Instructables user Inducktion shares a very detailed tutorial on how to build a wireless power charger. He explains the impetus behind the project: 由Instructables用户提供Inducktion分享了有关如何构建无线电源充电器的非常详细…

常用模块之 time,datetime,random,os,sys

time与datetime模块 先认识几个python中关于时间的名词&#xff1a; 时间戳(timestamp)&#xff1a;通常来说&#xff0c;时间戳表示的是从1970年1月1日00:00:00开始按秒计算的偏移量。我们运行“type(time.time())”&#xff0c;返回的是float类型。1970年之前的日期无法以此表…

使用aSpotCat控制您的Android应用权限

Viewing the permissions of each installed Android app requires digging through the Manage Applications screen and examining each app one by one — or does it? aSpotCat takes an inventory of the apps on your system and the permissions they require. 要查看每…

xtrabackup备份mysql“ib_logfile0 is of different”错误分析

今天用xtrabackup工具完整备份mysql数据库的时候出现“./ib_logfile0 is of different”错误&#xff0c;具体的日志信息如下: 我第一时间查询了百度和谷歌都没有找见相对应的答案。决定从错误日志入手&#xff0c;上面的日志提示说&#xff1a;mysql数据库inondb的日志文件的大…

如何使自己的不和谐机器人

Discord has an excellent API for writing custom bots, and a very active bot community. Today we’ll take a look at how to get started making your own. Discord具有出色的用于编写自定义机器人的API&#xff0c;以及非常活跃的机器人社区。 今天&#xff0c;我们将探…

​css3属性选择器总结

css3属性选择器总结 &#xff08;1&#xff09;E[attr]只使用属性名&#xff0c;但没有确定任何属性值 <p miaov"a1">111111</p> <p miaov"a2">111111</p> p[miaov]{background: red;} /*所有属性为miaov的元素都会被背景变红&a…

程序代码初学者_初学者:如何使用热键在Windows中启动任何程序

程序代码初学者Assigning shortcut keys to launch programs in Windows is probably one of the oldest geek tricks in the book, but in true geek fashion we are going to show you how to do it in Windows 8. 分配快捷键以在Windows中启动程序可能是本书中最古老的怪胎技…