2024 網頁x人因xDjango 實務課程 09 Static 資料夾建立
閱讀時間約 6 分鐘
介紹
大家第一次聽到，static 肯定很陌生。簡單來說，這個東西就是拿來存放一些我們經常會用到的檔案，比方說：
CSS、JS、Image、Audio、Video......
只要是網頁上可能會用到的檔案，我們基本上都會存在 static 當中，方便我們可以在不同路徑中，快速的存取這些檔案，不需要做多餘的退後與前往資料夾。
另外一點考量也是，為了讓使用者不要輕易取得你的所有資料，因此必須透過連結來取得這些資料，讓 djnago 多一層防護。
設定
建立資料夾
首先，建立一個資料夾，我們取名為 static。
settings.py 設定
在這裡，我們要設定連結剛建立好的資料夾。
請大家在 STATIC_URL = 'static/ 的下方，再寫一個這個：
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
完整內容會長這樣：
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/5.0/howto/static-files/
STATIC_URL = 'static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
# Default primary key field type
# https://docs.djangoproject.com/en/5.0/ref/settings/#default-auto-field
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
這個指令是，透過 django 連結我們的資料夾 static ，讓他可以直接做取用。
測試
下載圖片
請大家下載上面這張圖片，到 static 資料夾。
下載後應該會長這樣：
HTML 引用
接著，我們回到上次做的自我介紹網站：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自我介紹網頁</title>
</head>
<body>
<div>
<h1>自我介紹</h1>
<div>
<div>
<img width="100px" height="100px" src="https://images.vocus.cc/9f4541c8-fa41-46a0-86d9-585401d176ef.png"/>
</div>
<div>
<h2>Ting</h2>
</div>
<div>
<p>大家好，我是小明，一名網頁設計師，專注於<b><i>創造美觀</i></b>且用戶友好的網站界面。自從大學畢業後，我便踏入這個充滿創意與挑戰的行業，至今已有五年的工作經驗。</p>
<p>除了專業領域外，我還對<b><i>攝影</i></b>充滿熱情，喜歡利用周末的時間去探索不同的風景與城市，捕捉那些稍縱即逝的美好瞬間。</p>
<p>此外，我也是一名吉他愛好者，<b><i>彈奏吉他</i></b>不僅為我帶來無窮的樂趣，也讓我在忙碌的生活中找到了平靜與慰藉。我相信，無論是在專業領域還是個人愛好中，持續學習與探索都是成長的關鍵。</p>
</div>
<div>
<a href="https://vocus.cc/salon/65baa7cafd897800016a45a2/room/2024_WEB">點我了解更多</a>
</div>
</div>
</div>
</body>
</html>
接著找到 <img> ，將其改為：
{% load static %}
<img width="100px" height="100px" src="{% static images/9f4541c8-fa41-46a0-86d9-585401d176ef.png %}"/>
- 首先，我們會透過
{% load static %}去讓他讀取static這個資料夾。 - 接著在
img的屬性src中，修改路徑為：
{% static 'images/9f4541c8-fa41-46a0-86d9-585401d176ef.png' %}
其中組成是：
- 先寫
{% static %} - 在後面新增
static後的路徑，以我為例就是images/9f4541c8-fa41-46a0-86d9-585401d176ef.png。
實際測試
接著讓我們來測試看看吧。
首先輸入指令：
python manage.py runserver
接著打開網頁：
http://127.0.0.1:8000/Index/
就能看見成功讀取圖片的網頁了：
結論
感謝你看到這邊，把這些內容持之以恆地讀完肯定不容易，你辛苦啦！
今天我們學到了如何去建立 static ，大家可以更有效的去讀取檔案，並且更安全。
接下來，我們將介紹 CSS 的連結方法，作為 CSS 課程前的第一步。
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
2024年網頁設計將帶來一系列新興趨勢，包括3D互動元素的應用、深色模式的普及、超越扁平設計、進階動畫的重要性和模板的普及化。這些趨勢將為網頁設計帶來更多的創造力和可能性，同時提升用戶體驗和吸引力。
Q：什麼是Frontpage網頁設計軟體？
Microsoft FrontPage曾是微軟公司推出的一款網頁設計與管理工具，目前已不再生產。它一度作為入門級網頁設計者的首選，而微軟隨後推出了Expression Web和Microsoft SharePoint Designer來取代...
擁有專業和吸引人的網站對任何企業至關重要。選擇一家提供全方位維護和售後服務的網頁設計公司至關重要，他們擁有豐富的經驗和技能，以提升客戶的在線存在感和業務成果。
在數位時代，擁有一個設計良好且使用者友善的網站對學校來說至關重要，能夠有效地與學生、家長和更廣泛的社區進行溝通。學校網站作為一個數位樞紐，提供重要資訊、展示成就，並培養社群感。本文將探討學校網頁設計的重要性，主要元素和最佳實踐，以幫助學校打造引人入勝的線上存在感。
這篇文章探討了WordPress在大品牌網站設計中的應用以及相關的背景和考慮因素。透過分析開源與品質、大品牌的需求、大品牌的案例以及安全性和維護等方面，提供了對於WordPress在大品牌中使用的觀點和見解。
WordPress 是一個開源的內容管理系統，提供了豐富的功能和擴展性，成為全球最受歡迎的網站建設平臺之一。本文介紹了WordPress的優點、安裝方法、網站設計和SEO優化。最後，提供了一些常見問題解答。
這篇文章介紹了9個免費網頁製作平臺的特色、優缺點和操作難易度。涵蓋平臺如Wix、WordPress.com、Weebly、Squarespace、Jimdo、Gatsby、Webnode、Yola和Strikingly，有助於讀者找到適合自己的網站製作工具。
專業網頁設計服務能夠提升企業形象，增加線上曝光和銷售機會。我們提供需求分析、設計和開發、測試和優化、上線和支持的一站式服務。為客戶解答網頁設計常見問題。
在當今數位化時代，網頁設計已成為商業和個人表達的重要途徑。無論是企業建立品牌形象，還是個人展示創意作品，一個具有吸引力且功能全面的網站都是不可或缺的。網頁設計不僅涉及美學布局，更包含了使用者體驗（UX）、使用者介面（UI）和技術實現等多方面的考量。隨著技術的進步和網頁設計理念的不斷演進，網頁設計已經
本文介紹了 Google Analytics 4（GA4）示範帳戶的取得方式，並提供了幾種 GA4 分析小練習，讓新手能夠實際練習和學習。文章包含了關於 GA4 示範帳戶的資源、如何移除帳戶存取權以及各種分析練習，旨在幫助讀者更熟悉 GA4 這個工具。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
2024年網頁設計將帶來一系列新興趨勢，包括3D互動元素的應用、深色模式的普及、超越扁平設計、進階動畫的重要性和模板的普及化。這些趨勢將為網頁設計帶來更多的創造力和可能性，同時提升用戶體驗和吸引力。
Q：什麼是Frontpage網頁設計軟體？
Microsoft FrontPage曾是微軟公司推出的一款網頁設計與管理工具，目前已不再生產。它一度作為入門級網頁設計者的首選，而微軟隨後推出了Expression Web和Microsoft SharePoint Designer來取代...
擁有專業和吸引人的網站對任何企業至關重要。選擇一家提供全方位維護和售後服務的網頁設計公司至關重要，他們擁有豐富的經驗和技能，以提升客戶的在線存在感和業務成果。
在數位時代，擁有一個設計良好且使用者友善的網站對學校來說至關重要，能夠有效地與學生、家長和更廣泛的社區進行溝通。學校網站作為一個數位樞紐，提供重要資訊、展示成就，並培養社群感。本文將探討學校網頁設計的重要性，主要元素和最佳實踐，以幫助學校打造引人入勝的線上存在感。
這篇文章探討了WordPress在大品牌網站設計中的應用以及相關的背景和考慮因素。透過分析開源與品質、大品牌的需求、大品牌的案例以及安全性和維護等方面，提供了對於WordPress在大品牌中使用的觀點和見解。
WordPress 是一個開源的內容管理系統，提供了豐富的功能和擴展性，成為全球最受歡迎的網站建設平臺之一。本文介紹了WordPress的優點、安裝方法、網站設計和SEO優化。最後，提供了一些常見問題解答。
這篇文章介紹了9個免費網頁製作平臺的特色、優缺點和操作難易度。涵蓋平臺如Wix、WordPress.com、Weebly、Squarespace、Jimdo、Gatsby、Webnode、Yola和Strikingly，有助於讀者找到適合自己的網站製作工具。
專業網頁設計服務能夠提升企業形象，增加線上曝光和銷售機會。我們提供需求分析、設計和開發、測試和優化、上線和支持的一站式服務。為客戶解答網頁設計常見問題。
在當今數位化時代，網頁設計已成為商業和個人表達的重要途徑。無論是企業建立品牌形象，還是個人展示創意作品，一個具有吸引力且功能全面的網站都是不可或缺的。網頁設計不僅涉及美學布局，更包含了使用者體驗（UX）、使用者介面（UI）和技術實現等多方面的考量。隨著技術的進步和網頁設計理念的不斷演進，網頁設計已經
本文介紹了 Google Analytics 4（GA4）示範帳戶的取得方式，並提供了幾種 GA4 分析小練習，讓新手能夠實際練習和學習。文章包含了關於 GA4 示範帳戶的資源、如何移除帳戶存取權以及各種分析練習，旨在幫助讀者更熟悉 GA4 這個工具。