[Django] 템플릿 확장

29338 단어 djangodjango

템플릿 확장

템플릿 내에 html파일을 살펴보면 많은 부분이 중복되고 있음(head, 네비게이션 바,footer 등)
템플릿 확장을 통해 웹사이트 안의 서로 다른 페이지에서 html일부를 동일하게 재사용 할 수 있게 됨.
동일한 정보/레이아웃 사용할 때 무돈 파일마다 같은 내용을 반복해서 입력할 필요가 없음

1. 기본 템플릿 생성

  • 웹사이트 내 모든 페이지에 확장되어 사용되는 가장 기본적인 템플릿
  • 프로젝트 폴더 안에 templates 폴더 안에 base.html 생성
  • 동적으로 바뀌는 부분을 아래의 양식 사이에 작성
{% block contents %}
{% endblock %}
  • settings.py에 기본 템플릿 경로 설정
  • BASE_DIR : 최상위 ROOT 디렉토리
  • 2번째 인자로는 ROOT 디렉토리 이하 기본 템플릿이 위치한 경로 입력
  • 위의 의미는 기본주소/templates 에 기본 템플릿이 위치함 template 사용시 위의 경로 이용해 달라는 뜻

2. 각 html 파일에 base.html 상속받기

  • base.html을 기본으로 깔고, {% block container %}/{% endblock %} 사이에 내용을 넣으면 됨.
  • 기본 템플릿을 상속받기 위해 {% extends 'base.html%}을 우선 입력
  • base.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="shortcut icon" href="{% static 'images/favicon.ico' %}">
  <meta charset="UTF-8">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <link rel ="stylesheet" href = "{% static 'css/main.css' %}">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  <title>SUE LeatherCraft</title>
</head>
<body>
{% block contents %}
    
{% endblock %}
</body>
</html>

main.html

{% extends 'base.html' %}
{% load static %}
{% block contents %}
  <script>
    // 창이 로드되면서 실행되는 함수
    window.onload = function(){
      check_login();
      check_windowSize();
    }

    //로그인 체크 함수 : 로그인 여부에 따라 네비게이션바가 달라짐
    function check_login(){
      var id = "{{ member_id }}";
      if (id){
        $('#join_nav').addClass('d-none')
        $('#login_nav').addClass('d-none')
        $('#logout_nav').removeClass('d-none')
        $('#mypage_nav').removeClass('d-none')
        $('#cart_nav').removeClass('d-none')
        $('#navbarDropdown').text(id + "님")
      }
      else{
        $('#logout_nav').addClass('d-none')
        $('#mypage_nav').addClass('d-none')
        $('#cart_nav').addClass('d-none')
      }
    }

    //창크기 체크 함수 : 창크기에 따라 carousel 사이즈 조절
    function check_windowSize(){
      if ($(window).width() > 960 ){
        $(".container").css({"width":"60%"})
      }
      else if($(window).width() > 720 ){
        $(".container").css({"width":"80%"})
      }
      else{
        $(".container").css({"width":"100%"})
      }
    }
  </script>
    <!-- CAROUSEL 시작 -->
    <div class= "container mx-auto px-auto">
      <div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="{% static 'images/bag1.png' %}" class="d-block w-100" alt="1">
        </div>
        <div class="carousel-item">
          <img src="{% static 'images/bag2.png' %}" class="d-block w-100" alt="2">
        </div>
        <div class="carousel-item">
          <img src="{% static 'images/bag3.png' %}" class="d-block w-100" alt="3">
        </div>
        <div class="carousel-item">
          <img src="{% static 'images/bag4.png' %}" class="d-block w-100" alt="4">
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  </div>
  <!-- CAROUSEL 끝 -->
{% endblock %}

이런식으로 사용하면 됨

templates폴더를 프로젝트 폴더 안에다 만들어야함!!! 프로젝트폴더와 프로젝트 폴더와 이름이 같은 앱폴더에 만들면 안됨!! 헷갈렸다.

👉🏻참고 블로그
https://tothefullest08.github.io/django/2019/04/27/Django10_template_extending/

[자료구조] 셋 Set, 맵 Map
백준 6198 옥상 정원 꾸미기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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