模版语言 实现瀑布流页面

模板

1、模版的执行

模版的创建过程,对于模版,其实就是读取模版(其中嵌套着模版标签),然后将 Model 中获取的数据插入到模版中,最后将信息返回给用户。

def current_datetime(request):
    now = datetime.datetime.now()
    html = "<html><body>It is now %s.</body></html>" % now
    return HttpResponse(html)

from django import template
t = template.Template(‘My name is {{ name }}.‘)
c = template.Context({‘name‘: ‘Adrian‘})
print t.render(c)

import datetime
from django import template
import DjangoDemo.settings

now = datetime.datetime.now()
fp = open(settings.BASE_DIR+‘/templates/Home/Index.html‘)
t = template.Template(fp.read())
fp.close()
html = t.render(template.Context({‘current_date‘: now}))
return HttpResponse(html

from django.template.loader import get_template
from django.template import Context
from django.http import HttpResponse
import datetime

def current_datetime(request):
    now = datetime.datetime.now()
    t = get_template(‘current_datetime.html‘)
    html = t.render(Context({‘current_date‘: now}))
    return HttpResponse(html)

return render_to_response(‘Account/Login.html‘,data,context_instance=RequestContext(request))

2、模版语言

 模板中也有自己的语言,该语言可以实现数据展示

  • {{ item }}
  • {% for item in item_list %}  <a>{{ item }}</a>  {% endfor %}
      forloop.counter
      forloop.first
      forloop.last
  • {% if ordered_warranty %}  {% else %} {% endif %}
  • 母板:{% block title %}{% endblock %}
    子板:{% extends "base.html" %}
       {% block title %}{% endblock %}
  • 帮助方法:
    {{ item.event_start|date:"Y-m-d H:i:s"}}
    {{ bio|truncatewords:"30" }}
    {{ my_list|first|upper }}
    {{ name|lower }}

3、自定义simple_tag

a、在app中创建templatetags模块

b、创建任意 .py 文件,如:xx.py

+ ?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

#!/usr/bin/env python

#coding:utf-8

from django import template

from django.utils.safestring import mark_safe

  

register = template.Library()

  

@register.simple_tag

def my_simple_time(v1,v2,v3):

    return  v1 + v2 + v3

  

@register.simple_tag

def my_input(id,arg):

    result = "<input type=‘text‘ id=‘%s‘ class=‘%s‘ />" %(id,arg,)

    return mark_safe(result)

c、在使用自定义simple_tag的html文件中导入之前创建的 xx.py 文件名

?


1

{% load xx %}

d、使用simple_tag

?


1

2

{% my_simple_time 1 2 3%}

{% my_input ‘id_username‘ ‘hide‘%}

e、在settings中配置当前app,不然django无法找到自定义的simple_tag  

+ ?


1

2

3

4

5

6

7

8

9

INSTALLED_APPS = (

    ‘django.contrib.admin‘,

    ‘django.contrib.auth‘,

    ‘django.contrib.contenttypes‘,

    ‘django.contrib.sessions‘,

    ‘django.contrib.messages‘,

    ‘django.contrib.staticfiles‘,

    ‘app01‘,

)

更多见文档:https://docs.djangoproject.com/en/1.10/ref/templates/language/

views.py

 1 import json
 2 from django.shortcuts import render,HttpResponse
 3 from app01 import models
 4 # Create your views here.
 5 def index(request):
 6     # models.BxSlider.objects.filter(status=1) 对象
 7     queryset_dict = models.BxSlider.objects.filter(status=1).values(‘img‘,‘href‘,‘name‘)
 8     # queryset_list = models.BxSlider.objects.filter(status=1).values_list(‘img‘,‘href‘,‘name‘)
 9     return render(request,‘index.html‘, {‘queryset_dict‘: queryset_dict})
10
11 def student(request):
12
13     # student
14     # studentDetail
15     detail_list = models.StudentDetail.objects.filter(student__status=1).values(‘letter_of_thanks‘,"student__name","student__salary",‘student__company‘, ‘student__pic‘)
16     print(detail_list)
17     return render(request,‘student.html‘, {‘detail_list‘: detail_list})

student.html

 1 {% load xx %}
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <style>
 8         .clearfix:after{
 9             content: ‘.‘;
10             visibility: hidden;
11             height: 0;
12             clear: both;
13             display: block;
14         }
15     </style>
16 </head>
17 <body>
18
19     <div>
20
21     </div>
22
23
24     <div style="margin: 0 auto;width: 980px;" class="clearfix">
25         <div style="width: 245px;float: left">
26             {% for item in detail_list %}
27
28                 {% detail1 item forloop.counter 4 1 %}
29
30             {% endfor %}
31         </div>
32         <div style="width: 245px;float: left">
33             {% for item in detail_list %}
34                 {% detail1 item forloop.counter 4 2 %}
35             {% endfor %}
36         </div>
37         <div style="width: 245px;float: left">
38             {% for item in detail_list %}
39                 {% detail1 item forloop.counter 4 3 %}
40             {% endfor %}
41
42         </div>
43 {#        {{  forloop.counter|detail3 }}#}
44         <div style="width: 245px;float: left">
45              {% for item in detail_list %}
46                  {% if forloop.counter|detail3:"4,0" %}
47                     <div style="width: 245px;">
48                         <img style="width: 245px;height: 200px;" src="/{{ item.student__pic }}">
49                         <p>{{ item.student__name }}</p>
50                         <p>{{ item.student__salary }}</p>
51                         <p>{{ item.letter_of_thanks }}</p>
52                     </div>
53                  {% endif %}
54
55             {% endfor %}
56
57         </div>
58     </div>
59
60 </body>
61 </html>

xx.py

 1 #!/usr/bin/env python
 2 # -*- coding:utf-8 -*-
 3 from django import template
 4 from django.utils.safestring import mark_safe
 5 from django.template.base import Node, TemplateSyntaxError
 6
 7 register = template.Library()
 8
 9 @register.simple_tag
10 def my_simple_time(v1,v2,v3):
11     return  v1 + v2 + v3
12
13 @register.simple_tag
14 def detail1(item,counter,allcount,remainder):
15     temp = """
16         <div style="width: 245px;">
17             <img style="width: 245px;height: 200px;" src="/%s">
18             <p>%s</p>
19             <p>%s</p>
20             <p>%s</p>
21         </div>
22         """
23     if counter%allcount == remainder:
24         temp = temp %(item[‘student__pic‘],
25                       item[‘student__name‘],
26                       item[‘student__salary‘],
27                       item[‘letter_of_thanks‘])
28         return mark_safe(temp)
29     else:
30         return ""
31
32 @register.simple_tag
33 def detail2(counter,allcount,remainder):
34     """
35     查看余数是否等于remainder
36     :param counter:
37     :param allcount:
38     :param remainder:
39     :return:
40     """
41     if counter%allcount == remainder:
42         return True
43     return False
44
45 @register.filter
46 def detail3(value,arg):
47
48     """
49     查看余数是否等于remainder arg="1,2"
50     :param counter:
51     :param allcount:
52     :param remainder:
53     :return:
54     """
55     allcount, remainder = arg.split(‘,‘)
56     allcount = int(allcount)
57     remainder = int(remainder)
58     if value%allcount == remainder:
59         return True
60     return False
时间: 2024-08-09 08:32:25

模版语言 实现瀑布流页面的相关文章

瀑布流页面效果

瀑布流页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流布局</title> <script src="./jquery.js"> </script> <style> #all{ position: relative; } .box{ fl

JQuery实现瀑布流页面

views.py 1 from django.shortcuts import render,HttpResponse 2 from app01 import models 3 import json 4 # Create your views here. 5 def index(req): 6 if req.method == 'POST': 7 dic = models.Upload.objects.filter(status=1).values('img1','name','info')

iOS开发-UICollectionView实现瀑布流

关于瀑布流的实现网上有很多种解法,自定义控件,TableView+ScrollView,UICollectionView是iOS6发布之后用于展示集合视图,算起来已经发布三年左右了,不过知识点是不变的,集合视图提供了一个更优雅的方式去展示图片或者文字信息.UICollectionView与UITableView相似,UICollectionViewController与UITableViewController都负责视图,存储需要的数据,并且能处理数据源与委托协议. 简单瀑布流 首先来看一个简单

产品三俗:瀑布流、动态流、奖章

有三种流行的产品要素“瀑布流.动态流.奖章”,我称之为产品三俗,容易因其流行而被滥用.PM选择它们有可能是因为“时髦”“标配”“别人都在用”,这很糟糕.恰好动态流和奖章我都折腾过,多多少少吃过一点亏,总结如下.云鼎娱乐城 瀑布流 瀑布流的鼻祖是Pinterest,Pinterest的用户97.9%是女性.有种说法是,洋妞们从小就有收集剪报的习惯,Pinterest将这个习惯移植到了网络上,故快速引爆流行.听上去挺有道理. 从交互角度来分析,瀑布流最大的好处有两个,第一是提高了“发现好图”的效率,

瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据

瀑布流加载显示数据,在当下已经用的很普遍,尤其是我们在做网上商城时,在产品列表页面已经被普遍使用. 对于实现瀑布流布局的解决方案主要有以下两种方式: 1.对每一条显示数据使用绝对定位+浮动的方式,这样也会有一个问题----必须要知道每一条信息的具体高宽度 2.采用列布局,将每一条数据依次放置到每一列 其实两者的实现原理都是大同小异,现在我将针对第二种解决方案,用一个具体的事例来说明 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 2

iOS运营级B2B服务平台App、自定义图标库、个人中心页面、识别身份证Demo、瀑布流等源码

iOS精选源码 简单的个人中心页面-自定义导航栏并予以渐变动画 一个近乎完整的可识别中国身份证信息的Demo 可自动快速... iOS可自定义图表库 - PNChart 开源一款曾是运营级的B2B服务平台APP<云采> 使用ffmpeg解码最简iOS播放器 注释得非常清楚的瀑布流,和自己的一些想法 iOS日志框架学习分享 在iOS App中录制MP3和AMR:ZWAudioRecordTool 一套应用于swift项目的空白页组件EmptyPage 2.0 扫雷简单实现 iOS优质博客 iOS

1、网页后退 2、瀑布流 3、上下左右的阿斯科码值 4、加密技术

1.网页后退 /前进  <a href="javascript:history.go(-1);">后退</a><a href="javascript:history.go(1);">前进</a> 2.瀑布流              瀑布流是目前一种比较流行的页面布局和加载效果.百度,花瓣等一些好的网站都广泛用了这样一种效果,适用于单页面展示对内容的页面.这几天就跟着一些资料学习了一下瀑布流效果的制作.其原理是利用js

Wookmark-jQuery-master 瀑布流插件使用介绍,含个人测试DEMO

要求 必备知识 本文要求基本了解 Html/CSS,  JavaScript/JQuery. 开发环境 Dreamweaver CS6 / Chrome浏览器 演示地址 演示地址 资料下载 测试预览截图(抬抬你的鼠标就可以看到演示地址哦): 程序核心代码看这里: $(function(){ function show(){ var colors=["#BA4A3A","#5BB5D6","#8EA83B","#EE5C92",

android炫酷动画源码,QQ菜单、瀑布流、二维码源码

Android精选源码 自定义弹框封装,ProgressDialog,StatusDialog和Toast,支持自定义颜色 有深度感的fragment代码 在屏幕顶部或者底部显示提示 短信转发工具,自动转发短信到手机或邮箱 美观的菜单隐藏在主界面底部的抽屉导航. 仿QQ菜单.瀑布流.数据库.二维码生成 andorid实现"划词翻译"功能的项目 android界面切换的效果,输入文字时背景图缩放效果 android一款很炫的动画代码 Android雷达扫描图,超高仿QQ附近的人 Andr