文章

Django - 靜態文件與媒體文件

發布於
作者 Ned Hsu 5 分鐘閱讀

今天我們將學習如何在 Django 中處理靜態文件和媒體文件。靜態文件（如 CSS、JavaScript、圖片等）和媒體文件（如用戶上傳的圖片或檔案）是任何網頁應用程式不可缺少的一部分。

課程目標

  • 瞭解 Django 中靜態文件與媒體文件的作用與配置。
  • 設置靜態文件與媒體文件的目錄。
  • 在模板中引用靜態文件。
  • 實現用戶上傳媒體文件的功能。

課程內容

1. 靜態文件

1.1 靜態文件的作用

靜態文件通常是應用程式的前端資源，包括：

  • CSS：設計樣式。
  • JavaScript：前端互動邏輯。
  • 圖片：網站圖片或圖示。

1.2 配置靜態文件

在 settings.py 中配置靜態文件路徑：

1
2
3
4
5

import os

# 靜態文件目錄
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

1.3 創建靜態文件目錄

在專案目錄下創建 static 文件夾，並將 CSS 或圖片文件放入其中：

1
2
3
4
5
6
7

my_project/
│
├── static/
│   ├── css/
│   │   └── styles.css
│   └── images/
│       └── logo.png

1.4 在模板中引用靜態文件

使用 {% load static %} 引用靜態文件：

1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html>
<html>
  <head>
    <title>靜態文件範例</title>
    <link rel="stylesheet" href="{% static 'css/styles.css' %}" />
  </head>
  <body>
    <h1>歡迎來到我的網站</h1>
    <img src="{% static 'images/logo.png' %}" alt="Logo" />
  </body>
</html>

2. 媒體文件

2.1 媒體文件的作用

媒體文件通常是用戶上傳的文件，如：

  • 圖片（如用戶頭像）。
  • 文件（如 PDF、壓縮包等）。

2.2 配置媒體文件

在 settings.py 中配置媒體文件路徑：

1
2
3

# 媒體文件目錄
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

2.3 創建媒體文件目錄

在專案目錄下創建 media 文件夾，用於存放用戶上傳的文件。

2.4 URL 路由配置

在開發環境下，設置 URL 以處理媒體文件：

1
2
3
4
5
6
7
8
9
10

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # 其他路由...
]

# 媒體文件路由
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

3. 實現圖片上傳功能

3.1 修改模型

在 models.py 中為 Blog 系統的文章新增圖片字段：

1
2
3
4
5
6
7
8
9
10
11
12

from django.db import models

class Post(models.Model):
    title = models.CharField(max_length=200, verbose_name="標題")
    content = models.TextField(verbose_name="內容")
    author = models.CharField(max_length=100, verbose_name="作者")
    created_at = models.DateTimeField(auto_now_add=True, verbose_name="建立時間")
    updated_at = models.DateTimeField(auto_now=True, verbose_name="更新時間")
    image = models.ImageField(upload_to='post_images/', null=True, blank=True, verbose_name="圖片")

    def __str__(self):
        return self.title

3.2 安裝 Pillow

Django 使用 Pillow 處理圖片文件，需安裝：

1

pip install pillow

3.3 修改表單

在 forms.py 中新增圖片字段：

1
2
3
4
5
6
7

from django import forms
from .models import Post

class PostForm(forms.ModelForm):
    class Meta:
        model = Post
        fields = ['title', 'content', 'author', 'image']

3.4 修改視圖

在 views.py 中處理圖片上傳：

1
2
3
4
5
6
7
8
9

def post_create(request):
    if request.method == 'POST':
        form = PostForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
            return redirect('post_list')
    else:
        form = PostForm()
    return render(request, 'blog/post_form.html', {'form': form})

3.5 修改模板

在文章詳情模板中顯示圖片：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html>
  <head>
    <title>{{ post.title }}</title>
  </head>
  <body>
    <h1>{{ post.title }}</h1>
    <p>{{ post.content }}</p>
    <p>作者: {{ post.author }}</p>
    <p>時間: {{ post.created_at }}</p>
    {% if post.image %}
    <img src="{{ post.image.url }}" alt="文章圖片" />
    {% endif %}
    <a href="{% url 'post_list' %}">返回列表</a>
  </body>
</html>

4. 本日總結

  • 學習了靜態文件與媒體文件的區別與用途。
  • 配置了靜態文件與媒體文件目錄。
  • 實現了圖片上傳功能，並在模板中渲染圖片。

作業

  1. 為文章新增一個文件上傳字段（如 PDF 文件），並在模板中提供下載連結。
  2. 增加 CSS 樣式，優化 Blog 系統的頁面外觀。
  3. 將靜態文件與媒體文件的配置整合到 Blog 系統中。
Software, Django
Django
本文章以 CC BY 4.0 授權