멋쟁이 사자처럼 at 한국교통대학교 7기

2019 KNUT X LIKE LION #7

코스 전체목록

닫기

블로그 메인 컨텐츠 구성

블로그 메인 컨텐츠 구성

  • 메인 컨텐츠 기능은 크게 3가지로 구성할 것입니다.
  • 먼저, 블로그의 가장 기본이 되는 기능은 [글쓰기]일 것입니다.
  • 또한 아무나 글을 쓰면 안되기 때문에 권한 확인을 위해 [로그인]과 [로그아웃] 기능을 넣을 것입니다.
  • 이에 맞게 페이지 링크 이름을 변경하여 봅시다.

 

 

 

index.html 수정

  • 수정하기 전에 블로그에 들어올 때마다 주소에 계속 [http://127.0.0.1:8000/blogMain/]을 쳐서 들어오는 것은 번거롭기 때문에 이것을 먼저 건드려봅시다.

 

  • 저는 가운데 [Learn more] 버튼을 누르면 메인 화면으로 넘어가도록 구성하겠습니다.

 

 

  • [index.html] 문서를 열고 다음과 같이 수정합니다.
<a href="{% url 'blogMain' %}" class="btn btn-lg btn-secondary">Learn more</a>

 

 

  • 장고 템플릿 url은 이와 같이 사용합니다.
    이렇게하면 링크가 걸립니다.
{% url 'urls.py에서 지정한 이름' %}

 

 

  • 제대로 작동하는지 테스트해봅시다.
[Shift]+[F9]를 눌러 디버그 모드를 실행합니다.
버튼을 누르면 [blogMain]화면으로 넘어가면 성공입니다.

 

 

 

blogMain.html 수정

  • 위에서 장고 템플릿 url을 사용하여 링크를 건 방식과 같이 [blogMain.html]도 수정하면 됩니다.
     
  • 저는 다음과 같이 [navbar]를 수정할 것입니다.
  • 1. [Fixed navbar]를 누르면 블로그 홈 화면으로 이동
  • 2. [Home]을 누르면 블로그 메인 화면으로 이동
  • 3. [글쓰기] navbar 추가
  • 4. [로그인], [로그아웃] navbar 추가

 

  • 저는 다음과 같이 수정하였습니다.

 

  • Fixed navbar - url 수정
<a class="navbar-brand" href="{% url 'index' %}">Fixed navbar</a>

 

  • Home - url 수정
<a class="nav-link" href="{% url 'blogMain' %}">Home <span class="sr-only">(current)</span></a>

 

  • 글쓰기, 로그인, 로그아웃 - navbar 추가
<li class="nav-item">
    <a class="nav-link" href="#">글쓰기</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">로그인</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">로그아웃</a>
</li>

 

 

 

 

  • 글쓰기, 로그인, 로그아웃의 url은 후에 기능 구현 후에 지정해주도록 하겠습니다.
  • 정상적으로 작동되는지 확인합니다.

 

 

 

 

댓글

댓글 본문
  1. 노우준
    dracula입니다~
    대화보기
    • 몽롱해
      혹시 강사님이 사용하는 파이썬 테마는 뭔가요? 따라하고 싶어서요~
    버전 관리
    KNUT X LIKE LION
    현재 버전
    선택 버전
    graphittie 자세히 보기