CDW (Coding Discussion World)
python(django) - 장고로 웹페이지 만들기 (8) 본문
지난 편에서는 sqlite3 database에 있는 data를 출력하고 특정 게시글을 눌었을 때 별도의 URL페이지를 통해
디테일한 화면으로 이동할 수 있도록 설정하였다.
2022.11.12 - [Python/Do something] - python(django) - 장고로 웹페이지 만들기, detail page (7)
이런 과정에서 3개의 html 파일이 생겼고, 중복되는 부분이 많다. 중복되는 부분은 합쳐야 관리가 쉽다.
우선 navi.html로 신규 파일을 하나 생성하자. 이 파일을 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 © 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을 통해서 작성하는 기능을 추가하고자 한다.
'Python > Do something' 카테고리의 다른 글
| python(requests) - kakao api를 통해 data 받아와서 db에 저장하기 (1) (0) | 2023.01.08 |
|---|---|
| python 기초 - 다양한 방법으로 로또 번호 생성기 만들기 (0) | 2022.12.01 |
| python(django) - 장고로 웹페이지 만들기, detail page (7) (1) | 2022.11.12 |
| python(django) - 장고로 웹페이지 만들기, views (6) (0) | 2022.11.11 |
| python(django) - 장고로 웹페이지 만들기, models, database (5) (0) | 2022.11.10 |
