时间戳

首页 > 技术文章 > tornado 模板

tornado 模板

quanquan616 原文

tornado模板与Django的模板差不多！

在tornado中，模板就是一个html文件，但是模板通过模板语法，由tornado服务渲染之后，可以动态的往页面中填入数据。

作用：可以先把页面写好，然后预留出固定的位置，在需要的时候再填入数据，最后通过tornado服务把这个数据渲染出来。

一、tornado中的配置

在 application 中配置：

（一）.模板文件的路径

template_path='templates'

（二）.静态文件的路径

static_path='static'

添加此配置之后，tornado就能自己找到静态文件

（三）.静态文件两种引入方式

(1).写死 static/images/c.jpg

<img src="static/images/c.jpg">

在 Tornado 模板中，static是个关键词，能够自动替换成static_path后的内容。

(2).添加版本号 static_url("images/xx.jpg")

<img src="{{ static_url('images/c.jpg') }}">

使用此方法时，Tornado会自动地给静态文件添加版本号，如果版本号更改了，浏览器会自动的缓存新的静态文件。

二、两种表现形式

（一）.模板变量{{ variable_name }}

例1：

<body>
欢迎{{ username }}登录
</body>
View Code

它也可以是python表达式

例2：

{{ 1 + 1 }}
{{ time.time() }}
View Code

（二）.模板命令{%%}

其实就是，大括号百分号所包裹的python语法

例1：

{% if 1 %}
    this is if
{% end %}
View Code

注意：tornado的模板语法的结束标识是{% end %}，不是Django或jinja2的{% endblock %}

（三）.常用的模板符号

(1).{# … #} 在模板中要注释python表达式的运行。如：{# time.time() #}}

(2).{{!  {%!  {#! 如果不想执行内容，需要在页面上打印出模板符号，只需要加上感叹号(!)即可。如下例：

{{! 1 + 1}}

{%! if 1 %}
    this is if
{%! end %}

{#! time.time() #}}
View Code

(3).if判断

{% if username != 'no' %}
    欢迎{{ username }}登录
{% else %}
    请登录
{% end %}
View Code

(4).for循环

{% for i in urllist %}
    {{ i }}
{% end %}
View Code

(5).while循环

{% set a = 0 %}

{% while a<5 %}
    {{ a }}<br>
    {% set a += 1 %}
{% end %}
View Code

三、模板转义

通过模板，可以把数据动态的添加到页面。如果添加的值是一段html代码的话，并不会去解析，只是当作一个字符串，直接在页面上打印出来。

tornado默认是自动的转义，传入的数据都会当作字符串，不会被浏览器解析。

（一）.模板去掉转义

(1).局部去掉转义{% raw variable_name %}

{% raw %}去掉转义，让 tornado 在渲染的时候不去转义变量。

“局部”顾名思义，只对当前这个变量有效。

(2).当前整个模板去转义{% autoescape None %}

在模板最上面（{% extends %}后面）添加：{% autoescape None %}，固定写法！当前模板不再转义。

(3).整个项目去掉转义

在 application 中添加如下配置：autoescape=None

去掉整个项目的转义，配置之后，整个项目中的模板不再转义。

四、模板继承与引入

tornado的模板继承与Django几乎一样。个人观察来看，唯一的区别的也只是关闭标签：在tornado是{% end %}，在Django中是{% endblock %}

（一）.extend

{% extends "base.html" %}继承模板，在子模板中会把父模板的所有内容都继承到子模板中，减少大量重复代码

（二）.block

子模板中需要修改的区域，事先先在父模板中预留出来。子模板中直接使用已预留出来的接口。

无论预留还是使用，都是使用：{% block *name* %}...{% end %}

（三）.模板引入

{% include ./05include.html %}

include可以导入一些其他的模板文件，一般使用include的时候，被引入的模板文件中不使用block块。

五、ui_methods

（一）.新建文件ui_methods.py

文件名随意给，只要在import时合法即可。这里可以新建一个文件夹，如util，来放置 ui_methods.py 和 ui_modules.py

def methods1(self):  # 注意这里要加上self 
    return 'ui_methods 1' 
def methods2(self): 
    return 'ui_methods 2'
View Code

注意：小括号里必须要加上self

（二）.在项目中导入

import util.ui_methods

（三）.配置 Application 参数

ui_methods=util.ui_methods,

（四）.在模板中调用

{{ methods1() }}

六、ui_modules

（一）.新建文件ui_modules.py

使用ui_modules需要继承UIModule类，注意：必须继承UIModule类

from tornado.web import UIModule

class UiModule(UIModule):
    def render(self, *args, **kwargs):
        return '我是 ui_module'
View Code

（二）.在项目中导入

import util.ui_modules

（三）.配置 Application 参数

(1).ui_modules=util.ui_modules

(2).也可以写成字典形式：ui_modules={'UiModule':util.ui_modules.UiModule,}

（四）.在模板中调用

{% module UiModule() %}

（五）.在页面中放置广告案例

(1).目录结构

(2).ui_modules.py代码

from tornado.web import UIModule


class ShowAdCloths(UIModule):
    def render(self, *args, **kwargs):
        return self.render_string("06ad.html")

    def css_files(self):
        return "/static/css/King_Chance_Layer7.css"

    def javascript_files(self):
        return [
            "/static/js/bootstrap.min.js",
            "/static/js/jquery.backstretch.min.js",
            "/static/js/jquery-2.2.0.min.js",
            "/static/js/jquery_1_7.js",
            "/static/js/King_Chance_Layer.js",
            "/static/js/King_layer_test.js",
        ]
View Code

必须重写那三个方法，不然没有任何效果

(3).06ad.html代码

<div class="King_Chance_Layer">
    <div class="King_Chance_LayerCont" style="display:none;">
        <div class="King_Chance_Layer_Close">Close</div>
        <div class="King_Chance_Layer_Title">SHOPBEST 商城SHOPBEST 商城SHOPBEST 商城SHOPBEST 商城</div>
        <div class="King_Chance_Layer_Btn">
            <ul>
                <li><a href="#" title="百搭潮">百搭潮</a></li>
                <li><a href="#" title="抗皱棉">抗皱棉</a></li>
                <li><a href="#" title="植绒">植绒</a></li>
                <li><a href="#" title="潮范">潮范</a></li>
            </ul>
        </div>
        <div class="King_Chance_Layer_Content">
            <ul>
                <li><a href="#" title="百搭潮"><img src="/static/images/King_imgs/ipush1.jpg" alt="百搭潮"></a></li>
                <li><a href="#" title="抗皱棉"><img src="/static/images/King_imgs/ipush2.jpg" alt="抗皱棉"></a></li>
                <li><a href="#" title="植绒"><img src="/static/images/King_imgs/ipush3.jpg" alt="植绒"></a></li>
                <li><a href="#" title="潮范"><img src="/static/images/King_imgs/ipush4.jpg" alt="潮范"></a></li>
            </ul>
        </div>
    </div>
</div>
View Code

(4).index.html代码

{% extends ./base.html %}

{% block title %}
06 模板继承和导入
{% end %}

{% block content %}
{{ to_upper("quanquan616") }}
<br>
this is index content, not base.html
<br>
{% include ./include_example.html %}
<br>
{% module ShowAdCloths() %}
{% end %}
View Code

(5).最终运行效果

七、模板其他命令

（一）.apply

使函数的作用范围到最近的{%end%}为止

{% apply upper %}
hello world<br>
hahaha
{% end %}
<br>
{{ upper('hahaha') }}
View Code

（二）.linkify

linkify生成一个链接，但是要注意模板转义

{% raw linkify('百度: http://www.baidu.com') %}

推荐阅读