Books App _ Template 상속하기

앱을 만들다 보면 다른 페이지라도 같은 속성을 공유하는 부분이 많다.

네브바처럼 어느 페이지에 가도 변함없는 부분 말이다.

이를 만들기 위해서는 모든 페이지에 똑같은 내용을 복사 붙여 넣기... 해도 되지만.

더 좋은 방법이 있다.

---

위와 같은 순간을 위해 django에서는 상속 이라는 기능을 만들어뒀다. 개발자 만세!

즉 기본 틀이 되는 html(여기서는 base.html)을 만들어두면,

간단한 코드 몇 줄로 해당 html의 양식을 어디서나 쓸 수 있는 것.

 

settings.py

이를 위해 우선 django에 templates를 연결했음을 알려줘야 한다.

settings.py에서 DIRS 부분에 os.path.join(BASE_DIR, 'templates')를 적어주자.

 

base.html

기본 틀의 뼈대가 될, base.html을 만들어주자.

 

이때 base.html은 개별 App의 템플릿이 아닌, 공통으로 사용할 템플릿이다!

그렇기 때문에 books와 polls 앱 내가 아닌, 최상위에 templates라는 폴더를 새로 만들어 html을 만들어두자.

 

우선 제일 위에 {% load static %}을 적어, static이라는 사용자 정의 태그를 로딩해준다.

이를 통해 해당 내용 밑, 즉 base.html 전체가 새로운 static으로 load된 것이라 생각하면 된다.

이렇게 load된 static을 다른 html에서도 extends를 통해 사용할 수 있는 것!

 

그런데 base.html 중에서도 상속하고 싶은 부분과 그렇지 않은 부분이 나뉠테다.

이 때 상속하고 싶지 않은 부분은 {% block 지정 이름 %} -- {% endblock %}으로 감싸주면 된다.

즉 해당 부분에만 구멍을 뚫어둔다(다른 html에서는 해당 자리에 다른 내용 쓸 수 있도록)고 생각하면 될 듯!

 

base_books.html

다음은 뼈대인 base.html을 상속받은 book_base.html을 만들어준다.

마찬가지로 최상위 temlplates 폴더에!

 

head부분에서 base.html을 상속! → {% extends "base.html" %}

이로써 아까 전 block으로 구멍을 뚫은 부분을 제외한 base.html의 모든! 내용이 book_base.html에도 전달되었다.

 

여기서도 구멍내고 싶은 부분을 {% block 지정 이름 %}으로 감싸주면 된다.

이 때, 구멍낸 부분을 부모(base.html)와 똑같이 하고 싶다면?

{{block.super}}을 사용해 이 부분은 base.html에서 감싸줬던 녀석들과 똑같은 걸 쓴다고 알려주면 된다!

 

이 경우 현재 sidebar 블록은 base.html의 Project와 Admin이라는 링크에다가,

Books_Home이라는 링크가 합쳐진 형태가 된다.

 

즉 뼈대인 base.html을 상속받은 book_base.html을 만들었고,

이제 book_base.html을 각 html상에 다시 상속할 예정!

 

book_index.html

역시나 {% extends "base_books.html %}을 통해 base_books.html을 상속받았음을 알려주자.

 

이 요소들을 상속받고자 하는 html 상에도 똑같이 적어주면...

쨔잔. django의 Admin페이지 스타일시트가 사용된 것을 볼 수 있다.

또한 상속했던 Project, Admin, Books_Home이라는 링크가 모든 페이지에 들어가 있다. 성공!