程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式師世界 >> 編程語言 >  >> 更多編程語言 >> Python

Django4 -----深入模板

編輯:Python

文章目錄

  • 一. 深入模板
    • (1). 模板語法
    • (2). 過濾器
      • 1). default
      • 2). length
      • 3). date
    • (3). 標簽
    • (4). 模板繼承

一. 深入模板

(1). 模板語法

view:{"HTML變量名" : "views變量名"}
HTML:{{變量名}} # 注意是雙大括號
可以用”.“索引取出對應的元素
可以用”.“鍵取出對應的值

(2). 過濾器

{ { 變量名 | 過濾器:可選參數 }}

例如:

{
{
 name|lower }}

{ { name }} 變量被過濾器 lower 處理後,文檔大寫轉換文本為小寫。

過濾管道可以被套接,也就是說上一個過濾器管道的輸出可以作為下一個管道的輸入。
比如:{ { my_list|first|upper }} 的作用就是把第一個元素大寫。

當然,有些過濾器是有參數的,需要用雙引號(“ ”)來包含它。
比如:{ { bio|truncatewords:“30” }} 這裡將顯示bio變量的前三十個元素。

常用的過濾器有:length, default, date等等

1). default

作用:為變量提供一個默認值
如果變量的值是False的話,就使用默認值。
比如: { { name|default:“cannot find the website” }}

2). length

作用:返回對象的長度,適用於字符串和列表。
字典返回的是鍵值對的數量,集合返回的是去重後的長度。
比如:{ { name|length }}

3). date

作用:根據給定格式對一個日期變量進行格式化。
格式 Y-m-d H:i:s返回 年-月-日 小時:分鐘:秒 的格式時間。
比如:{ { time|date:“Y-m-d” }}

(3). 標簽

因為標簽有點多,個人又比較懶,因此把它放在一份代碼裡展示了。
farther.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<h1>{
{
 name }}</h1>
<p>
{
%if num > 90 and num <= 100 %} # 判斷
優秀
{
% elif num > 60 and num <= 90 %}
合格
{
% else %}
一邊玩去~
{
% endif %}
</p>
<p>
{
% for i in list %} # 循環
{
{
 i }}
{
% empty %}
空空如也~
{
% endfor %}
</p>
</body>
</html>

views.py:

from django.shortcuts import render
def hello_world(request):
conf_name = 'This is my website!!!'
views_name = 88
views_list = ["菜鳥教程", "菜鳥教程1", "菜鳥教程2", "菜鳥教程3", ]
return render(request, 'farther.html', {
'name': conf_name, 'num': views_name, 'list': views_list})

接著在浏覽器中運行就可以看到相關的頁面了。
(⊙o⊙)…,因為沒加CSS和JS,頁面略顯簡陋,問題不大。

(4). 模板繼承

模板可以用繼承的方式來實現復用,減少冗余內容。
網頁的頭部和尾部內容一般都是一致的,我們就可以通過模板繼承來實現復用。
父模板用於放置可重復利用的內容,子模板繼承父模板的內容,並放置自己的內容。

對於父模板:

{
% block 名稱 %}
預留給子模板的區域,可以設置設置默認內容,注意不同地方的默認值不能相同
{
% endblock 名稱 %}

對於子模板:

{
% extends "父模板路徑"%}

子模板設置父模板留著的內容,可以使用如下代碼:

{
 % block 名稱 % }
內容
{
% endblock 名稱 %}

下面來實操一波,在templates文件夾下創建一個新的H5文件:base.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<h1>Hello World!</h1>
<p>Test for parent and child template </p>
{
% block mainbody %}
<p>original</p>
{
% endblock %}
</body>
</html>

在farther.html加上以下代碼:

 {
%extends "base.html" %}
{
% block mainbody %}
<p>繼承了 base.html 文件</p>
{
% endblock %}

注意:這幾句代碼一定要放在第一行或者下的第一行,不然就會報錯滴。
打開網頁就變成了這樣

其他代碼如果不刪除的話,也是無效的,因為繼承了父模板之後,就只顯示父模板。
如果想讓其他代碼顯示的話,可以全寫在父模板裡。


  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式師世界 All Rights Reserved