Django 學習筆記（三） --- HTML 模版加載 css、js、img 靜態文件

時間 2019-11-20

標籤 django 學習筆記 html 模版加載 css img 靜態文件欄目 Python 简体版

原文原文鏈接

人生苦短 ~ css

Tips：僅適用於 Python 3+（反正差異不大，py2 改改也能用）。由於據 Python 之父 Guido van Rossum 說會在 2020 年中止對 Python 2 的官方支持，因此若是你還在使用 Python 2 那就要早作準備了，畢竟沒有官方的支持使用起來也不順心的。html

1. 建立目錄web

在咱們的項目中建立靜態文件存放目錄，HelloDjango 目錄下建立文件夾 static，而後在 static 文件目錄中新建 js、css、images 三個文件夾用於存放靜態資源文件sql

HelloDjango
|----HelloDjango
|----manage.py
|----db.sqlite3 
|----mydjango
|----templates
|----static
    |----images
    |----css
    |----js

2. 設置靜態文件目錄django

打開文件 settings.py，在該文件中查找變量 STATIC_URL，在該變量下添加以下代碼：瀏覽器

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

STATIC_URL 定義了 web 服務連接媒體的 URL 地址，STATICFILES_DIRS 容許自定義新的 static 目錄。工具

3. 訪問圖片ui

在咱們的靜態目錄中（/static/images/）放入一張 2018.jpg 圖片，打開咱們的 Django 服務訪問咱們的圖片（http://127.0.0.1:8000/static/images/2018.jpg）：spa

若是沒有出現請查看 setings.py 文件是否設置正確，並重啓服務。若是出現了，試着加入其餘類型的文件到 static 目錄並在瀏覽器上訪問。code

4. 模版中加載圖片

把咱們的模版文件 index.html 文件修改以下：

<!DOCTYPE html>
{% load static %} <!-- 模板標籤加載靜態文件路徑，也能夠改爲 load staticfiles -->
<html>
<head>
    <title>HelloDjango</title>
</head>
<body>
    <a href="/mydjango/index/">Index</a><hr />
    <h3>HelloDjango</h3>
    動態數據：<strong>{{ mydata }}</strong>
    <hr />
    <img src="{% static 'images/2018.jp' %}" /> <!-- 加載咱們的靜態圖片 -->
</body>
</html>