Django零基礎(chǔ)入門之靜態(tài)文件的引用
引言：
在我們Django中如何引用三大靜態(tài)文件（JavaScript，CSS,image）呢？
這就是本文要講述的內(nèi)容——靜態(tài)文件的引用！
效果展示：
點(diǎn)擊確定之后：
1.靜態(tài)文件引用：
（1）創(chuàng)建靜態(tài)文件目錄：
在項(xiàng)目目錄下創(chuàng)建static目錄, 為了區(qū)分開各種類型的靜態(tài)文件，再分別創(chuàng)建css,image,js文件目錄：
（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
2.CSS——?jiǎng)?chuàng)建文件/static/css/index.css：
3.image——?jiǎng)?chuàng)建文件/static/image/first.jpg：
總覽：
（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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
python3 os進(jìn)行嵌套操作的實(shí)例講解
在本篇文章里小編給大家整理了關(guān)于python3 os進(jìn)行嵌套操作的實(shí)例內(nèi)容，有興趣的朋友們可以學(xué)習(xí)下。2020-11-11
python opencv圖片編碼為h264文件的實(shí)例
今天小編就為大家分享一篇python opencv圖片編碼為h264文件的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-12-12
windows下安裝Python的XlsxWriter模塊方法
今天小編就為大家分享一篇windows下安裝Python的XlsxWriter模塊方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-05-05
Python3中簡單的文件操作及兩個(gè)簡單小實(shí)例分享
文件操作是我們?nèi)粘Ｔ谑褂胮ython的時(shí)候經(jīng)常會(huì)用到的，下面這篇文章主要給大家介紹了關(guān)于Python3中簡單的文件操作及兩個(gè)簡單小實(shí)例的相關(guān)資料，文中介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-06-06
將Python代碼嵌入C++程序進(jìn)行編寫的實(shí)例
這篇文章主要介紹了將Python代碼嵌入C++程序進(jìn)行編寫的實(shí)例,盡管通常還是Python代碼中調(diào)用C++程序的情況較多...需要的朋友可以參考下2015-07-07
Python實(shí)現(xiàn)的人工神經(jīng)網(wǎng)絡(luò)算法示例【基于反向傳播算法】
這篇文章主要介紹了Python實(shí)現(xiàn)的人工神經(jīng)網(wǎng)絡(luò)算法,結(jié)合實(shí)例形式分析了Python基于反向傳播算法實(shí)現(xiàn)的人工神經(jīng)網(wǎng)絡(luò)相關(guān)操作技巧,需要的朋友可以參考下2017-11-11
使用pyecharts在jupyter notebook上繪圖
這篇文章主要介紹了使用pyecharts在jupyter notebook上繪圖，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-07-07
python實(shí)現(xiàn)車輛跟隨滑?？刂频膶?shí)例
這篇文章主要介紹了python實(shí)現(xiàn)車輛跟隨滑模控制,采用指數(shù)趨近律、等速趨近律、準(zhǔn)滑?？刂频姆椒ㄍ瓿绍囕v跟隨問題的仿真，運(yùn)行結(jié)果以圖片形式保存在同目錄下，需要的朋友可以參考下2022-05-05
這篇文章主要介紹了Python的Urllib庫的一些高級(jí)用法,是用Python編寫爬蟲的一些基礎(chǔ)知識(shí),需要的朋友可以參考下2015-04-04
基于Python實(shí)現(xiàn)一個(gè)圖片壓縮工具
圖片壓縮是在保持圖像質(zhì)量的同時(shí)減小圖像文件大小的過程,本文將學(xué)習(xí)如何使用Python來實(shí)現(xiàn)一個(gè)簡單但功能強(qiáng)大的圖片壓縮工具,以及如何在不同情境下進(jìn)行圖片壓縮,希望對(duì)大家有所幫助2024-01-01