Django Templete 상속

4677 단어 멋사djangodjango

템플릿 상속

html 상속

  • template html 파일을 만들 때마다 중복되는 부분이 있을 경우 그것들을 일일이 써 줘야 하는 것은 매우 귀찮은 일이기 때문에, Django에서는 템플릿 상속이라는 기능을 제공한다.

templates 폴더 바로 아래 에 base.html이라는 파일을 만들고 중복되는 부분을 아래와 같이 base.html로 만든다.

# blogPosts/templates/base.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>snulion</title>
  </head>
  <body>
  {% block content %}
  {% endblock %}
  </body>
</html>

  • 이 base.html 파일을 확장하는 다른 .html 파일들은 모두 해당 파일의 내용을 포함하고 있으며 {% block content %} 와 {% endblock %} 사이에 각 파일 별 코드가 들어가게 되는 것입니다.

  • 다른 html파일에서 base.html파일과 중복되는 코드를 지우고 남은 코드 위아래에 다음과 같은 코드를 적어 주면 완성!

{% extends 'base.html' %}

{% block content %}
<!-- 보여줄 코드 -->
{% endblock content %}

JS, CSS, SCSS 상속

  • base.html에서는 <head> 태그 안에 있는 내용도 상속해줄 수 있다.
  • 아래 사진과 같이 앱 내에 static 폴더 > App 네임 폴더를 만든 뒤 그 아래 js,css,scss폴더를 만든다.

  • 그 후 base.html에 snulion
# 다음 세 줄을 <head> 안에 추가해 scss 파일을 import 해줍니다

{% load static %}
{% load sass_tags %}
<link rel="stylesheet" type="text/css" href="{% sass_src 'blogPosts/scss/style.scss' %}">
[ BOJ 2667 ] 2×n 타일링 2(Python)
[포토그램] 1. 회원가입 - Form 값 DB에 저장

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage