2024-03-14|閱讀時間 ‧ 約 26 分鐘

2024 網頁x人因xDjango 實務課程 09 Static 資料夾建立

介紹

大家第一次聽到，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 課程前的第一步。

分享至

成為作者繼續創作的動力吧！

2024 讓你 8分鐘懂機器學習

追蹤

從 Google News 追蹤更多 vocus 的最新精選內容

作者的相關文章

2024 網頁x人因xDjango 實務課程 10 CSS 連結方式

咖啡因學習教室的其他內容

你可能也想看

發表回應

成為會員後即可發表留言