728x90
SMALL
template 확장이란?
웹사이트 안의 서로 다른 page에서 HTML의 일부를 동일하게 재사용하는 것
즉, <head> 태그같이 공통으로 들어가는 부분의 base를 지정할 수 있다.
header나 footer도 구성가능!
Base Template 생성
1.blog/template/blog/base.html을 만들어 준다.
-> 웹페이지의 base가 되는 페이지이다.
<!--base html-->
{% load static %}
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link href='//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
<title>SJ's Blog </title>
</head>
<body >
<div class= "page-header">
<h1><a href="/"> SangJeong's Blog </a></h1>
</div>
<div class="content container">
<div class="row">
<div class="col-md-8">
{% block content %} <!--HTML 내에 들어갈 공간 block 을 만드는 것-->
{% endblock %}
</div>
</div>
</div>
<hr/>
<div class="page-footer">
<a href=""></a>
</div>
</body>
</html>
위를 보면 block content를 선언해준다. 이 의미는 html 내에 들어갈 공간인 block을 만드는 것이다.
이 곳에 다른 html들이 들어온다. 즉, Base.html을 확장해서 다른 template에 적용 가능한 것이다.
그럼 이 파일을 사용하는 곳을 보겠다.
{% extends 'blog/base.html' %} <!--확장파일 사용-->
{% block content %}
<div>
<a href="index/" class="btn" style='btn-dark'> 글 목록</a>
</div>
{% endblock %}
home.html에서 base.html을 확장사용하기 위해 extends를 선언해줘야하며,
base.html에서 사용한 block 안에 들어갈 내용을 정의 해준다.
이 것으로 설명을 마치겠다. 너무 간단 해..
LIST
'Web > django' 카테고리의 다른 글
| (Django) Filter (0) | 2020.08.16 |
|---|---|
| (Django) first project 9 - post show page 만들기 (0) | 2020.08.14 |
| (Django) first project7 - Bootstrap 적용 및 정적파일 (0) | 2020.08.13 |
| (Django) first project6 - Model , view, template 데이터 전달 (0) | 2020.08.13 |
| (Django) ORM과 QuerySets (0) | 2020.08.13 |
