장고(Django) 페이지 구성 개선하기

템플릿 파일에서 if문 사용하기

if-else 문으로 조건에 따라 이미지 보여주기

• 이미지가 있을 경우 보여주기
  • blog/templates/blog/post_list.html

{% for p in post_list %}
                <!-- Blog Post -->
                <div class="card mb-4">
                    {%if p.head_mage%}
                    <img class="card-img-top" src="{{p.head_image.url}}" alt="{{p}} head image">
                    {%endif%}
                    <div class="card-body">
                        <h2 class="card-title">{{p.title}}</h2>
                        <p class="card-text">{{p.content}}</p>
                        <a href="{{p.get_absolute_url}}" class="btn btn-primary">Read More &rarr;</a>
                    </div>
                    <div class="card-footer text-muted">
                        Posted on {{p.created_at}} by
                        <a href="#">작성자명 쓸 위치(개발예정)</a>
                    </div>
                </div>
                {%endfor%}

• 이미지가 없을 경우 사용할 임의의 이미지 가져오기
  • Lorem Picsum 이용

  {% for p in post_list %}
                <!-- Blog Post -->
                <div class="card mb-4">
                    {%if p.head_image%}
                    <img class="card-img-top" src="{{p.head_image.url}}" alt="{{p}} head image">
                    {%else%}
                    <img class="card-img-top" src="https://picsum.photos/800/200" alt="random_image">
                    {%endif%}
                    <div class="card-body">
                        <h2 class="card-title">{{p.title}}</h2>
                        <p class="card-text">{{p.content}}</p>
                        <a href="{{p.get_absolute_url}}" class="btn btn-primary">Read More &rarr;</a>
                    </div>
                    <div class="card-footer text-muted">
                        Posted on {{p.created_at}} by
                        <a href="#">작성자명 쓸 위치(개발예정)</a>
                    </div>
                </div>
                {%endfor%}

• 임의로 나타나는 이미지 고정하기
  • 새로고침 하면 자꾸 바뀌는 현상 해결

{% for p in post_list %}
                <!-- Blog Post -->
                <div class="card mb-4">
                    {%if p.head_image%}
                    <img class="card-img-top" src="{{p.head_image.url}}" alt="{{p}} head image">
                    {%else%}
                    <img class="card-img-top" src="https://picsum.photos/seed/{{p.id}}/800/200" alt="random_image">
                    {%endif%}
                    <div class="card-body">
                        <h2 class="card-title">{{p.title}}</h2>
                        <p class="card-text">{{p.content}}</p>
                        <a href="{{p.get_absolute_url}}" class="btn btn-primary">Read More &rarr;</a>
                    </div>
                    <div class="card-footer text-muted">
                        Posted on {{p.created_at}} by
                        <a href="#">작성자명 쓸 위치(개발예정)</a>
                    </div>
                </div>
                {%endfor%}

• 포스트 상세 페이지도 수정해주기
  • blog/templates/blog/post_detail.py

<!-- Preview Image -->
        {% if post.head_image%}
        <img class="img-fluid rounded" src="{{post.head_image.url}}" alt="{{post.title}} head_image">
        {%else%}
        <img class="img-fluid rounded" src="https://picsum.photos/seed/{{post.id}}/800/200" alt="random_image">
        {%endif%}
        <hr>

• 잘된다!

 

첨부 파일이 있는 경우 다운로드 버튼 만들기

• 첨부 파일 다운로드 버튼 만들기
  • blog/templates/blog/post_detail.html

    <!-- Post Content -->
        <p>{{ post.content }}</p>

        {%if post.file_upload%}
          <a href="{{post.file_upload.url}}" class="btn btn-outline-dark" role="button download">Download</a>
        {%endif%}
        <hr>

• 첨부 파일명과 확장자 아이콘 나타내기
  • blog/models.py

from django.db import models
import os

# 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)
    file_upload = models.FileField(upload_to='blog/files/%Y/%m/%d', blank=True)

    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    def __str__(self):
        return f'[{self.pk}]{self.title}'
    
    def get_absolute_url(self):
        return f'/blog/{self.pk}/'
    
    def get_file_name(self):
        return os.path.basename(self.file_upload.name)
    
    def get_file_ext(self):
        return self.get_file_name().split('.')[-1]

• post_detail.html에 fontawesome 아이콘 추가해주기

<!-- Custom styles for this template -->
  <link rel="stylesheet" href="{% static 'blog/css/blog-post.css' %}" media="screen">
  <script src="https://kit.fontawesome.com/본인의 kit code입력.js" crossorigin="anonymous"></script>

        <!-- Post Content -->
        <p>{{ post.content }}</p>

        {%if post.file_upload%}
          <a href="{{post.file_upload.url}}" class="btn btn-outline-dark" role="button">
            Download:
            {% if post.get_file_ext == 'csv' %}
              <i class="fas fa-file-csv"></i>
            {% elif post.get_file_ext == 'xlsx' or post.get_file_ext == 'xls'%}
              <i class="fas fa-file-excel"></i>
            {% elif post.get_file_ext == 'docx' or post.get_file_ext == 'doc'%}
              <i class="fas fa-file-word"></i>
            {% else %}
              <i class="far fa-file"></i>
            {% endif %}  
          </a>
        {%endif%}

• 성공적으로 된다.

 

템플릿 필터 사용하기

포스트 미리보기 기능 구현하기

• 출력 글자 수 제한하기
  • post_list.html에 truncatewords:45 추가

<!-- Blog Post -->
                <div class="card mb-4">
                    {%if p.head_image%}
                    <img class="card-img-top" src="{{p.head_image.url}}" alt="{{p}} head image">
                    {%else%}
                    <img class="card-img-top" src="https://picsum.photos/seed/{{p.id}}/800/200" alt="random_image">
                    {%endif%}
                    <div class="card-body">
                        <h2 class="card-title">{{p.title}}</h2>
                        <p class="card-text">{{p.content | truncatewords:45}}</p>
                        <a href="{{p.get_absolute_url}}" class="btn btn-primary">Read More &rarr;</a>
                    </div>
                    <div class="card-footer text-muted">
                        Posted on {{p.created_at}} by
                        <a href="#">작성자명 쓸 위치(개발예정)</a>
                    </div>
                </div>

• 요약문 필드 만들기
  • models.py에 hook_text필드를 추가하면 됨.

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)
    content = models.TextField()

    head_image = models.ImageField(upload_to='blog/images/%Y/%m/%d/', blank=True)
    file_upload = models.FileField(upload_to='blog/files/%Y/%m/%d', blank=True)

    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    def __str__(self):
        return f'[{self.pk}]{self.title}'
    
    def get_absolute_url(self):
        return f'/blog/{self.pk}/'
    
    def get_file_name(self):
        return os.path.basename(self.file_upload.name)
    
    def get_file_ext(self):
        return self.get_file_name().split('.')[-1]

• makemigrations => migrate 실행

• 템플릿 파일 수정하기
  • post_list.html 수정

 <h1>Blog</h1>
                {% for p in post_list %}
                <!-- Blog Post -->
                <div class="card mb-4">
                    {%if p.head_image%}
                    <img class="card-img-top" src="{{p.head_image.url}}" alt="{{p}} head image">
                    {%else%}
                    <img class="card-img-top" src="https://picsum.photos/seed/{{p.id}}/800/200" alt="random_image">
                    {%endif%}
                    <div class="card-body">
                        <h2 class="card-title">{{p.title}}</h2>
                        {% if p.hook_text %}
                            <h5 class="text-muted">{{p.hook_text}}</h5>
                        {%endif%}
                        <p class="card-text">{{p.content | truncatewords:45}}</p>
                        <a href="{{p.get_absolute_url}}" class="btn btn-primary">Read More &rarr;</a>
                    </div>
                    <div class="card-footer text-muted">
                        Posted on {{p.created_at}} by
                        <a href="#">작성자명 쓸 위치(개발예정)</a>
                    </div>
                </div>
                {%endfor%}

• 포스트 상세 페이지도 수정하기
  • post_detail.html

<!-- Title -->
        <h1 class="mt-4">{{ post.title }}</h1>
        <h5 class="text-muted">{{post.hook_text}}</h5>

        <!-- Author -->
        <p class="lead">
          by
          <a href="#">작성자명 쓸 위치(개발예정)</a>
        </p>

        <hr>

        <!-- Date/Time -->
        <p>Posted on {{ post.created_at }}</p>

        <hr>

• 성공적으로 반영됬다!