Django Blog 만들기 - part 3 : 템플릿
GitHub : https://github.com/bellcastle88/Django-Website-Projectc
1. 템블릿과 하위폴더, html을 생성한다.
- templates 폴더를 만들고 하위 폴더로 blog를 만든 후 html파일을 만들어준다
2. Home.html파일에 아래와 같이 입력해준다
-home.html에 아래와같이 코드를 넣어준다.
3.Blog.apps.py에서 BlogConfig를 복사해준다.
4. Django_project.settings.py에 아래와 같이 추가해준다.
- 메인프로젝트 세팅에 blog앱이 추가된것을 알려주기 위해서
5. Blog.views.py파일에 templates에 home.html파일을 읽어올 수 있도록 아래와 같이 render을 이용해준다.
6. Templates에 about.html파일을 아래와 같이 수정해준다. ( home.html )에서 복붙하기
7. views.py에 about.html을 출력할 수 있도록 아래와 같이 설정
8. 제대로 출력되는지 확인하기.
9. Views.py 안에 가짜 데이터를 집어넣기
10. View.py안에 context 를 포함시킨다 ( '키' : 벨류 )
11. View.py에서 설정한 context를 홈페이지에 포스트 하기위해 Home.html에 아래와 같이 추가해준다
12. 정리
Blog.view.py( posts )에 가짜데이터를 입력 했고 view.home안에 context를 추가한다
Home.html안에 for반복문을 입력해준다
13. Home.html에 if-else를 이용하여 타이틀을 만들어준다.
14. About.html에도 똑같이 붙여넣기 해준다.
15. View.py.about에 타이틀을 설정해준다. 입력해준다.
16. 서버에 타이틀이 활성화 되었는지 확인한다.
17. Base.html 파일을 만든다.
18. About과 home.html 사이에 중복되는것이 많다. 이것은 프로그래밍에서 절대 좋은것이 아니다.
-about.html에서 전체 코드를 복사해서 base.html로 붙어넣는다.
19. Base.html에 아래와 같이 추가한다.
-{% block content %}{% endblock %}에서는 각 페이지에서 원하는 수정을 할 수 있다.
-나머지 부분은 base.html에서 상속된다
20. Home.html을 수정한다
- {% extends "blog/base.html" %} 명령어로 base.html템플릿을 사용할 수 있다.
- {% block content %} {% endblock content %} 사이에 해당 home.html에서만 보여줄 컨텐츠를 집어 넣는다.
21. About.html에 아래와 같이 추가해 준다.
22. 페이지가 잘 작동하는지 확인
23. 부트스트랩에서 해당 코드를 가져온다.
24. Base.html에 붙여넣기 해준다.
- <head> 밑에 붙여넣기
- Hello, world! 부분은 이미 존재하기 때문에 삭제해준다
25. 부트스트랩에서 해당 JavaScript를 가져온다.
26. Base.html 에 붙여넣어 준다.
- <body>tag사이에
- <div class="container"> 사이에 {% block content %} 를 넣어준다. *wrap = 감싸다
- 안쪽 여백과 일정 간격을 유지하기 위해서 ( Good padding and spacing )
27. 서버 확인하기.
28. 정리 ( quick recap )
-base템플릿을 base.html안에 만들었다 ( 상속해주는 부모 템플릿 ) -> 다른 템플릿에서 오버라이드 ( 부모속성은 무시하구 내 속성을 적용할 수 있게해줘 ) 할 수 있는 {% block content %}를 만들었다 -> home.html을 보면 {% block content %}안에 home.html에서 출려하고 싶은 내용을 입력한다.
29. 아래 깃헙에서 navigation.html 를 가져와서 base.html에 붙여넣어준다.
https://github.com/CoreyMSchafer/code_snippets/blob/master/Django_Blog/snippets/navigation.html
30. <div class="container">위치를 바꾸기 위해서 삭제해준다.
31. 아래 깃헙에서 main.html 를 가져와서 base.html에 위에 <div class="container">를 삭제한 위치에 붙여넣어준다.
https://github.com/CoreyMSchafer/code_snippets/blob/master/Django_Blog/snippets/main.html
32. 들여쓰기를 해준다 ( indentation ) 줄맞추기
33. Blog 안에 static폴더를 만들고 그 안에 같은이름의 blog폴더를 만든다
34. 위에서 만든 마지막 blog폴더 안에 main.css파일을 생성한다.
-main.css파일 안에 아래 코드를 붙여넣어준다
https://github.com/CoreyMSchafer/code_snippets/blob/master/Django_Blog/snippets/main.css
35. 위의 css파일을 base.html에 포함시키기
-먼저 static파일을 불러오기위해 base.html 파일 가장위해 아래와 같이 입력해 준다.
-아래의 위치에 해당코드를 넣어준다.
- href="" 는 파일의 위치를 넣어준다
36. Home.html로 이동해서 아래 for loop를 삭제 해준다. Css를 추가하여 디자인을 이쁘게 만들기 위해
아래 깃헙에서 article.html파일을 복사해서 캡쳐와 같이 붙여넣어준다.
https://github.com/CoreyMSchafer/code_snippets/blob/master/Django_Blog/snippets/article.html
37. Base.html에서 루트를 변경 하고 싶을때는 href를 변경해준다.
-아래의 blog-home은 URL이름이다. 아래와 같이 추가해준다.
-blog.urls.py에 name='blog-home'이 href와 같은것이다.
-Django-Blog를 클릭하면 home으로가는 설정을 하기위해 href에 blog-home을 추가해준다.
'Back-end > Django' 카테고리의 다른 글
| Django Blog 만들기 Part 5 : Database and Migrations (0) | 2020.08.29 |
|---|---|
| Django Blog 만들기 - Part 4 : Admin 페이지 (0) | 2020.08.23 |
| Django Blog 만들기 - part 2 : 어플리케이션과 라우트 (0) | 2020.08.20 |
| Django Blog 만들기 - part 1 : 시작하기 (0) | 2020.08.20 |
| 포트폴리오 웹사이트 만들기 with Django (0) | 2020.08.18 |
