1. 포스트 상세 페이지에 부트스트랩 적용하기
이번에는 포스트 상세 페이지에 적용하자.
일단 하기 전에!
이 포스트의 주 내용을 담고있는 부분을 앞으로 메인 영역이라고 하자. HTML 코드에도 <div id="main-area">로 정의하자.
그리고 Start Bootstrap 사이트의 Blog Post 페이지 소스를 복사해 blog/templates/blog/post_detail.html 에 그대로 붙여넣기 해주자.
<!DOCTYPE html>
{% load static %}
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>{{ post.title }} - Blog</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="{% static 'blog/bootstrap/bootstrap.min.css' %}" rel="stylesheet" media="screen" />
</head>
(...생략)
<! -- 아래의 코드는 post_list.html 에서 적용했던 코드를 가져옴 -->
<!-- Bootstrap core JS-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
crossorigin="anonymous"></script>
</body>
</html>
그러면 포스트 상세 페이지에 부트스트랩이 적용된다.
이제 여기서 저 Welcome to Blog Post! 에 실제 포스트 제목이 들어가도록 해보자.
2. 실제 포스트 내용이 출력되게 수정하기
이제 메인 영역을 수정하자.
<!-- Page content-->
<div class="container mt-5">
<div class="row">
<div class="col-lg-8">
<!-- Post content-->
<article>
<!-- Post header-->
<header class="mb-4">
<!-- Post title-->
<h1 class="fw-bolder mb-1">{{ post.title }}</h1>
<!-- Post 작성자 -->
<p class="lead">
by <a href="#">작성자명 위치</a>
</p>
<!-- Post meta content-->
<div class="text-muted fst-italic mb-2">{{ post.created_at}}</div>
<!-- Post categories-->
<a class="badge bg-secondary text-decoration-none link-light" href="#!">Web Design</a>
<a class="badge bg-secondary text-decoration-none link-light" href="#!">Freebies</a>
</header>
<!-- Preview image figure-->
<figure class="mb-4"><img class="img-fluid rounded" src="https://dummyimage.com/900x400/ced4da/6c757d.jpg" alt="..." /></figure>
<!-- Post content-->
<section class="mb-5">
<p class="fs-5 mb-4">{{ post.content }}</p>
</section>
</article>
(...생략)
위의 <!-- Post title --> 은 포스트 제목, <!-- Post 작성자 --> 는 제가 직접 만든거.. , <!-- Post meta content> 는 작성시간, <!-- Post content --> 는 포스트 내용 이므로 그에 맞게 수정해주면 된다.
그러면 포스트의 정보가 잘 출력된다.
이제 저 보기싫은 900 x 400 이라고 적힌 이미지 공간에 다른 이미지를 올려보자.
3. 포스트에 이미지 올리기
장고는 이미지 업로드를 위한 ImageField 를 제공한다. 이걸 사용하려면 사용자가 업로드한 이미지를 어디에 저장할지 먼저 정해야하는데.. 그러면 당연히 업로드된 이미지들이 있는 폴더의 URL 또한 설정해야한다.
일단 do_it_django_prj/settings.py 를 수정해보자
import os
from pathlib import Path
(...생략)
STATIC_URL = 'static/'
MEDIA_URL = '/media/' # 이미지의 지정 URL
MEDIA_ROOT = os.path.join(BASE_DIR, '_media') # 이미지 파일은 프로젝트 폴더 아래 _media 라는 이름의 폴더를 만들고 그 안에 저장함
이제 blog/models.py 를 수정합시다.
from django.db import models
# Create your models here.
class Post(models.Model):
title = models.CharField(max_length=30)
content = models.TextField()
head_image = models.ImageField(upload_to='blog/images/%Y/%m/%d/', blank=True) # blog 폴더 아래 images 라는 폴더를 만들고, 년 폴더, 월 폴더, 일 폴더까지 내려간 위치에 저장하도록 설정한다. 왜냐하면 이래야 나중에 방문자가 웹 사이트를 방문했을 때 서버에서 파일을 찾아오는 시간을 단축할 수 있당
created_at = models.DateTimeField(auto_now_add=True)
updated_at = models.DateTimeField(auto_now=True)
(...생략)
여기서 blank = True 의 뜻은 해당 필드는 필수 항목이 아니라는 의미! 비워도 괜찮다!
방금 models.py 수정했으니까..! 마이그레이션 합시다..!
했는데 뭐 Pillow 라는 걸 설치해야하나보다.. 여기서 Pillow 는 파이썬에서 이미지 처리할 때 사용하는 라이브러리이다.
다시 터미널에서 서버 돌리고 admin 페이지에 들가서 이미지 업로드하면 프로젝트 폴더에 내가 올린 이미지가 저장된다.
근데 admin 페이지에서 이미지 링크를 클릭하니까 404 에러가 뜬다.
보니까 아마 이미지에 대한 특정 URL 을 지정해주지 않아서 그런 듯...
do_it_django_prj/urls.py 을 수정해봅시다.
from django.contrib import admin
from django.urls import path, include
# settings, static 폴더를 사용하기 위해 import
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
path('blog/', include('blog.urls')),
path('', include('single_pages.urls')), # url 에 아무것도 입력하지 않을 경우 single_post_pages.urls 호출
]
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
이후 새로고침 갈기기.
하면 이렇게 잘 나온다.
그러면 이제 포스트 목록 페이지에서 이 이미지를 볼 수 있게 html 을 수정해보자.
blog/templates/blog/post_list.html 을 수정한다.
(...생략)
<div class="container my-3">
<div class="row">
<div class="col-md-8 col-lg-9">
<h1>Blog</h1>
{% for p in post_list %}
<!-- Blog post-->
<div class="card mb-4">
<a href="#!"><img class="card-img-top" src="{{ p.head_image.url }}"
alt="..." /></a>
<div class="card-body">
(...생략)
이후 /blog/ 페이지에 접속하니까
흠 안된다..
보니까 모든 Head image 경로를 html 에 채우라는 것 같다.. 뭐 템플릿 파일에 if 문 조지면 대표 이미지가 있는 경우에만 출력이 가능하게 할 수는 있는데 아직 모르니까 모든 포스트에 이미지를 넣어주자.
다 넣어주니까 잘 나온다.
4. 포스트에 파일 올리기
이번에는 포스트에 파일을 올려보자.
장고에서는 포스트에 파일을 업로드할 수 있도록 FileField 를 제공한다.
blog/models.py 를 수정하자. 뭐 ImageField 사용법과 거의 동일하다.
from django.db import models
# Create your models here.
class Post(models.Model):
title = models.CharField(max_length=30)
content = models.TextField()
head_image = models.ImageField(upload_to='blog/images/%Y/%m/%d/', blank=True) # blog 폴더 아래 images 라는 폴더를 만들고, 년 폴더, 월 폴더, 일 폴더까지 내려간 위치에 저장하도록 설정한다. 왜냐하면 이래야 나중에 방문자가 웹 사이트를 방문했을 때 서버에서 파일을 찾아오는 시간을 단축할 수 있당
file_upload = models.FileField(upload_to='blog/files/%Y/%m/%d/', blank=True)
(...생략)
또 models.py 를 수정했으니 마이그레이션!
음 이상 무.
이제 파일이 업로드 되는지 admin 페이지에서 확인 ㄱ
아 이제 진짜 끝.
'캡스톤 > Django' 카테고리의 다른 글
| [Django] 미리보기 기능 구현 (0) | 2022.03.20 |
|---|---|
| [Django] 템플릿에서 if 문 적용하기 (0) | 2022.03.20 |
| [Django] 포스트 목록 페이지에 부트스트랩 적용 (0) | 2022.03.18 |
| [Django] CBV로 페이지 만들기 (0) | 2022.03.11 |
| [Django] URL 설정 (0) | 2022.03.11 |