[Django] 11. 네비게이션 기능 추가

[Django] 11. 네비게이션 기능 추가

반응형

기본 기능 외에 편의기능을 구현해보자.

메인페이지로 돌아가는 기능과 로그인기능을 추가할 것이다.

templates/base.html를 열어 아래와같이 수정하자.

{% load static %} Hello, pybo! Pybo 로그인 {% block content %} {% endblock %}

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 %}

자 이렇게 추가해주면 줄 세개를 누를 때 숨어있던 로그인 링크가 나타난다.

다음은 base.html에서 네비게이션바를 분리하자.

장고에서 지원하는 include를 사용해서 별도의 html을 그대로 삽입하자.

templates/navbar.html 을 새로 만들고 base.html에서 만들었던 네비게이션 부분을 그대로 옮긴다.

base.html에 그대로 있는 내용이니 복사 붙여넣기만 하자.

Pybo 로그인

그 다음엔, base.html에서 저 네비게이션이 있던 자리에 {% include "navbar.html" %} 한줄만 추가해주면 적용된다.

반응형

from http://kkiho.tistory.com/39 by ccl(A) rewrite - 2021-12-29 15:26:35