templates 구성
- 구성 방식은 블로그 홈 화면, 메인 화면을 구성하였던 것과 동일합니다.
따라서 자세한 설명은 생략하도록 하겠습니다.
부트스트랩 파일 다운로드
- 부트스트랩 페이지에 접속하여 다운로드 받고 압축을 풉니다.
- https://startbootstrap.com/previews/blog-post/
부트스트랩 폴더 열기
- 다운로드 받았던 부트스트랩 폴더를 열고, [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>
