티스토리 뷰

Web/Django

6-2. [DTL] 템플릿 확장(base.html)

HAN_PY 2020. 5. 6. 16:51
반응형

Django Template Language

종속 html만들기

 

 

이번엔 무엇을 배울까? 아래의 내용을 보자.

<title>Document</title> 부분은 위쪽 창에 뜨는 부분이다.(HTML 문법)

만약 우리가 title을 바꾼다면 지금까지 만든 html 파일을 다 들어가서 하나씩 바꿔야 한다.

이러한 번거로움을 해결하기 위해서 상속하는 법을 알아보자.

 

 

첫 번째, templates/base.html을 만든다.

위치는 생성한 프로젝트 안에서 templates 폴더를 하나 만든다. 위의 트리를 보면 articles라는 app도 생성해놨다.

+) 혹시나 서버 실행했을 때 한글로 번역할 거냐고 계속 뜬다면 <html lang="en">을 <html lang="ko">로 바꾸자.

{% block body %}

{% endbody %}

사이 부분에 다른 html 파일들이 추가된다고 생각하면 된다.

 

 

두 번째, html을 만들자.

html은 app안에 templates를 만들고, 다시 그안에 articles(app이름)라는 폴더를 하나더 만들어 준다.(app 이름의 폴더를 만들어 주는 이유는 중복되는 html 파일이 있으면 error가 뜨기 때문이다.)

 

detail.html을 보자.

  • 첫줄의 extends는 확장을 한다는 코드로 이해하면 된다.(반드시 적어주자)
  • body부분을 제외하고 지우자. 그리고 body 윗부분에 {% block body %}를 넣으면 되고
  • body 아래 부분을 {% endblock %}를 적어준다.

 

 

 

세번째, CSS 적용하기

bootstrap적용과 css적용도 아래와 같이 당연히 할 수 있다. 

  •  간단히 <head>부분 아래쪽에 {%  block css  %}와 {%  endblock  %}를 추가하면 된다.

 

네번째, settings.py 설정

settings.py에서 TEMPLATES를 찾자. 그리고 base.html이 있는 위치를 DIRS에 적어준다.

  • BASE_DIR : 최상위 ROOT 디렉토리를 의미한다
  • 2번째 이하 인자로는 ROOT 디렉토리 이하 기본 템플릿이 위치한 경로를 입력
  • 만약 경로를 추가하고 싶다면, 'DIRS': [os.path.join(BASE_DIR, 'articles', 'templates')], 이런식으로 추가가 가능하다

 

 

출력화면

 

이런식으로 출력 했다면 성공!

 

 

디테일한 설명은 github 코드를 참고하자.

 

 

 

 

홈페이지에서 사이트를 이동할 때 메뉴바(navbar)같은 경우는 유지되면서 내용만 바뀐다. 즉, 바뀌지 않는 부분을 base.html로 넣고 나머지 부분을 작업하면 된다.

 

 

 

 

사실 이정도 오면 아주 기초 부분은 구현이 가능하다고 본다.

 

아니면 장고로 CRUD만 만들고 싶다면, 블로그에서 꼭 CRUD라고 검색을 해보자.

han-py.tistory.com/51

 

[django] CRUD 간단히 구현하기 0406

CRUD 구현 Create Read Update Delete 지금부터 가장 기초적인 내용으로 사족을 빼고 지금까지 배운 지식을 이용해서 CRUD기능을 구현해 볼 것이다. 무작정 따라하면서 기본적인 흐름을 익힌 후에 디테일�

han-py.tistory.com

 

 

만약 로그인 회원가입부분을 구현하고 싶다면, 아래부분 부터 순차적으로 보자.

han-py.tistory.com/144

 

[Django]사용자인증관리_User모델, 비밀번호 암호화

User 모델 지금부터 우리는 장고 내부코드를 확인 할 것이다. 이 때 전제가 되는 부분은 장고의 내부 코드는 바꾸는 것이 불가능 하다는 것이다. 공식문서를 확인 하자. github django를 검색한다. 들�

han-py.tistory.com

 

 

 

 

만약 react나 Vue와 같은 것들과 django를 연동하는 것이라면, 아래의 부분부터 순차적으로 보자.

han-py.tistory.com/214

 

Django rest framework_1. 프로젝트시작하기(서버)

0. 들어가면서. django를 서버분만 사용할 것이다. 따라서 아래의 방식을 순차적으로 하면된다. 가상환경을 만들고 settings설정을 하고 app 설정 후에 serializers 까지 해서 진행을 할 것이다. 초기설정

han-py.tistory.com

 

반응형

'Web > Django' 카테고리의 다른 글

[Django]urls 분리  (0) 2020.06.14
[Django]settings.py  (0) 2020.06.13
6-1. [DTL] django template language  (0) 2020.05.05
5-2. django_variable routing 기초(int)  (0) 2020.05.03
5-1. django_variable routing 기초(str)  (0) 2020.05.01
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함