zoukankan      html  css  js  c++  java
  • 模板Template

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

         变量{{name}}     

    views

    def template_test(request):
        l = [11, 22, 33]
        d = {"name": "jerd"}
    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> #jerd

           过滤器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" %}

    自定义标签和过滤器

    1.在app中创建templatetags模块(模块名只能是templatetags)
    2.创建任意 .py 文件,如:mysimpletag.py
    from django import template
    from django.utils.safestring import mark_safe
    
    register = template.Library()  # register的名字是固定的,不可改变
     告诉Django的模板语言我现在有一个自定义的filter方法,名字叫addstr
    @register.filter(name="addstr")
    def add_str(arg, arg2):
        第一个参数永远是管道符前面那个变量
        :param arg: 道符前面那个变量
        :param arg2: 冒号后面的变量
        :return:
        return "{} {}.".format(arg, arg2)
    3.使用自定义filter(在HTML中操作)
    {# 先导入我们自定义filter那个文件 #}
    {% load mysimpletags %}
    {# 使用我们自定义的filter #}
    {{ name|addstr:"hello~" }}
    {{ name|addstr}}
    4.定义完后要重新开服务,不然报错
    
    @register.simple_tag(name="add")
    def add_str(a,b):
        return "执行mysimpletag的结果是:{} {}".format(a,b)
    2.在HTML中使用
    {% load mysimpletag %}  #导入文件
    {% add "1" "2" %} #使用的是逻辑符号,参数之间没有逗号
    content1="等闲变却故人心,却道姑人心易变"
    {% add  content1 "骊山语罢清宵半" %} #content1是后台传到页面上的内容,对这个变量就行操作
    View Code
    django的模板中filter和simple_tag的区别?
    自定义filter:{{ 参数1|filter函数名:参数2 }}
    1.可以与if标签来连用
    2.自定义时需要写两个形参
    simple_tag:{% simple_tag函数名 参数1 参数2 %}
    1.可以传多个参数,没有限制
    2.不能与if标签来连用

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

    {% 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=""> #要使用变量符号
  • 相关阅读:
    JS的数据类型(包含:7种数据类型的介绍、数据类型的转换、数据类型的判断)
    使用终端改变MAC默认截图存放地址
    Homebrew的安装及使用
    CSS多列布局(实例)
    CSS中元素各种居中方法(思维导图)
    用CSS伪类制作一个不断旋转的八卦图?
    DOSBOX的简单使用
    5分钟读懂JavaScript预编译流程
    基于栈虚拟机和基于寄存器虚拟机的比较
    js执行可视化
  • 原文地址:https://www.cnblogs.com/zgf-666/p/9221118.html
Copyright © 2011-2022 走看看