目錄
- 效果展示:
- 1.靜態(tài)文件引用:
- (1)創(chuàng)建靜態(tài)文件目錄:
- (2)靜態(tài)文件路徑的配置:
- (3)創(chuàng)建三大靜態(tài)文件:
- (4)靜態(tài)文件的引用:
引言:
在我們Django中如何引用三大靜態(tài)文件(JavaScript,CSS,image)呢?
這就是本文要講述的內(nèi)容——靜態(tài)文件的引用!
效果展示:
![](/d/20211017/c9e7b7eb82d1d446d40736990490e134.gif)
點(diǎn)擊確定之后:
![](/d/20211017/25fe14b5d9be5f081b1d15b19b204f99.gif)
1.靜態(tài)文件引用:
(1)創(chuàng)建靜態(tài)文件目錄:
在項(xiàng)目目錄下創(chuàng)建static目錄, 為了區(qū)分開(kāi)各種類型的靜態(tài)文件,再分別創(chuàng)建css,image,js文件目錄:
![](/d/20211017/44617384378d234be4f54659200ae86f.gif)
(2)靜態(tài)文件路徑的配置:
在settings.py文件中添加STATICFILES_DIRS
設(shè)置靜態(tài)文件目錄路徑,同templates設(shè)置。
(settings.py文件中加入下述代碼即可?。?/em>
# 配置靜態(tài)文件的路徑 BASE_DIR是項(xiàng)目根目錄
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static")
]
(3)創(chuàng)建三大靜態(tài)文件:
1.JS——?jiǎng)?chuàng)建文件/static/js/index.js
![](/d/20211017/6f88d47ab9b54337c60627ab1076831f.gif)
2.CSS——?jiǎng)?chuàng)建文件/static/css/index.css:
![](/d/20211017/820a140b5a42f6201e153bc62d08d128.gif)
3.image——?jiǎng)?chuàng)建文件/static/image/first.jpg:
![](/d/20211017/e5bfcc1299f26d6f75085a8ff7df757b.gif)
總覽:
![](/d/20211017/f66b98643cea3dd6b10c8c053442196f.gif)
(4)靜態(tài)文件的引用:
{#靜態(tài)文件的加載#}
{% load static %}
{# 注意::: {% %}這是模板標(biāo)簽 #}
!DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>測(cè)試!/title>
{#css文件的引用#}
link rel="stylesheet" href="{% static 'css/index.css' %}" rel="external nofollow" >
/head>
body>
{#圖片文件的引用#}
img src="{% static 'image/first.jpg' %}" alt="">
{#js文件的引用#}
script src="{% static 'js/index.js' %}">/script>
/body>
/html>
到此這篇關(guān)于Django零基礎(chǔ)入門之靜態(tài)文件的引用的文章就介紹到這了,更多相關(guān)Django靜態(tài)文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
您可能感興趣的文章:- Django實(shí)現(xiàn)靜態(tài)文件緩存到云服務(wù)的操作方法
- Django靜態(tài)文件加載失敗解決方案
- 快速解決Django關(guān)閉Debug模式無(wú)法加載media圖片與static靜態(tài)文件
- Django添加bootstrap框架時(shí)無(wú)法加載靜態(tài)文件的解決方式
- django配置app中的靜態(tài)文件步驟
- 如何分離django中的媒體、靜態(tài)文件和網(wǎng)頁(yè)