home.html 첫 페이지를 어느 정도 틀에 맞게 만들기 위해서 기존에 만든 테스트 데이터로 맞출 것이다!

최근 포스트와 많이 보일 게시판에 게시글들을 넣어보자 (빨간색 부분)

board/views.py

from django.shortcuts import render
from .models import *
from django.db.models import Count
# Create your views here.
def home(request):
    # 최근 포스트
    recent_posts = Post.objects.order_by('-created_at')[:6]

    # 많이 보일 게시판의 글
    main_posts = Post.objects.filter(board_id__url="horn").annotate(
        reply_count = Count('replys', distinct=True) + Count('rereply', distinct=True),
        like_count = Count('likes', distinct=True),
    ).order_by('-created_at')[:6]

    context = {
        'recent_posts': recent_posts,
        'main_posts': main_posts,
    }

    return render(request, 'board/home.html', context)

board/templates/board/home.html

{% extends 'base.html' %}

{% block style %}
<style>
.border-dotted  {
    border-bottom: dotted;
    border-width: 1px;
}
</style>
{% endblock %}

{% block title %}메인페이지{% endblock %}

{% block top %}
<!-- 최근 포스트 -->
<h5 class="border-bottom">최근 포스트</h5>
<div class="row g-2">
    {% for post in recent_posts %}
    <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
        <div class="card">
            <div class="row g-0">
                <div class="col-md-8">
                    <div class="card-body">
                        <h5 class="card-title" style="white-space:nowrap;overflow: hidden;text-overflow:ellipsis;">{{post.title}}</h5>
                        <p class="card-text">{{post.short_title}}</p>
                        <p class="card-text"><small class="text-muted"><i class="bi bi-calendar-week"></i> {{post.created_at|date:"Y-m-d"}}</small></p>
                    </div>
                </div>
                <div class="col-md-4">
                    <img src="..." alt="...">
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}

{% block middle_left %}
<!-- 제목 내용 -->
<h5 class="border-bottom">TEST LIFE</h5>
<!-- 내용 부분만 -->
<!-- 3개 정도? -->
<!-- 글 제목 -->
{% for post in main_posts %}
<div class="py-3 border-dotted">
    <h5>{{post.title}}</h5>
    <!-- 글 작성자 / 작성일자 -->
    <div class="text-secondary mb-2">
        <i class="bi bi-person-circle"></i> {{post.author.nickname}} <i class="bi bi-calendar-week"></i> {{post.created_at}}
    </div>
    <!-- 글 내용 -->
    <div class="text-break fs-6 mb-2">
        {{post.short_title}}
    </div>
    <!-- 좋아요 / 댓글 수  -->
    <div>
        <i class="bi bi-heart text-danger"></i></i> 1 <i class="bi bi-chat-right-text"></i> 1
    </div>
</div>
{% endfor %}
{% endblock %}

{% block middle_right %}
<!-- 소개 -->
<div class="p-4">
    <h5>About TEST LIFE</h5>
    <div>TEST LIFE의 개인 블로그 입니다. 프로그래밍을 활용한 데이터 분석으로 세상에 대한 올바른 시각과 판단을 가지고 싶습니다.</div>
</div>
<!-- 공지 -->
<div>
    <div class="toast shadow-sm show mb-2" style="width: 100%;" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <strong class="me-auto"><i class="bi bi-exclamation-diamond-fill text-warning"></i> 공지상항</strong>
            <small class="text-muted">11 mins ago</small>
        </div>
        <div class="toast-body">
            Hello, world! This is a toast message.
        </div>
    </div>
    <div class="toast shadow-sm show mb-2" style="width: 100%;" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <strong class="me-auto"><i class="bi bi-exclamation-diamond-fill text-warning"></i> 공지상항</strong>
            <small class="text-muted">11 mins ago</small>
        </div>
        <div class="toast-body">
            Hello, world! This is a toast message.
        </div>
    </div>
</div>
<!-- Tags -->
<div class="py-2">
    <h5>TAGS</h5>
    <div class="d-flex flex-wrap">
        <span class="badge bg-primary m-1">Primary <span class="badge rounded-pill bg-light text-primary">1</span></span>
        <span class="badge bg-primary m-1">Primary <span class="badge rounded-pill bg-light text-primary">1</span></span>
        <span class="badge bg-primary m-1">Primary <span class="badge rounded-pill bg-light text-primary">1</span></span>
        <span class="badge bg-primary m-1">Primary <span class="badge rounded-pill bg-light text-primary">1</span></span>
        <span class="badge bg-primary m-1">Primary <span class="badge rounded-pill bg-light text-primary">1</span></span>
        <span class="badge bg-primary m-1">Primary <span class="badge rounded-pill bg-light text-primary">1</span></span>
    </div>
</div>
{% endblock %}

쫌 뭔가 그럴 싸 해졌다!

이제 저 배경 색을 없애보자!

templates/base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{%block title%}{% endblock %}</title>
    <script src="<https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js>" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
    <script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js>" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
    <link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css>">
    {% block script %}
    {% endblock %}

    {% block style %}
    {% endblock %}
</head>
<body>
    <div class="container">
        <div class="row flex-nowrap justify-content-between align-items-center py-2 border-bottom">
            <div class="col-4"></div>
            <div class="col-4 text-center">TEST MY SITE</div>
            <div class="col-4 d-flex justify-content-end align-items-center">
                <button class="btn btn-sm btn-light me-1 mt-0">로그인</button>
                <button class="btn btn-sm btn-light">회원가입</button>
            </div>
        </div>
        <nav class="navbar navbar-expand-lg navbar-light">
            <div class="container-fluid">
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavDropdown">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" aria-current="page" href="#">메뉴1</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">메뉴2</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">메뉴3</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            다양한메뉴
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <li><a class="dropdown-item" href="#">다양한메뉴1</a></li>
                                <li><a class="dropdown-item" href="#">다양한메뉴2</a></li>
                                <li><a class="dropdown-item" href="#">다양한메뉴3</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="row">
            <div class="col-12 mb-3">{% block top %}{% endblock %}</div>
            <div class="col-sm-12 col-md-7 col-lg-8 col-xl-8 col-xxl-9">{% block middle_left %}{% endblock %}</div>
            <div class="col-sm-12 col-md-5 col-lg-4 col-xl-4 col-xxl-3">{% block middle_right %}{% endblock %}</div>
        </div>
    </div>
    <footer class="footer py-3 mt-3 bg-light">
        <div class="container text-center">
            <div class="text-muted fs-6">Place sticky footer content here.</div>
            <div class="text-muted fs-6">Place sticky footer content here.</div>
            <div class="text-muted fs-6">Place sticky footer content here.</div>
        </div>
    </footer>
</body>
</html>

와우~!!! 더 근사해 진 것 같다!

뭔가 해외 신문 사이트 느낌 같다!