模板Template

Posted zgf-666

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了模板Template相关的知识,希望对你有一定的参考价值。

模板语法:
html中有两种特殊的字符:{{ }}和 {% %}
变量相关的用{{}},逻辑相关的用{% %}
python的模板:HTML代码+模板语法

     变量{{name}}     

views

def template_test(request):
    l = [11, 22, 33]
    d = {"name": "alex"}
return render(request, "template_test.html", {"l": l, "d": d}

HTML

<div>{{l.0}}</div>  #11
<div>{{l.1}}</div>  #22
<div>{{d.name}}</div> #alex

       过滤器Filters    

语法: {{ value|filter_name:参数 }} ‘|‘左右没有空格

1.返回长度 {{ content1|length }}
2.文件大小 <p>文件大小:{{ file_size|filesizeformat }}</p>
以kB MB的形式显示 是 123456789,输出将会是 117.7 MB
3.slice切片
<p>切片:{{ name_list|slice:"1:-1" }}</p>
<p>切片:{{ name_dict.name3|slice:"1:-1" }}</p>
4.date 格式化
<p>时间格式化:{{ now|date:"Y-m-d H:i:s" }}</p>
需要在views中引入时间模块
from datetime import datetime
now = datetime.now()
5.safe
Django的模板中会对HTML标签和JS等语法标签进行自动转义。
1.链接:views中传给页面一个标签 a_html = "<a href=‘http://www.sogo.com‘>我是后端传过来的a标签</a>"
在页面接收:链接:{{ a.html }} 在页面上不显示这个链接  链接:<a href=http://www.sogo.com>我是后端传过来的a标签</a> 
需要加上safe,来告诉网页这是是安全的,才能显示出来   链接:我是后端传过来的a标签 
2.script
 script_html = "<script>for(var i=0;i<100;i++){alert(123);}</script>"
 {{ script_html|safe }} 会在一面上一直弹出确认框
6.truncatechars

截断的字符串将以可翻译的省略号序列("...")结尾
参数:截断的字符数 {{ content1|truncatechars:3}}

       标签{% tag %}   

1.在使用{% teg %}的时候,有开始就一定有结束

{% for i in name %}
    {% endfor %}  #两者成对出现
    {% if num %}
    {% endif %}
{% for foo in content %}
    {% if foo > 1 %}
        {{ foo }}
    {% endif %}
{% endfor %}

2.if标签

if else

{% if name_list|length >= 3 %}
    <p>需要打两辆车</p>
{% else %}
    <p>一辆足矣!</p>
{% endif %}

if elif else

{% if p3 %}
    <p>p3:{{ p3 }}</p>
{% elif p2 %}
    <p>p2:{{ p2 }}</p>
{% else %}
    <p>什么人都没有!</p>
{% endif %}

3.for标签

1. for遍历

遍历列表
<ul>
{% for user in user_list %}
    <li>{{ user.name }}</li>
{% endfor %}
</ul>
遍历字典
{% for key,val in dic.items %}
    <p>{{ key }}:{{ val }}</p>
{% endfor %}

2.forloop

for循环可用的一些参数:
forloop.first 当前循环是不是第一次循环(布尔值)
forloop.last 当前循环是不是最后一次循环(布尔值)
forloop.counter 当前循环的索引值(从1开始)
forloop.counter0 当前循环的索引值(从0开始)
forloop.revcounter 当前循环的倒序索引值(从1开始)
forloop.revcounter0 当前循环的倒序索引值(从0开始)
forloop.parentloop 本层循环的外层循环
{% for key,val in dic.items %}
    {% if forloop.first %}
        <p>{{forloop.counter }}</p>
    {% endif %}
{% endfor %}
<p>双层循环</p>
{% for name in name_list2 %}
    {% for name1 in name %}
        {{ forloop.parentloop.counter }}
        {{ forloop.counter }}
        {{ name1 }}
    {% endfor %}
{% endfor %}
<hr>

3.for empty 如果取得值不存在就执行empty语句

<ul>
{% for user in user_list %}
    <li>{{ user.name }}</li>
{% empty %}
    <li>空空如也</li>
{% endfor %}
</ul>

4.with标签

使用一个简单地名字缓存一个复杂的变量
<p>with语句</p>
{{ name_list2.1.1 }}
{% with name=name_list2.1.1 %}
    {{ name }}
{% endwith %}

   母版{% extends ‘xxx.html‘ %}  

1. 母版和继承
1. 为什么要有模板和继承:
把多个页面公用的部分提取出来,放在一个母版里面。
其他的页面只需要继承母版就可以了。
2. 具体使用的步骤:
1. 把公用的HTML部分提取出来,放到base.html文件中(母版名字自定义)
2. 在base.html中,通过定义block,把每个页面不同的部分区分出来
3. 在具体的页面中,先继承母版(在空的文件中继承)
4. 然后block名去指定替换母版中相应的位置
3. 使用母版和继承的注意事项:
1. {% extends ‘base.html‘ %} --> 母版文件:base.html要加引号
2. {% extends ‘base.html‘ %}必须放在子页面的第一行!!!
3. 可以在base.html中定义很多block,通常我们会额外定义page-css和page-js两个块
4. view.py相应的函数中返回的是对应的子页面文件 不是不是不是 base.html
4.继承母版后,所有要在页面山上显示的内容都要放到{% block book %}{% endblock %}中,在块内容外的内容该不会显示
我们通常会在母板中定义页面专用的CSS块和JS块,方便子页面替换。
技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title</title>
  #放置每个页面的css代码
  {% block page-css %}
  
  {% endblock %}
</head>
<body>
<h1>这是母板的标题</h1>
{% block page-main %}
{% endblock %}
<h1>母板底部内容</h1>
#放置每个页面的js代码
{% block page-js %}
{% endblock %}
</body>
</html>
View Code

    组件 {% include ‘xx.html‘ %}    


可以将常用的页面内容如导航条,页尾信息等组件保存在单独的文件中,然后在需要使用的地方按如下语法导入即可。
{% include ‘navbar.html‘ %}
navbar.html放要显示的内容,这个html文件是不完整的,没有head,body部分,不能单独使用

    静态文件相关   

<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 <script src="/static/bootstrap/js/bootstrap.min.js"></script>
静态文件操作,当配置文件中STATIC_URL = ‘/static/‘别名更改时,需要把项目中的静态文件href="/static/都改变,比较麻烦
使用以下代码,当别名改变也无影响
{% load static %}
<link href="{% static "bootstrap/css/bootstrap.min.css"  %}" rel="stylesheet">
<script src="{% static "bootstrap/js/bootstrap.min.js" %}

某个文件多处被用到可以存为一个变量

{% load static %}
<img src="{% static "img/banner_8.jpg" %}" alt="">
<img src="{% static "img/banner_8.jpg" %}" alt="">
banner_8.jpg 这个文件常用到,为其设置别名img1,以后用时直接用img1
{% static "img/banner_8.jpg" as img1 %}
<img src="{{img1}}"  %}" alt=""> #要使用变量符号











































以上是关于模板Template的主要内容,如果未能解决你的问题,请参考以下文章

Xcode中的变量模板(variable template)的用法

微信小程序开发--模板(template)使用,数据加载,点击交互

微信小程序开发之--"template模板“的应用

小程序模板使用

小程序基础13:模板

微信小程序视图层WXML_模板