1. 程式人生 > >Django學習筆記007-模板載入靜態資源

Django學習筆記007-模板載入靜態資源

在一個網頁中,不僅僅有html,還需要css、js、圖片等,因此在DTL中載入靜態資源是必須要解決的問題。

在DTL中,使用static標籤來載入靜態檔案,要使用static標籤,首先需要{% load static %}

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

1、首先確保django.contrib.staticfiles  已經新增到 settings.INSTALLED_APPS中(django最新版本不需要進行設定,設定後反而會提示:django.core.exceptions.ImproperlyConfigured: Application labels aren't unique, duplicates: staticfiles)

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'front',
    'django.contrib.staticfiles'
]

2、確保在settings.py中設定了STATIC_URL (最新版本django已經預設添加了)

STATIC_URL='/static/'

3、在已經安裝了的app下建立一個資料夾叫做static,然後再在這個static資料夾下建立一個當前app的名字的資料夾,

再把靜態檔案放在這個資料夾下。例如,你的app叫做book,有一個靜態檔案叫做tudou.jpg,那麼路徑為 book/static/book/tudou.jpg

4、如果有一些靜態檔案是不和任何app掛鉤的,那麼可以在settings.py中新增STATICFILES_DIRS,以後DTL會在這個路徑中查詢

靜態檔案。比如

STATICFILES_DIRS=[os.path.join(BASE_DIR,'static')]

5、在模板中使用load標籤載入static標籤,比如要載入在專案static資料夾下的style.css的檔案,那麼示例程式碼如下:

{% load static %}

<link rel=‘stylesheet’ href=“{% static ‘style.css’%}”>

 

{% load static %}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .nav{
            overflow: hidden;
        }
        .nav li{
            float:left;
            list-style: none;
            margin: 0 20px;
        }
    </style>
</head>
<body background="{% static 'front/lesser_cold.jpg' %}">
    <ul class="nav">
        <li><a href="/">首頁</a></li>
        <li><a href="{% url 'hospital' %}">醫院</a></li>
    </ul>
    <p >
        {% block content %}{% endblock %}
    </p>
</body>
</html>