django static 파일 설정

[django] python django 게시판 만들기 - static 파일 설정

 

static를 해석하면 정적이다. 움직이지 않고 정지되어있는 상태의 파일을 설정한다.

 

static 파일로 이미지를 넣어 홈페이지의 완성도 높여보기

---

model, admin 설정 : https://integer-ji.tistory.com/89

views에 데이터 가져오기 : https://integer-ji.tistory.com/90

detail page 만들기 : https://integer-ji.tistory.com/91

setting 설정, 데이터 자르기, 정렬하기 : https://integer-ji.tistory.com/93

getbootstrap으로 홈페이지 꾸미기 : https://integer-ji.tistory.com/94

템플릿 상속, url 관리하기 : https://integer-ji.tistory.com/95

디자인 쪼끔 수정 : https://integer-ji.tistory.com/97

글 쓰기 기능 만들기 : https://integer-ji.tistory.com/99

글 수정 기능 만들기 : https://integer-ji.tistory.com/100

글 삭제 기능 만들기 : https://integer-ji.tistory.com/101

form 이용하기, 글 수정 instance 가져오기 : https://integer-ji.tistory.com/102

Pagination : https://integer-ji.tistory.com/106

간단하게 검색기능 만들기 : https://integer-ji.tistory.com/107

---

static 폴더 만들기

 

 

crudapp폴더 안에 static 폴더를 만들어 줍니다.

 

static에는 사용할 이미지를 넣어줍니다.

 

저는 수정과 삭제 이미지를 넣었습니다.

 

 

settings.py 설정하기

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'crudapp', 'static')
]

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

 

먼저 STATICFILES_DIRS를 사용하여 static 파일들이 있는 곳을 알려줍니다.

 

STATIC_ROOT는 여러 앱들에 흩어져있는 static 파일들을 BASE_DIR 아래 static 폴더에 모아줍니다.

 

 

static 파일 모아주기

python manage.py collectstatic

 

이 명령어를 통해 static파일을 모아줍니다.

 

그러면 settings에서 설정한 경로로 static폴더에 모이게 됩니다.

 

 

요렇게 crudapp아래의 static폴더에 있는 파일들이

 

base_dir인 최상위 폴더 아래 static폴더를 생성하고 파일을 모았습니다.

 

 

static 파일 사용하기

{% load static %}

 

html에서 static파일을 사용하기 위해서는 해당 명령어로 불러와 줘야 합니다.

 

base.html은 모든 html 파일에서 사용하니 base.html에 적어주었습니다.

 

 

detail.html 수정하기

{% extends 'base.html' %}

{% block content %}

    <div class="container"> 
        <div class="card">
          <div class="card-body">
            <h1>{{ blog.title }}</h1>
            <p>{{ blog.pub_date }}</p>
            <p>{{ blog.body }}</p>         
            <a href="{% url 'update' blog.id %}"><img src="/static/update.png" alt="수정" width="30"></a>
            <a href="{% url 'delete' blog.id %}"><img src="/static/delete.png" alt="삭제" width="30"></a>
          </div>
        </div>
      </div>
        
{% endblock %}

 

디테일 페이지에서 사용하는 수정하기와 삭제하기의 링크를 이미지로 바꿔줍니다.

 

저는 "/static/update.png"로 불러왔지만

 

" static 'update.png' "로 불러옵니다.

 

 

확인

 

글씨보다 훨씬 깔끔하게 출력을 하였습니다 짝짝

 

git push를 하고 끝내줍니다.

 

 

---

 

다음엔 글 쓸 때 이미지도 넣는 media를 진행합니다.