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

    一、常用语法

      {{  }} 变量

      {%  %}逻辑相关

    二、模板语言filter操作

      1、{{ value|default:'nothing'}} 若没有值传入,则显示nothing

        注:TEMPLATES的OPTIONS可以增加一个选项:string_if_invalid:'找不到',可以替代default的的作用。

      2、filesizeformat

        将值格式化为一个 “人类可读的” 文件尺寸 (例如 '13 KB', '4.1 MB', '102 bytes', 等等)。例如:{{ value|filesizeformat}}

      3、date日期格式化

        {{value|date:''H-m-d H:i:s''}}  

      4、自定义filter

        (1)首先在app01下创建templatetags文件包

        (2)随意定义一个py文件,内容如下 

    from django import template
    register=template.Library()
    
    @register.filter()
    def add_1(value):
        return value+'tianjia'
    
    @register.filter(name='add')
    def add_2(value):
        return value+'tianjia'
    

        (3)在html界面加载py文件名

          {% load 文件名%}

        (4)重启Django项目

      5、https://www.cnblogs.com/maple-shaw/articles/9333821.html参考链接

    三、csrf_token

      这个标签用于跨站请求伪造保护。

      在页面的form表单里面写上{% csrf_token %}

    四、母版

      我们将html大量重复的代码创作成模板,将灵活代替的位置利用块来代替

      注意:我们通常会在母板中定义页面专用的CSS块和JS块,方便子页面替换。

      母版继承{{% extends " muban.html" %}}

      块继承{% block 块名 %}填充内容{% endblock %}

     五、组件

      1、写一段代码 nav.html

      2、{% include 'nav.html' %}  固定的组件,重复调用可节省代码

    六、静态文件相关

      1.{% load static %} --->获取的是setting中的STATIC_URL的/static/相对路径和相对路径拼接

      2.{% get_static_prefix %}--->获取的是setting中的STATIC_URL的/static/

      举例如下

    {% load static %}
         第一种方式 
         <link href="{% static 'bootstrap-3.3.7/css/bootstrap.css' %}" rel="stylesheet">
         <link href="{% static 'Dashboard Template for Bootstrap_files/dashboard.css' %}" rel="stylesheet">
         <link rel="stylesheet" href="{% static 'font-awesome-4.7.0/css/font-awesome.css' %}">
        第二种方式
        <link href="{% get_static_prefix %}bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet">
        <link href="{% get_static_prefix %}Dashboard Template for Bootstrap_files/dashboard.css" rel="stylesheet">
        <link rel="stylesheet" href="{% get_static_prefix %}font-awesome-4.7.0/css/font-awesome.css">
    

    七、自定义inclusion_tag

      1、在app下创建templatetags的python包 templatetags名字不能变

      2、在包下定义一个python文件 例如 mytag.py

      3、编辑文件

        from django import template

        register =template.Library()

        举例

    from django import template
    
    register = template.Library()
    
    
    @register.filter()
    def add_str(value):
        return value + '_666'
    
    
    @register.inclusion_tag('api/pagenation.html')
    def fun(total, current_num):
        return {'total': range(1, total + 1), 'current_num': current_num}

      4、定义函数

        可以接受参数

        返回一个字典

      5、函数上加上装饰器

        @register.inclusion_tag('需要渲染的页面.html')

      6、函数返回的字典,交给页面渲染

        页面渲染举例:

    <nav aria-label="Page navigation" class="pull-right">
                    <ul class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">«</span>
                            </a>
                        </li>
                        {% for num in total %}
                            {% if num == current_num %}
                                <li class="active"><a href="#">{{ num }}</a></li>
                            {% else %}
                                <li><a href="#">{{ num }}</a></li>
                            {% endif %}
                        {% endfor %}
    
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">»</span>
                            </a>
                        </li>
                    </ul>
                </nav>
    

      7、调用举例: 

    {% load myset %}
     {% fun 5 2 %}
    

      

        

      

  • 相关阅读:
    linux学习网站
    异步JS(Asynchronous JavaScript)
    针对性的遍历tree数据,获取所需要的内容(获取id数组、id对应的层级数组、来获取当前的对象)
    代码注释中的专有词:TODO、FIXME和XXX
    四月份前端面试指北
    微信小程序之裁剪图片成圆形
    金九银十求职季,前端面试大全送给你
    node:爬虫爬取网页图片
    微信小程序UI组件库 iView Weapp快速上手
    (干货)微信小程序之转发好友
  • 原文地址:https://www.cnblogs.com/wszxdzd/p/9756871.html
Copyright © 2011-2022 走看看