一、靜態資源的引入方式
1.在項目根目錄下創建 static文件夾。
2.settings.py 中配置環境變量,方便程序可以識別此路徑。
要在 STATIC_URL = '/static/' 下邊添加下面代碼
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
或
STATICFILES_DIRS = os.path.join(BASE_DIR, 'static')
3.前端引入
在頁面頂部:
{% load static %}
#引入CSS、JS,相當於拼接的字符串路徑
{% static 'xxx.css' %}
{% static 'xxx.js' %}
二、模板(template)包含、繼承與 {% block %} 的用法
使用模板前,先設置settings.py裏的變量TEMPLATES的'DIRS'值,模板目錄templates添加爲環境變量,這樣Django才能自動找到模板頁面:
TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os.path.join(BASE_DIR, 'templates')], #這行要修改 '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', ], }, }, ]
Django模板存放方式有兩種方法:
1、在項目根下創建templates目錄,然後把模板存入在templates目錄裏,多個APP的話,就直接在templates目錄下建立與APP名相同名稱的目錄即可。Django會自動查找到,這種方法簡單、直觀,適合個人或小項目。例:myblog\templates\blog\;myblog\templates\blog2\;myblog\templates\blog3\;
2、各個APP下單獨建立一個templates目錄,然後再建立一個與應用名相同的的目錄,把模板放到對應的目錄裏。這樣的方法適合大項目多人協作,每個人只負責各自的APP項目的時候。多樣式多站點(域名)的情況也適用,不同的APP用不同的模板樣式,不同的域名。例:myblog\blog\templates\blog;myblog\blog2\templates\blog2\;myblog\blog3\templates\blog3\;
兩種方法,模板調用方法一樣:
return render(request, 'app/index.html', context)
兩種方法各有優點,大家選適合自己的就好,後面本教程就用第一個方法。
一般的網站所有頁面的頭部和尾部都一樣,只有中間的部分不一樣。這時我們就可以把這個頁面分爲三個部分,每個部分分別存放在頁面head.html、index.html、footer.html中,其中,頭部head.html用來放所有頁面頭部相同的代碼、主體部分index.html放與其它頁面不相同的代碼、尾部head.html放與其它頁面尾部相同的代碼。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>MyBlog</title> </head> <body> <div>頭部</div>
#-----------以上部分可以保存成header.html,作爲頭部------------ <div>中部</div> #這一句作爲中部index.html
#-----------以下部分可以保存成footer.html,作爲底部------------
<div>尾部</div> </div> </body> </html>
index.html內容如下,是不是就簡單的實際了頭尾不變,只變中間的內容。其實如果你想拆分,可以拆成無數個塊,然後再組合,只改你想改變的塊就可以。這個就是塊的標籤{% block content %}
{% include 'head.html' %} <div>中部</div> {% include 'footer.html' %}
我們使用base頁面作爲基礎頁面,就保含一些固定的內容。{% block xxx%} {% endblock %} 這兩個之間的就是內容會填充的地方。
templates/base.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>MyBlog</title> </head> <body> <div>頭部</div> {% block content %} {% endblock %}
{% block test%}
{% endblock %}
<div>尾部</div> </div> </body> </html>
templates/index.html
{% extends "base.html" %} {% block content %} <div>中部</div> {% endblock %}
{% block test%}
<div>test內容</div>
{% endblock %}
說明:
這裏面的{% extends "base.html" %} 的意思是繼承 base.html頁面的代碼,需要留意的是,使用繼承方法的話,這個代碼一定要放頁面的第一行。
塊一般以{% block xxx %}開始,你要變化的動態的內容放到中間,以 {% endblock %}結尾。其中xxx在base.hmtl隨意起名,在引入的頁面中使用對應的名字就會填充到對應的塊位置。這裏有兩個塊:一個content、一個test塊。