반응형
템플릿 상속이란?
1. 반복되는 html 내용(ex: Navbar, CDN)을 base.html에 담고
2. 해당 html 내용이 필요한 html 에서 이를 불러온다.
1. templates 폴더에 base.html 생성
2. base.html 에 중복되는 코드를 넣어준다.
{% block contents %}
<!--이 사이에 각 html 별로 겹치지 않는 고유의 내용이 들어가게 된다.-->
{% endblock %}
base.html
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title>블로그</title>
<!-- Bootstrap core CSS -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Custom styles for this template -->
<link href="{% static 'css/jquery.bxslider.css' %}" rel="stylesheet">
<link href="{% static 'css/style.css' %}" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="{% url 'home' %}">Home</a></li>
<li><a href="{% url 'pastime' %}">Pastime</a></li>
<li><a href="{% url 'createPastime' %}">PostPastime</a></li>
<li><a href="{% url 'place' %}">Place</a></li>
<li><a href="{% url 'createPlace' %}">PostPlace</a></li>
<li><a href="{% url 'music' %}">Music</a></li>
<li><a href="{% url 'createMusic' %}">PostMusic</a></li>
<li><a href="{% url 'photo' %}">Photo</a></li>
<li><a href="{% url 'aboutme' %}">About Me</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#"><i class="fa fa-reddit"></i></a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<header>
<a href="{% url 'home' %}"><img src="{% static 'images/logo.jpg' %}"></a>
</header>
{% block contents %}
<!--이 사이에 각 html별로 겹치지 않는 내용이 들어가게 된다.-->
{% endblock %}
<footer class="footer">
<div class="footer-socials">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-google-plus"></i></a>
<a href="#"><i class="fa fa-dribbble"></i></a>
<a href="#"><i class="fa fa-reddit"></i></a>
</div>
<div class="footer-bottom">
<i class="fa fa-copyright"></i> Copyright 2015. All rights reserved.<br>
Theme made by <a href="http://www.moozthemes.com">MOOZ Themes</a>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/jquery.bxslider.js' %}"></script>
<script src="{% static 'js/mooz.scripts.min.js' %}"></script>
</body>
</html>
3. Settings.py 에 base.html 위치 알리기
settings.py
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': ['blogproject/blog/templates'],DIRS 부분에 경로를 작성해주는데 필자는 blogproject 내의 blog 앱의 templates 폴더 내에 있으므로 다음과 같이 경로를 작성해주었다.
4. 각 html 에서 base.html 을 불러오기
{% extends 'base.html' %} 코드를 base.html을 불러와야 하는 각 html 의 최상단에 입력해준다.
-> 최상단이 아닐 시 오류 발생
{% endblock %} 이후 base.html에서 footer가 이어졌듯이 이 html에서도 base.html의 footer가 불려와 이어지게 된다.
Music.html
{% extends 'base.html' %} <!--base.html을 불러오기-->
{% load static %}
{% block contents %} <!--Music.html 고유의 내용이 시작된다-->
<section>
{% block content %}
<br>
{% for music in musics %}
<main role="main" class="container">
<div class="jumbotron">
<h2>{{ music.title }}</h2>
<br>
<h4>{{ music.pub_date }}</h4>
<br>
<a class="btn btn-lg btn-primary" href="{% url 'musicviewdetail' music.id %}" role="button">View Details »</a>
</div>
</main>
{% endfor %}
{% endblock %}
</section>
{% endblock %} <!--Music.html 고유의 내용이 끝났다-->
템플릿 상속은
1. 일관된 UI 구성 및 변경을 용이하게 하여 효율을 높여준다.
2. MTV (Model Template View) 의 Template 에서 가장 중요하다.
반응형
'Project > [장고&파이썬] 블로그 프로젝트' 카테고리의 다른 글
| 1. Django 부트스트랩 템플릿 vscode html 적용하기 | static에 js, css 넣기 (0) | 2021.08.01 |
|---|---|
| 0. 블로그 프로젝트 기술 구상, 장고 기본환경 세팅 (0) | 2021.08.01 |