본문 바로가기
Django

django) 장고 html의 같은 소스 코드를 여러 페이지에서 공유 (템플릿 상속)

by 빈스터디 2023. 2. 23.

웹 페이지를 만들다보면, 여러 페이지에서 header section이나 footer section의 코드가 중복되는 경우가 있다.

인터넷이 찾아보니, AJAX를 사용하라. 라는 글을 보았는데, 얼핏 보기에 복잡해보였다.

 

https://kyung-a.tistory.com/18

 

일반 HTML 파일에 HTML include/imports 하는 방법

프론트엔드 개발자가 아닌 마크업을 위주로 하는 웹퍼블리셔들은 대부분 일반 html, css 파일로 작업을하게 됩니다 페이지가 많아지다보면 중복되는 내용이 많아지죠? 특히 header와 footer는 거의

kyung-a.tistory.com

중복 코드를 한 번만 작성할 방법은 없을까..하고 찾아본 글이다.

 

 

다소 단순한 해결법을 알게되어서 여기에 공유해볼까한다.

효율적인 방법은 아닐테지만 수정은 나중에 하겠다.

 

 

1. 먼저 중복되는 코드(header, footer부분)을 따로 작성해 둘 html 파일을 생성한다.

 

 

2. base.html 코드에 중복되는 소스코드를 작성하고, 페이지별로 수정될 부분은 아래와 같이 작성한다.

 

 

3. 원하는 페이지 화면을 구현하는 새로운 html 문서를 생성하고, 안의 내용을 전부 지운다.

그리고 위에서 만든 base.html 코드를 extends 하고, 아까 작성한  {% block contents %}와 {% endblock %} 사이에 기능구현 소스코드를 작성하면, base.html코드 부분도 같이 동작하는 것을 확인할 수 있다.