快捷導(dǎo)航

Django使用Jinja2模板引擎的示例代碼

更新時間：2019年08月09日 10:03:19 作者：笑揖峰頭月一輪

這篇文章主要介紹了Django使用Jinja2模板引擎的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

Jinja2模板引擎

安裝Jinja2 :pip install jinja2，在應(yīng)用目錄下添加jinja2_env.py設(shè)定環(huán)境變量。

from django.contrib.staticfiles.storage import staticfiles_storage
from django.urls import reverse

from jinja2 import Environment


def environment(**options):
  env = Environment(**options)
  env.globals.update({
    'static': staticfiles_storage.url,
    'url': reverse,
  })
  return env

并在管理目錄下setting.py中做出3項修改：

TEMPLATES = [
  {
    'BACKEND': 'django.template.backends.jinja2.Jinja2', # 1
    'DIRS': [os.path.join(BASE_DIR, 'templates'), os.path.join(BASE_DIR, 'learning_logs/templates')] # 2
    ,
    'APP_DIRS': True,
    'OPTIONS': {
      'context_processors': [
        'django.template.context_processors.debug',
        'django.template.context_processors.request',
        'django.contrib.auth.context_processors.auth',
        'django.contrib.messages.context_processors.messages',
      ],
      'environment': 'learning_logs.jinja2_env.environment', # 3
    },
  },
]

Jinja2語法

Jinja2的語法與template類似，對比template，它更加靈活、快速和安全。

Jinja2 基本語法

控制結(jié)構(gòu){% %}
變量 {{ }}
注釋{# #}

例如：

{# jinja2 code #}
{% if {{ i }}> 10 %}
...
{% else %}
....
{% endif %}

Jinja2 變量

在模板中的{{ i }}結(jié)構(gòu)表示變量，這是一種特殊的占位符，告訴模板引擎這個位置的值從渲染模板時使用的數(shù)據(jù)結(jié)構(gòu)中獲取。jinja2支持python中所有的Python數(shù)據(jù)類型比如列表、字段、對象等

<p>this is a dicectory:{{ mydict['key'] }} </p>
<p>this is a list:{{ mylist[3] }} </p>
<p>this is a object:{{ myobject.something() }} </p>

Jinja2變量過濾器

變量的值可以使用過濾器修改。過濾器在添加變量名后，二者以豎線分隔。如：

<p>Hello, {{ user|capitalize }}!</p>

過濾器名	說明
safe	渲染時值不轉(zhuǎn)義
capitialize	把值的首字母轉(zhuǎn)換成大寫，其他子母轉(zhuǎn)換為小寫
lower	把值轉(zhuǎn)換成小寫形式
upper	把值轉(zhuǎn)換成大寫形式
title	把值中每個單詞的首字母都轉(zhuǎn)換成大寫
trim	把值的首尾空格去掉
striptags	渲染之前把值中所有的HTML標(biāo)簽都刪掉
join	拼接多個值為字符串
replace	替換字符串的值
round	默認(rèn)對數(shù)字進行四舍五入，也可以用參數(shù)進行控制
int	把值轉(zhuǎn)換成整型

關(guān)于safe過濾器，默認(rèn)情況下Jinja2出于安全考慮會轉(zhuǎn)義所有變量。當(dāng)一個變量為<b>Hello</b>沒有添加safe過濾器時，顯示的結(jié)果為

瀏覽器能顯示<b>元素，但不會解釋它。

當(dāng)添加safe過濾器時，結(jié)果為

當(dāng)需要顯示變量中存儲的HTML代碼時，可使用safe過濾器。

Jinjia2控制結(jié)構(gòu)

Jinja2提供了多種控制結(jié)構(gòu)，可用來改變模板的渲染流程。

條件判斷語句與Python類似，但其不需要使用冒號結(jié)尾，而結(jié)束控制語句，需要使用endif關(guān)鍵字：

{% if daxin.safe %}
 daxin is safe.
{% elif daxin.dead %}
 daxin is dead
{% else %}
 daxin is okay
{% endif %}

for循環(huán)實現(xiàn)一組元素的渲染：

<ul>
{% for user in users %}
 <li>{{ user.username|title }}</li>
{% endfor %}
</ul>

在jinja2中不存在while循環(huán)。

Jinja2 宏

宏類似Python代碼中的函數(shù)。如：

{% macro render_comment(comment) %}  
 <li>{{ comment }}</li>
{% endmacro %}
<ul>
 {% for comment in comments %}
 {{ render_comment(comment)}}
 {% endfor %}
</ul>

還可以將宏保存在單獨的文件中，然后在需要的時候?qū)耄?/p>

{% import 'macro.html' as macros%}
<ul>
 {% for comment in comments %}
 {{ macros.render_comment(comment)}}
 {% endfor %}
</ul>

Jinja 模板繼承

jinja2中最強大的部分就是模板繼承，這類似于python代碼的類繼承。首先創(chuàng)建名為base.html的基模板：

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href={{ static('css/mystyle.css') }}>
  <title>{% block title %}My amazing site{% endblock %}</title>
</head>

<body>
  <div id="sidebar">
    {% block sidebar %}
    <ul>
      <li><a href="/" rel="external nofollow" >Home</a></li>
      <li><a href="/blog/" rel="external nofollow" >Blog</a></li>
    </ul>
    {% endblock %}
  </div>

  <div id="content">
    {% block content %}{% endblock %}
  </div>
</body>
</html>

基模板中定義的區(qū)塊可在衍生模板中覆蓋。Jinja2使用block和endblock指令在基模板中定義內(nèi)容區(qū)塊。在上述基模板中定義了head、title、content和footer區(qū)塊。

新建一個topics.html的文件，繼承基模板，用來顯示全部的topics。

{% extends "base.html" %}

{% block title %}Topics{% endblock %}
{% block head %}
  {{ super() }}

{% endblock %}
{% block content %}
{% for topic in topics %}
  <h2>{{ topic.id }}</h2>
  <p>{{ topic.text }}</p>
{% endfor %}
{% endblock %}

extends指令聲名這個模板衍生自base.html。在extends指令后，基模板的4個區(qū)塊被重新定義，模板引擎將其插入合適的位置。如果基模板和衍生模板的同名區(qū)塊有內(nèi)容，衍生模板的內(nèi)容會被顯示。在衍生模板區(qū)塊中調(diào)用super()，引用基模板的同名內(nèi)容。topics.html里的head區(qū)塊引用了基模板的css文件。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: