Templates管理

Django模版语法

1、变量　　{{ var }}

2、url　　 {% url "index" %}

3、循环　　{% for... %}...{% endfor %}

4、判断　　{% if... %}...{% endif %}

5、过滤器

模板继承

在实际应用中，将用 Django 模板系统来创建整个 HTML 页面。这就带来一个常见的 Web 开发问题：在整个网站中，如何减少共用页面区域（比如站点导航）所引起的重复和冗余代码？

解决该问题的传统做法是使用服务器端的 includes ，但是用 Django 解决此类问题的首选方法是使用更加优雅的策略—— 模板继承。

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

配置实例

1. 创建base.html 父模板文件

　　格式{% block title %}content{% endblock %}

2. 创建子页面html, 重写继承的内容

　　继承父模板{% extends "base.html" %} 主要需要写到第一行

　　替换父模板的内容{% block title %}课程机构列表 - 暮学在线网{% endblock %}

3.继承父模版内容，并且可以进行内容追加

base.html页面内容

<!DOCTYPE html>
<html>
{% load staticfiles %}
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
    <title>{% block title %}慕学在线网首页{% endblock %}</title>
    <link rel="stylesheet" type="text/css" href="{% static "css/reset.css" %}">
    <link rel="stylesheet" type="text/css" href="{% static "css/animate.css" %}">
    <link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}">
    {% block custom_css %}{% endblock %}
    <script src="{% static "js/jquery.min.js" %}" type="text/javascript"></script>
    <script src="{% static "js/jquery-migrate-1.2.1.min.js" %}" type="text/javascript"></script>
    {% block custom_js %}{% endblock %}
</head>
<body>
<section class="headerwrap ">
    <header>
        <div  class=" header">
             <div class="top">
                <div class="wp">
                    <div class="fl"><p>服务电话：<b>33333333</b></p></div>
                    <!--登录后跳转-->
                        <a style="color:white" class="fr registerbtn" href="register.html">注册</a>
                        <a style="color:white" class="fr loginbtn" href="login.html">登录</a>
                </div>
            </div>

            <div class="middle">
                <div class="wp">
                    <a href="index.html"><img class="fl" src="{% static "images/logo.jpg" %}"/></a>
                    <div class="searchbox fr">
                        <div class="selectContainer fl">
                            <span class="selectOption" id="jsSelectOption" data-value="course">
                                公开课
                            </span>
                            <ul class="selectMenu" id="jsSelectMenu">
                                <li data-value="course">公开课</li>
                                <li data-value="org">课程机构</li>
                                <li data-value="teacher">授课老师</li>
                            </ul>
                        </div>
                        <input id="search_keywords" class="fl" type="text" value="" placeholder="请输入搜索内容"/>
                        <img class="search_btn fr" id="jsSearchBtn" src="{% static "images/search_btn.png" %}"/>
                    </div>
                </div>
            </div>

            <nav>
                <div class="nav">
                    <div class="wp">
                        <ul>
                            <li ><a href="index.html">首页</a></li>
                            <li >
                                <a href="course-list.html">
                                    公开课<img class="hot" src="{% static "images/nav_hot.png" %}">
                                </a>
                            </li>
                            <li >
                                <a href="teachers-list.html">授课教师</a>
                            </li>
                            <li class="active" ><a href="org-list.html">授课机构</a></li>
                        </ul>
                    </div>
                </div>
            </nav>

            </div>
    </header>
</section>
<!--crumbs start-->
    {% block custom_bread %}
    <section>
        <div class="wp">
            <ul  class="crumbs">
                <li><a href="{% url "index" %}">首页</a>></li>
            </ul>
        </div>
    </section>
    {% endblock %}

{% block content %}

{% endblock %}

View Code

org-list.html页面内容

{% extends "base.html" %}
{% load staticfiles %}
{% block title %}课程机构列表 - 暮学在线网{% endblock %}

    {% block custom_bread %}
    <section>
        <div class="wp">
            <ul  class="crumbs">
                <li><a href="/">首页</a>></li>
                <li>课程机构</li>
            </ul>
        </div>
    </section>
    {% endblock %}

View Code

Filter过滤器

内置过滤器

官方链接： https://docs.djangoproject.com/en/1.11/ref/templates/builtins/#ref-templates-builtins-filters

django模版自带了很多内置的过滤器，如下：

1、add 数字+运算
2、length 计算字符长度
3、safe 信任标签
4、default 如果值为空，默认显示的内容
5、date 日期格式
6、first 显示第一个字符
7、slice 切片
8、urlencode url转换
9、truncatechars:num 截断字符，本身占位3个
10、truncatewords:num 截断单词

11、stringformat 转换为字符串

自定义过滤器

1、app目录下创建templatetags文件夹(文件夹和路径必须正确)
2、创建templatetags --->filter.py
3、固定内容
　　from django import template
　　from django.utils.safestring import mark_safe (当返回的结果包含HTML标签的话，需要使用mark_safe()包起来)
　　register = template.Library()

4、filter
@register.filter #只能接收两个参数
def mul(x,y):
return x*y
html载入{% load filter %}
使用{{ a|mul 10 }}

5、simple_tag #可以接收多个参数
@register.simple_tag
def mul2(x,y,z):
return x*y*z
html载入{% load tags %}
使用｛% mul2 x y z %｝

配置示例1（乘法过滤器）：

filter.py代码：

from django import template
register = template.Library()

@register.filter
def mul(x, y):
    return x*y

@register.simple_tag
def mul2(x, y, z):
    return x*y*z

html代码：

<!DOCTYPE html>
{% load filter %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{{ x|mul:10 }}
{% mul2 x 10 10 %}
</body>
</html>

View Code

配置示例2（URL过滤器）：

import re
from django import template
register = template.Library()

@register.filter
def url_filter(url):
    regex = re.compile(r"^(http|https).+\.(com|cn|org)/")
    result = regex.match(url)
    if result:
        return result.group()

{% load filter %}
<a class="content2">-{{ new.href|url_filter }}</a>

for...endfor

1、forloop.counter|counter0 显示循环索引值
2、｛% empty %｝如何for循环的内容为空，这显示 empty后的内容

posted @ 2017-03-05 14:18 Vincen_shen 阅读(465) 评论(0) 收藏举报

刷新页面返回顶部