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

    一.模版语言特殊标记

     1. view.py

    from django.shortcuts import render,HttpResponse,redirect
    
    def index(request):
        return render(request,'index.html',{
            'name':'tom',
            'users':['汤姆','杰瑞'],
            'user_dict':{'k1':'v1','k2':'v2'},
            'user_list_dict':[
                {'id':1,'name':'tom','email':'tom@163.com'},
                {'id':2,'name':'tom1','email':'tom@163.com'},
                {'id':3,'name':'tom2','email':'tom@163.com'},
    
            ]
        })
    View Code

    2. index.html

    3、自定义simple_filter ,simple_tag  (模板自定义函数)

    a、在app中创建templatetags模块

    b、在模块下,创建任意 .py 文件,如:xx.py

    from django import template
    
    register = template.Library()    #register  一词固定写法
    
    @register.filter
    def my_upper(value):
        return value.upper()
    
    
    @register.filter
    def my_u(value,arg):
        return value+arg
    
    
    @register.filter
    def my_bool(value):
        return False
    
    
    @register.simple_tag
    def my_lower(value,a1,a2,a3):
    
        return value + a1 + a2 + a3
    View Code

    c、在使用自定义simple_tag的html文件中导入之前创建的 xx.py 文件名

    {% load xx %}
    {# 导入此句 #}
    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h1>打印字典所有的key</h1>
    
        {{ name|my_upper }}
        {{ name|my_u:'666' }}
    
    
    
        <h2>filter</h2>
            {{ name|my_u:"666" }}
    
            {% if name|my_bool %}
                <h3>真</h3>
            {% else %}
                <h3>假</h3>
            {% endif %}
        <h2>tag</h2>
            {% my_lower "TOM" "x" "NB" "V" %}
    
    
    
    </body>
    </html>
    View Code

    d、在settings中配置当前app,不然django无法找到自定义的simple_tag

    INSTALLED_APPS = (
    
        'django.contrib.admin',
    
        'django.contrib.auth',
    
        'django.contrib.contenttypes',
    
        'django.contrib.sessions',
    
        'django.contrib.messages',
    
        'django.contrib.staticfiles',
    
        'app01',
    
    )
    View Code

    4.include

    a.pub.html(只有一个 div)

    <div>
        <h3>特别漂亮的组件</h3>
        <div>
            <div class="title">标题:</div>
            <div class="content">内容:</div>
    
        </div>
    </div>
    View Code

    b.在另一个.html中,引入使用

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
         {% include 'pub.html' %}
         {% include 'pub.html' %}
         {% include 'pub.html' %}
         {% include 'pub.html' %}
    
    
    </body>
    </html>
    View Code

     补充:笔记内容

    1. 模板
            - 基本使用
            - 母版
                - 页面继承
            - include
                - 导入小组件
                    pub.html
                        <div>
                            <h3>特别漂亮的组件</h3>
                            <div class="title">标题:{{ name }}</div>
                            <div class="content">内容:{{ name }}</div>
                        </div>
                    test.html
                        <!DOCTYPE html>
                        <html lang="en">
                        <head>
                            <meta charset="UTF-8">
                            <title></title>
                        </head>
                        <body>
                            {% include 'pub.html' %}
                            {% include 'pub.html' %}
                            {% include 'pub.html' %}
                        </body>
                        </html>
            - 函数-> 自动执行
            - 模板自定义函数:
                - simple_filter
                    - 最多两个参数,方式: {{第一个参数|函数名称:"第二个参数"}}
                    - 可以做条件判断
                - simple_tag
                    - 无限制: {% 函数名 参数 参数%}
    View Code

    二. extend模板继承(母版)

    一个常见的Web开发问题:整个网站中,如何减少共用页面区域(比如站点导航)所引起的重复和冗余代码?

    Django解决此类问题的首选方法是使用一种优雅的策略---- 模板继承。

    本质上来说,模板继承 就是先构造一个基础框架模板,而后在其模板中对它     所包含站点公用部分和定义块进行   重载。

    代码示例:

    url(r'^test/',views.test),     #覆盖母版的原有内容
    
    url(r'^blog/(d+)/',views.query),  #继承母版的的内容({{ block.super }})
    

    views.py

    def test(request):
    
        return render(request,'use.html')
    
    def query(request,a1):
    
        return render(request,'query.html')
    View Code

    HTML

    base.html(母版)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>母版</title>
    
        {% block css %}
        {% endblock %}
    
        <style>
    
            *{
                margin: 0;
                padding: 0;
            }
            .header{
                width: 100%;
                height: 48px;
                background-color: dodgerblue;
                position: fixed;
                top: 0;
                left:0;
            }
    
            .left{
                width: 200px;
                position: fixed;
                top: 48px;
                bottom: 0;
                left: 0;
                background-color: lightgrey;
            }
    
            .right{
                position: fixed;
                top:48px;
                left: 200px;
                right: 0;
                bottom: 0;
                overflow: auto;
            }
    
        </style>
    
    </head>
    <body>
    
    
    <div class="header"></div>
    <div class="content">
        <div class="left">
            <ul class="title">
                <li><a href="/blog/2017/">菜单一</a></li>
                <li><a href="/blog/2016/">菜单一</a></li>
                <li><a href="/blog/2015/">菜单三</a></li>
            </ul>
    
        </div>
        <div class="right">
    
    
            {% block xx %}
                <h1>Hello World</h1>
            {% endblock %}
    
    
            {% block yy %}
                <h1>YYYYYYY</h1>
            {% endblock %}
    
    
            {% block zz %}
    
            {% endblock %}
    
    
    
    
        </div>
    </div>
    
    
    </body>
    </html>
    View Code

    use.html(覆盖母版的原有内容)

    {% extends 'base.html' %}
    
    
    
    {% block xx %}
        <h1>菜单一的内容</h1>
        <h1>菜单一的内容</h1>
        <h1>菜单一的内容</h1>
        <h1>菜单一的内容</h1>
        <h1>菜单一的内容</h1>
        <h1>菜单一的内容</h1>
    {% endblock %}
    View Code

    query.html(继承母版的原有内容)

    {% extends 'base.html' %}
    
    
    
    {% block xx %}
    
        {{ block.super }}
    
        <h2>新添加</h2>
        <h2>新添加</h2>
        <h2>新添加</h2>
    
    {% endblock %}
    View Code

    以下是其工作方式:

          在加载 current_datetime.html 模板时,模板引擎发现了 {% extends %} 标签, 注意到该模板是一个子模板。 模板引擎立即装载其父模板,即本例中的 base.html 。此时,模板引擎注意到 base.html 中的三个 {% block %} 标签,并用子模板的内容替换这些 block 。因此,引擎将会使用我们在 block title %} 中定义的标题,对 {% block content %} 也是如此。 所以,网页标题一块将由{% block title %}替换,同样地,网页的内容一块将由 {% block content %}替换。

         注意由于子模板并没有定义 footer 块,模板系统将使用在父模板中定义的值。 父模板 {% block %} 标签中的内容总是被当作一条退路。继承并不会影响到模板的上下文。 换句话说,任何处在继承树上的模板都可以访问到你传到模板中的每一个模板变量。你可以根据需要使用任意多的继承次数。 使用继承的一种常见方式是下面的三层法:

       <1> 创建 base.html 模板,在其中定义站点的主要外观感受。 这些都是不常修改甚至从不修改的部分。
       <2> 为网站的每个区域创建 base_SECTION.html 模板(例如, base_photos.html 和 base_forum.html )。这些模板对base.html 进行拓展,
           并包含区域特定的风格与设计。
       <3> 为每种类型的页面创建独立的模板,例如论坛页面或者图片库。 这些模板拓展相应的区域模板。

    这个方法可最大限度地重用代码,并使得向公共区域(如区域级的导航)添加内容成为一件轻松的工作。

    以下是使用模板继承的一些诀窍:

    <1>如果在模板中使用 {% extends %} ,必须保证其为模板中的第一个模板标记。 否则,模板继承将不起作用。
     
     <2>一般来说,基础模板中的 {% block %} 标签越多越好。 记住,子模板不必定义父模板中所有的代码块,因此
        你可以用合理的缺省值对一些代码块进行填充,然后只对子模板所需的代码块进行(重)定义。 俗话说,钩子越
        多越好。
     
     <3>如果发觉自己在多个模板之间拷贝代码,你应该考虑将该代码段放置到父模板的某个 {% block %} 中。
        如果你需要访问父模板中的块的内容,使用 {{ block.super }}这个标签吧,这一个魔法变量将会表现出父模
        板中的内容。 如果只想在上级代码块基础上添加内容,而不是全部重载,该变量就显得非常有用了。
     
     <4>不允许在同一个模板中定义多个同名的 {% block %} 。 存在这样的限制是因为block 标签的工作方式是双向的。
        也就是说,block 标签不仅挖了一个要填的坑,也定义了在父模板中这个坑所填充的内容。如果模板中出现了两个
        相同名称的 {% block %} 标签,父模板将无从得知要使用哪个块的内容。
    
  • 相关阅读:
    数据结构化与保存
    爬取基础2
    爬取校园新闻首页的新闻的详情,使用正则表达式,函数抽离
    爬虫基础
    中文词频
    使用docker搭建rabbitmq集群
    centos安装rabbitmq
    git查看仓库地址以及修改远程仓库
    网易云邮箱账号
    jmeter提取登录cookie实现跨线程组保持登录
  • 原文地址:https://www.cnblogs.com/zhaochangbo/p/7096012.html
Copyright © 2011-2022 走看看