[Django] 미리보기 기능 구현

1. 포스트 출력 글자 수 제한하기

 

 

우리가 포스트 목록 페이지에서 포스트를 보면 포스트 내용이 길 경우 저렇게 모든 텍스트가 나온다.

 

장고에서는 이런 점을 해결하기 위해 truncatewords 나 truncatechars 를 사용한다.

 

포스트 목록 페이지의 포스트 내용 글자 수를 제한해주는 거니까 당연히 blog/templates/blog/post_list.html 을 수정해한다.

 

(...생략)
<img class="card-img-top" src="https://picsum.photos/seed/{{ p.id }}/900/400" alt="random_image">
{% endif %}
<div class="card-body">
    <h2 class="card-title h4">{{ p.title }}</h2>
    <p class="card-text">{{ p.content | truncatewords:45 }}</p> <!-- 포스트 내용 중 45글자만 출력 -->
    <a href="{{ p.get_absolute_url }}" class="btn btn-primary">Read More &rarr;</a>
</div>
(...생략)

 

 

 

 

음 45글자 출력되고 남은 포스트 내용은 ...으로 잘 출력된다.

 

 

2. 요약문 필드

 

다음은 포스트의 요약문을 보여주는 hook_text 를 사용하자.

 

blog/models.py 를 수정해봅시다.

 

from django.db import models
import os

# Create your models here.
class Post(models.Model):
    title = models.CharField(max_length=30)
    hook_text = models.CharField(max_length=100, blank=True) # 글자 수는 100자로 제한
    content = models.TextField()
    (...생략)

 

models.py 를 수정했으니 마이그레이션 합시다.

 

 

이제 포스트 요약문을 입력하기 위해 관리자 페이지에 들어가보자.

 

 

음음 Hook text: 공간이 생겼음을 알 수 있다.

 

이제 관리자 페이지에 적용했으니까 포스트 목록 페이지와 포스트 상세 페이지에 보이도록 적용시키자.

 

blog/templates/blog/post_list.html 부터 수정하자.

 

(...생략)
<div class="card-body">
    <h2 class="card-title h4">{{ p.title }}</h2>
    {% if p.hook_text %}
    <h5 class="text-muted">{{ p.hook_text }}</h5> <!-- class="text-muted" 은 글자색을 회색으로 출력함 -->
    {% endif %}
    <p class="card-text">{{ p.content | truncatewords:45 }}</p> <!-- 포스트 내용 중 45글자만 출력 -->
    <a href="{{ p.get_absolute_url }}" class="btn btn-primary">Read More &rarr;</a>
</div>
(...생략)

 

그 다음 blog/templates/blog/post_detail.html 수정하자.

 

(...생략)
<!-- Post header-->
<header class="mb-4">
    <!-- Post title-->
    <h1 class="fw-bolder mb-1">{{ post.title }}</h1>
    <h5 class="text-muted">{{ post.hook_text }}</h5>
    <!-- Post 작성자 -->
    <p class="lead">
        by <a href="#">작성자명 위치</a>
    </p>
    (...생략)

 

 

 

 

음 이상 무.