Django

templates 구성

templates 구성

  • 구성 방식은 블로그 홈 화면, 메인 화면을 구성하였던 것과 동일합니다.
    따라서 자세한 설명은 생략하도록 하겠습니다.

 

 

 

 

부트스트랩 파일 다운로드

 

 

 

 

 

 

부트스트랩 폴더 열기

  • 다운로드 받았던 부트스트랩 폴더를 열고, [index.html] 파일을 열어 봅니다.
    경로는 다음과 같습니다.
~\startbootstrap-blog-post-gh-pages\index.html

 

  • 페이지가 제대로 구성되는 것을 보니 수정을 안해도 될 것 같습니다.

 

 

 

 

 

 

 

template 문서 생성

  • 이제 장고에서 템플릿 문서를 만들겠습니다.
  • [templates] 폴더를 클릭한 후 오른쪽 클릭을 한 뒤, html 문서를 만듭니다.
[blogapp]-[templates]-[New]-[HTML File]

 

 

 

 

  • 파일명은 [detail]으로 하고, [OK]를 누릅니다.

 

 

  • [detail.html]을 생성하였으면, 위의 부트스트랩 코드를 붙여넣습니다.

 

 

 

 

  • [index.html] 코드를 복사하기 위해 VS Code를 열고 소스코드를 확인한 후, [detail.html]에 붙여넣습니다.

 

  • 붙여넣기 후 [detail.html]의 모습은 다음과 같습니다.

 

 

 

  • css 파일들을 추가하기 위해 [detail] 폴더를 만듭니다.
[blogapp]-[static]-[css]-[detail]

 

 

 

  • 부트스트랩 폴더에서 다음 폴더 2개를 복사합니다.

 

 

  • [detail] 폴더에 붙여넣기 하면 다음과 같습니다.

 

 

static 파일들을 추가하였으니 모아주도록 합니다.
[Tools]-[Run manage.py Task]
collectstatic
[yes]

 

 

  • [static]에 추가되었습니다.

 

 

 

 

 

 

detail.html 수정

  • css 파일들을 모아주는 것까지 하였으니 그 파일들을 연결시켜주도록 합시다.

 

  • 먼저, 다음과 같이 수정해주도록 합니다.
{% load static %}

<link href="{% static 'css/detail/vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">

<link href="{% static 'css/detail/css/blog-post.css' %}" rel="stylesheet">

 

 

 

  • 맨 밑에도 다음과 같이 수정해줍니다.
<script src="{% static 'css/detail/vendor/jquery/jquery.min.js' %}"></script>

<script src="{% static 'css/detail/vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>

 

 

 

댓글

댓글 본문
작성자
비밀번호
버전 관리
KNUT X LIKE LION
현재 버전
선택 버전
graphittie 자세히 보기