zoukankan      html  css  js  c++  java
  • Django模板语言进阶

    复制代码
    一、母板
    1、什么情况下使用母版
        当多个页面的大部分内容都一样的时候,我们可以把相同的部分提取出来,放到一个单独的母版HTML文件中
        然后在母版中定义需要被替换的block
    
    例如:母板页面
    <!DOCTYPE html>
    <html lang="zh-CN">
    <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>母板HTML</title>
      
      {% block page-css %}
      
      {% endblock %}
      
    </head>
    <body>
    
    <h1>母板内容</h1>
    
    {% block page-main %}
    
    {% endblock %}
    
    <h1>JS</h1>
    {% block page-js %}
    
    {% endblock %}</body>
    </html>
    
    
    2、在子页面继承母板(相当于把母板所有代码复制过来)
    {% extends '母板名.html' %}
    
    
    
    3、块(block)
    通过在母板中使用{% block  xxx %}来定义""。
    在子页面中通过定义母板中的block名来对应替换母板中相应的内容
    注意:在母板中block只是定义,里面并没有内容的,子页面才填充内容
    
    {% block page-main %}
        <p>子页面的内容</p>
    {% endblock %}
    
    
    {% block page-js %}
        <p>子页面的js</p>
        <script src="/static/js/myjs.js"></script>
    {% endblock %}
    
    
    {% block page-css %}
        <p>子页面的css</p>
        <link rel="stylesheet" href="/static/css/mycss.css">
    {% endblock %}
    
    
    
    二、组件
    1.、什么时候用组件?
        页面上相对独立的某个部分可以单独拿出来放到一个单独的html文件中
    2.、如何使用
        1. {% include '组件.html' %}
    
    
    
    三、静态文件相关
    1. 为什么要使用
        把静态文件的路径改成动态拼接的,避免在HTML页面中硬编码静态文件的导入路径
    
    2. 如何使用
    先导入static模块:{% load static %} 
    两种使用方法:
        1. <link rel="stylesheet" href="{% static 'bootstrap-3.3.7/css/bootstrap.css' %}">
                
        2. <link rel="stylesheet" href="{% get_static_prefix %}font-awesome-4.7.0/css/font-awesome.css">
    
    
    3、自定义simple_tag
    和自定义filter类似,只不过接收更灵活的参数。
    1. 自定义simple_tag的步骤
        1. 在app下面新建一个python package名字叫templatetags
        2. 在上一步的python package中新建一个py文件(my_extends.py)
        3. 在py文件中写一个函数,实现自定义的simple_tag功能
        4. 告诉Django我现在多了一个自定义的tag
        5.例子
            from django import template
            from django.conf import settings
            # 生成一个注册对象
            register = template.Library()
    
            # 自定义一个拼接静态文件路径的tag函数
            @register.simple_tag(name='myst')
            def my_static(s):
                # 拿到settings.py中的STATIC_URL的值
                s1 = settings.STATIC_URL
                # 进行字符串拼接
                ret = s1 + s
                # 返回
                return ret
            
    2. 使用自定义的tag
        1. 在HTML文件中导入刚才创建的py文件
            {% load my_extends %}
        2. 重启Django项目
        3. 按照普通的tag调用自定义的函数
            <link rel="stylesheet" href="{% myst 'index/index.css' %}">
    
    
    4、自定义inclusion_tag
    多用于返回html代码片段
    跟上面自定义的步骤一样,只是代码有点不同
    inclusion_tag相当于定义了一个局部的HTML,然后别的页面可以引用这段HTML代码
    例如:
    my_extends.py
    
    @register.inclusion_tag(filename='p.html', name='pp')  
    def my_p(num):
        data = [i for i in range(1, num+1)]
        return {'data': data}
    
    
        
    p.html
    
    {% for i in data %}
        <span>{{ i }}</span>
    {% endfor %}    
    
    
    
    test.html
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta http-equiv="content-type" charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>test</title>
    </head>
    
    <body>
    
    {% load my_extend %}
    {% pp 10 %}
    
    </body>
    </html>
    
    
    
    解释:
    filename是inclusion_tag指定的页面,接收inclusion_tag函数返回值,name是调用时的tags名,
    调用的参数是从my_p接收,返回的内容是filename指定的页面的内容。
    也就是说,上面的代码,最终展示的页面是test.html,
    {% load my_extend %}
    {% pp 10 %}
    上面两句话是导入了my_extend自定义的tags
    pp是tags的具体一个方法,10是参数,pp会把10这个参数传给my_p,然后my_p再传给p.html,
    最后在test,html页面显示p.html的那部分代码,相当于把p.html的代码嵌入到了test,html里面展示出来
    复制代码
  • 相关阅读:
    恢复ubuntu和windows的双引导
    手把手教你做MVC3中的完美分页控件
    201521123024 《Java程序设计》第5周学习总结
    201521123024 《Java程序设计》第1周学习总结
    201521123024 《Java程序设计》第6周学习总结
    201521123024 《Java程序设计》第2周学习总结
    201521123024 《Java程序设计》第4周学习总结
    201521123024《Java程序设计》第3周学习总结
    201521123024《Java程序设计》第7周学习总结
    201521123024《Java程序设计》第8周学习总结
  • 原文地址:https://www.cnblogs.com/yidashi110/p/10091987.html
Copyright © 2011-2022 走看看