2022/05/20 <Static & Media 세션>

Bootstrap 사용방법

NavBar 고르기 -> 모든 페이지에 적용하기 위해서는 !템플릿 상속!

템플릿 상속 : html 화면 상 계속해서 중복되는 부분을 별도의 html로 분류하여 1번만 작성하고 계속해서 재사용

base.html 만들어서 템플릿 뼈대로 사용

페이지마다 달라지는 부분은 

{% block content %} {% endblock %} 사이에 삽입

 

Static & Media 설정

1. Static : 개발자가 준비해두는 파일, 개발 리소스로서 정적인 파일. 바뀌지 않는다

2. Media : form을 통해 유저가 업로드하는 파일

 

Static 파일 설정하기

1) STATICFILES_DIRS : static 파일들이 존재할 경로 작성

2) STATIC_URL : static 파일을 제공할 url(url 로 브라우저로 직접 접근 가능)

3) STATIC_ROOT : 프로젝트를 배포할 경우, static 파일을 복사해 모아둘 경로

 

settings.py 설정

from pathlib import Path
import os

STATIC_URL = 'static/'

STATICFILES_DIRS = [
	BASE_DIR / 'static',
    ]
STATIC_ROOT = os.path.join('staticfiles')

 static 파일 접근 url

static 파일이 존재하는 경로 베이스 디렉토리(최상위 폴더) 밑 'static' 폴더

배포 한뒤 static 파일을 'staticfiles'폴더에 모으기

 

static 파일 사용하기

1. 최상위 폴더 밑에 'static' 폴더 생성

2. css, js, img 폴더 생성

3. css 폴더 밑에 test.css 생성

 

{% load static %} -> static 파일 불러오기

{% static 'css/test.css' %} static 파일 밑, css 폴더 밑 test.css 파일

 

앱마다 static 파일 따로 관리하기 위해서는 STATICFILES_DIRS 추가

 

배포: collectstatic

python manage.py collectstatic

 

Media 파일 설정하기

settings.py 설정

1) MEDIA_URL : 제공되는 media 파일에 접근할 url

2) MEDIA_ROOT : 제공된 media 파일을 모아 둘 경로

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

베이스 디렉토리(최상위 폴더) 밑 media 폴더에 모으기

 

urls.py 설정

urlpatterns 자체에 추가

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

[
path~~~
] + static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)

 

models.py 수정

class Blog(models.Model):
	title = models.CharField(max_length = 200)
    date = models.DateTimeField('date published')
    body = mdoels.TextField()
    hashtag = models.ManyToManyField(HashTag)
    photo = models.ImageField(blank = True, null = True, upload_to= "blog_photo")

photo 필드 추가

이미지가 없어도 오류나지 않도록 blank와 null 을 true로 설정

upload_to : 유저에 의해 업로드된 이미지를 모아둘 경로

 

이미지 처리 돕는 pillow 설치

pip install pillow

 

forms.py 수정 

class BlogForm(forms.ModelForm):
	class Meta:
    	model = Blog
        fields = ['title', 'body', 'photo']

 

new.html 수정

<form action = "{% url 'create' %}" method = 'post' enctype = "multipart/form-data">

 

detail.html 수정

{{blog.date}}
<br>
{% if blog.photo %}
<img src = "{{ blog.photo.url }}" alt = "" height = "200px;">
{% endif %}