기본 기능 외에 편의기능을 구현해보자.
메인페이지로 돌아가는 기능과 로그인기능을 추가할 것이다.
templates/base.html를 열어 아래와같이 수정하자.
{% load static %}
<!doctype html>
<html lang="ko">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", initial-scale="1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}">
<!-- pybo CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
<title>Hello, pybo!</title>
</head>
<body>
<!--네비게이션 바-->
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<a class="navbar-brand" href="{% url 'pybo:index' %}">Pybo</a>
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse"
data-target="#navbarNav" aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flse-grow-0" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item ">
<a class="nav-link" href="#"}>로그인</a>
</li>
</ul>
</div>
</nav>
{% block content %}
{% endblock %}
</body>
</html>
navbar-brand에 Pybo로고를 만들어주고 클릭시 pybo:index로 이동하게 만들자. 위치는 맨 왼쪽이며, 그 오른쪽엔 로그인 링크를 추가
번호와 페이징은 추후에 다룰 예정이니 모른 척 넘어가고, Pybo와 로그인이 상단 좌측에 표시된것을 볼 수 있다.
base.html은 모든 화면이 상속받고있기 때문에 어느 페이지를 들어가도 방금 추가한 네비게이션이 표시된다.
자, 여기서 화면을 작게 줄여보자.
로그인 표시가 사라지고 우측상단에 줄 세개가 보인다.
이는 부트스트랩이 화면 크기를 고려한 반응형 웹까지 적용되어있기 때문인데, 눌러봤자 소용없다.
부트스트랩 자바스크립트 파일이 없기때문인데, 기능을 온전히 사용하기 위해서 저번에 다운받은 bootstrap에서 필요한 파일을 다시 불러오자.
bootstrap-4.5.3-dist/js/bootstrap.min.js 이 파일을
static 아래에 옮겨주자.
다음은 jquery인데,
https://code.jquery.com/jquery-3.4.1.min.js
이 링크를 우클릭해서 다른이름으로 링크를 저장하기를 클릭한 뒤
static 폴더 안에 파일명 : jquery-3.4.1.min.js 이렇게 저장하자.
부트스트랩과 제이쿼리가 static 폴더 안에 담겨있다.
제이쿼리 버전이 다르면 올바르게 실행이 안될수도 있으니 조심하자.
다음은 base.html에 방금 옮겨놓은 제이쿼리와 자바스크립트를 추가하자
...
...
{% endblock %}
<!-- JQuery JS-->
<script src="{% static 'jquery-3.4.1.min.js' %}"></script>
<!--Bootstrap JS-->
<script src="{% static 'bootstrap.min.js' %}"></script>
</body>
</html>
자 이렇게 추가해주면 줄 세개를 누를 때 숨어있던 로그인 링크가 나타난다.
다음은 base.html에서 네비게이션바를 분리하자.
장고에서 지원하는 include를 사용해서 별도의 html을 그대로 삽입하자.
templates/navbar.html 을 새로 만들고 base.html에서 만들었던 네비게이션 부분을 그대로 옮긴다.
base.html에 그대로 있는 내용이니 복사 붙여넣기만 하자.
<!--네비게이션 바-->
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<a class="navbar-brand" href="{% url 'pybo:index' %}">Pybo</a>
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse"
data-target="#navbarNav" aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flse-grow-0" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item ">
<a class="nav-link" href="#"}>로그인</a>
</li>
</ul>
</div>
</nav>
그 다음엔, base.html에서 저 네비게이션이 있던 자리에 {% include "navbar.html" %} 한줄만 추가해주면 적용된다.
'python > Django' 카테고리의 다른 글
| [Django] 클라이언트에서 파일을 다운로드 해보자. (0) | 2022.05.25 |
|---|---|
| [Django] 12. 게시판 페이징 기능추가 (0) | 2021.12.29 |
| [Django] 10 . 표준 HTML으로 만들기 (0) | 2021.12.28 |
| [Django] 9. 부트스트랩을 적용시키자. (0) | 2021.12.27 |
| [Django] 8. 답변기능 구현 (0) | 2021.12.23 |