템플릿 확장
템플릿 내에 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/bootstrap@5.1.1/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/bootstrap@5.1.1/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/
The only thing worse than starting something and failing...is not starting something