• Day61 Django框架--模板语言2


    一,母板

      1.什么情况下使用母板?

        当多个页面的大部分内容都一样的时候,我们可以把相同的部分提取出来,放到一个单独的母板文件中

      2.使用母板

        0.通常用法:

    <!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>
      {% block page-css %}
           
      {% endblock %}
    </head>
    <body>
    
    <h1>这是母板的标题</h1>
    
    {% block page-main %}
    
    {% endblock %}
    <h1>母板底部内容</h1>
    {% block page-js %}
    
    {% endblock %}
    </body>
    </html>    

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

        1.继承母板

          在子页面中在页面最上方使用下面的语法来继承母版

    {% extends '母板.html' %}

        2.定义块(block)

          通过在母板中使用{% block xxx %}来定义"块"

          在子页面中通过定义母板中的block名来对应替换母板中相应的内容

    {% block page-main %}
      <p>世情薄</p>
      <p>人情恶</p>
      <p>雨送黄昏花易落</p>
    {% endblock %}

    二,组件

      1.什么时候用组件?

        页面上相对独立的某个部分可以单独拿出来放到一个单独的html文件中

      2.如何使用

        在需要导入组件的地方加一句

    {% include '组件.html' %}

    三,静态文件相关

      1.为什么要使用动态拼接的路径?

        把静态文件的路径改成动态拼接的,避免在HTML页面中硬编码静态的导入路径(就是不要写死了)

      2.使用方法   

    {# 引用JS文件时使用 #}
    {% load static %}
    <script src="{% static "mytest.js" %}"></script>
    
    {# 引用图片时 #}
    {% load static %}
    <img src="{% static "images/hi.jpg" %}" alt="Hi!" />
    
    {# 某个文件多处被用到可以存为一个变量 #}
    {% load static %}
    {% static "images/hi.jpg" as myphoto %}
    <img src="{{ myphoto }}"></img>

      3.使用get_static_prefix

    {% load static %}
    <img src="{% get_static_prefix %}images/hi.jpg" alt="Hi!" />
    
    
    {% load static %}
    {% get_static_prefix as STATIC_PREFIX %}
    <img src="{{ STATIC_PREFIX }}images/hi.jpg" alt="Hi!" />
    <img src="{{ STATIC_PREFIX }}images/hi2.jpg" alt="Hello!" />

    四,自定义simpletag

      自定义tag比自定义filter功能更强大一点,可以接收更灵活的参数

      1.定义注册simple tag

    @register.simple_tag(name="plus")
    def plus(a, b, c):
        return "{} + {} + {}".format(a, b, c)

      2.使用自定义simple tag

    {% load app01_demo %}
    
    {# 调用plus并传参 #}
    {% plus "1" "2" "abc" %}

    五,inclusion_tag:多用于返回html代码片段

      例子:

        1.用于替换的HTML代码片段

    <nav aria-label="Page navigation">
      <ul class="pagination">
        <li>
          <a href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
          {% for i in data %}
            <li><a href="#">{{ i }}</a></li>
          {% endfor %}
        <li>
          <a href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>

         2.HTML中调用自定义的tag --page

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        {% load static %}
        <link rel="stylesheet" href="{% static 'bootstrap-3.3.7/css/bootstrap.css' %}">
    </head>
    <body>
    <h1>自定义的simple_tag示例</h1>
    {% load my_extends %}   {# 导入my_extends.py #}
    {% page 5 %}
    {% page 10 %}
    {% page 100 %}
    </body>
    </html>

        2.templatetagsmy_extends.py中的tag函数

    from django import template
    register = template.Library()
    
    @register.inclusion_tag(filename='xx.html', name='page')
    def my_page(num):
        data = [i for i in range(1, num+1)]
        return {'data': data}

         2.views.py

    def t(request):
        return render(request, 't.html')
  • 相关阅读:
    精选css动画库及其使用
    使用js reduce方法求数组中出现次数最多的元素
    文字横向滚动效果,公告效果
    判断是否是微信端
    移动端input/textarea输入框光标高度兼容及其他事项
    更新被拒绝,因为您当前分支的最新提交落后于其对应的远程分支
    Git 常见问题整理
    CentOS 7.0 安装配置LAMP服务器方法(Apache+PHP+MariaDB)
    centos7安装eclipse
    centos7安装mplayer的方法
  • 原文地址:https://www.cnblogs.com/lianyeah/p/9897224.html
Copyright © 2020-2023  润新知