Python/Do Something

python(django) - 장고로 웹페이지 만들기 (8)

pybi 2023. 1. 17. 20:53

지난 편에서는 sqlite3 database에 있는 data를 출력하고 특정 게시글을 눌었을 때 별도의 URL페이지를 통해

디테일한 화면으로 이동할 수 있도록 설정하였다.

 

2022.11.12 - [Python/Do something] - python(django) - 장고로 웹페이지 만들기, detail page (7)

 

 

이런 과정에서 3개의 html 파일이 생겼고, 중복되는 부분이 많다. 중복되는 부분은 합쳐야 관리가 쉽다.

우선 navi.html로

base.html
0.00MB
base2.html
0.00MB
navi.html
0.00MB

신규 파일을 하나 생성하자. 이 파일을 main base로 사용할 예정이다.

 

 

navi.html에 아래 내용을 붙여넣자. 내용 자체는 기존 base2.html 에 있던 내용들 중에서 바뀌지 않는 부분만 유지하고 

내용이 변경되는 부분은 <body> 밑에 {% block main_area %} {% endblock %} 안에 들어가게 된다.

*만약 페이지별로 title을 다르게 가져가고 싶으면 각 페이지별로 title을 추가하고 중간에 {% include 'navi.html' %}를 넣는 방식으로 해도 된다. 상황에 맞게 취향껏 만들면 된다.

<!DOCTYPE html>
{% load static %}

<html lang="ko">
<head>
    <title>Blog</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" media="screen">
</head>

<body>
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
    <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
                Dropdown link
                </a>
                <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
            </ul>
        </div>
    </div>
</nav>
{% block main_area %}
{% endblock %}

<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</body>

<!-- Footer -->
<footer class="py-2 bg-success">
    <div class="container">
        <p class="m-0 text-center text-black">
            Copyright &copy; Pymin
        </p>
    </div>
</footer>

</html>

 

 

그럼 이제 메인 틀은 만들어졌고, 안에 내용을 채워보자. 기존 base2.html에서 본문을 제외한 다른 내용을 다 지우고 위에는 {% extends 'blog/navi.html' %} {% load static %} {% block main_area %}를 넣고,

아래는 {% endblock %}을 넣어서 마무리한다.

{% extends 'blog/navi.html' %}
{% load static %}
{% block main_area %}

<!-- main content -->
<section class="bg-light" style="padding: 10px 10px">
    <div class="container">
        <br>
        <h1> Pymin Story </h1>
        <br>
        <ul class="list-unstyled">
            {% for p in post_list %}
            <li class="media mb-1 mt-1">
            {% if p.head_image %}
            <img class="mr-3" style="width:150px; height:150px;" src="{{ p.head_image.url }}" alt="{{ p }} head image">
            {% else %}
            <img class="mr-3" style="width:150px; height:150px;" src="{% static 'blog/images/no_image.jpg' %}" alt="{{ p }} No image">
            {% endif %}
            <div class="media-body">
                <h5 class="mt-0 mb-1">{{ p.title }}</h5>
                <p>{{ p.content | truncatewords_html:18 | safe }}</p>
                <button type="button" class="btn btn-outline-info" onclick="location.href='{{ p.get_absolute_url }}'">More Info</button>
            </div>
            </li>
            {% endfor %}
        </ul>
    </div>
</section>

{% endblock %}

 

 

이제 http://127.0.0.1:8000/blog/blog2/에 접속해보자. 기존과 동일하게 잘 동작하고 상세 페이지 연결에도 문제가 없다.

 

 

이제 나머지 파일인 base.html과 post_detail.html도 동일하게 수정해보자. 수정후에 기존 기능들(modal, detail 페이지 이동)을 수행했을 때 잘 동작한다.

 

이젠 navigator 이름을 수정하면 모든 페이지가 한번에 바뀌기 때문에 편하게 수정하고 Navigator 항목의 href을 통해 link도 넣어보자.

<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
    <div class="container">
        <a class="navbar-brand" href="/blog/">Home</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-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" href="/blog/">Story1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/blog/blog2/">Story2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Story3</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
                Dropdown link
                </a>
                <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
            </ul>
        </div>
    </div>
</nav>

 

 

link까지 넣으면 Navigator의 항목을 클릭할 때 해당 페이지로 이동이 잘 된다.

3개의 html 파일은 첨부에 넣어 둘테니 참고하면 될 듯 하다. 이제 그럴싸한(?) 웹페이지가 완성되었다. 다음에는 게시글 작성을 admin page가 아니라 별도의 페이지와 form을 통해서 작성하는 기능을 추가하고자 한다.