1. 程式人生 > >Django中static(靜態)檔案詳解以及{% static %}標籤的使用

Django中static(靜態)檔案詳解以及{% static %}標籤的使用

想要深入學習Django的可以看一些這個視訊:超細講解Django打造大型企業官網

在一個網頁中,不僅僅只有一個html骨架,還需要css樣式檔案,js執行檔案以及一些圖片等。因此在DTL中載入靜態檔案是一個必須要解決的問題。在DTL中,使用static標籤來載入靜態檔案。要使用static標籤,首先需要{% load static %}

載入靜態檔案的步驟如下:

  1. 首先確保django.contrib.staticfiles已經新增到settings.INSTALLED_APPS中。
  2. 確保在settings.py中設定了STATIC_URL
    注意: 上面兩條都是在建立Django 專案的時候就自動給我們弄好了,只要我們沒有去改動它,就不用管。
  3. 在已經安裝了的app下建立一個資料夾叫做static,然後再在這個static資料夾下建立一個當前app的名字的資料夾,再把靜態檔案放到這個資料夾下。例如你的app叫做book,有一個靜態檔案叫做book.jpg,那麼路徑為book/static/book/book.jpg。(為什麼在app下建立一個static資料夾,還需要在這個static下建立一個同app名字的資料夾呢?原因是如果直接把靜態檔案放在static資料夾下,那麼在模版載入靜態檔案的時候就是使用book.jpg,如果在多個app之間有同名的靜態檔案,這時候可能就會產生混淆。而在static資料夾下加了一個同名app資料夾,在模版中載入的時候就是使用app名/book.jpg
    ,這樣就可以避免產生混淆。)
    注意: 資料夾的名字必須為static
  4. 如果有一些靜態檔案是不和任何app掛鉤的。即不再任何一個app的目錄下。那麼可以在settings.py中新增STATICFILES_DIRS,以後DTL就會在這個列表的路徑中查詢靜態檔案。例如我們在manage.py的同級目錄下新建一個static的資料夾。然後在settings.py:中新增STATICFILES_DIRS
STATICFILES_DIRS = [
	os.path.join(BASE_DIR,"static")
]

注: 第三種和第四種方法都可以載入靜態檔案,我的個人習慣是在manage.py

的同級目錄下新建一個static資料夾,然後將所有的靜態檔案進行分類的在裡面儲存。而不去app中新建一個static的資料夾。但這只是我的個人習慣。畢竟不管是黑貓白貓,能抓到老鼠的就是好貓,所以只要我們能把專案做出來能執行,並且程式碼結構有邏輯性、層次感就行了。

  1. 在模版中使用load標籤載入static標籤。比如要載入在專案的static資料夾下的style.css的檔案。那麼示例程式碼如下:
{% load static %}

<link rel="stylesheet" href="{% static 'style.css' %}">

注意: {% load static %}需要放在html的頭部位置(至少在使用static標籤的上面),一般都是放在html的最上面。如果{% extend %}標籤和{% load static %}同時存在,{% extend %}需要放在最上面,然後再放{% load static %}等標籤。

  1. 如果不想每次在模版中載入靜態檔案都使用load載入static標籤,那麼可以在settings.py中的TEMPLATES/OPTIONS新增'builtins':['django.templatetags.static'],這樣以後在模版中就可以直接使用static標籤,而不用手動的load了。
    注意: 位置不要新增錯誤了
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',
            ],
            #新增在這個位置
            'builtins' : [
                'django.templatetags.static'
            ],
        },
    },
]
下面的不常用,但是可以瞭解一下。
  1. 如果沒有在settings.INSTALLED_APPS中新增django.contrib.staticfiles。那麼我們就需要手動的將請求靜態檔案的url與靜態檔案的路徑進行映射了。示例程式碼如下:
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
	# 其他的url對映
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

但平時我們並不會用到這個,Django內建已經將django.contrib.staticfiles新增進去了的,我們為什麼要給他刪除來自找麻煩呢?放在這裡也只是提供一個參考,瞭解一下。

最後分享一個快捷鍵的使用:在我們寫專案的時候,有時候修改了程式碼而沒有效果,這是因為瀏覽器使用的快取載入,這個時候我們就可以使用這個快捷鍵來不使用快取載入一個檔案,來達到檢視修改程式碼之後的效果的目地。

ctrl+shift+r 不使用快取載入一個檔案