반응형
base.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'style.css' %}" type="text/css"/>
{% block style %}
{% endblock %}
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>- 기본적인 틀은 위와 같다.
- 여기에 필요에 따라 코드를 수정 및 추가하게 된다.
- 추후 작성하는 html은 base에 작성된 코드를 제외하고 block({% block style %} / {% block content %})에 작성될 부분만 작성하면 된다.
- 말그대로 모든 html의 base가 된다.
- cf. base.html은 그저 대표적인 이름이자 파일일 뿐이고, 다른 이름 (menu.html, navi.html, ...)으로 작성해 여러 파일을 필요에 따라 활용할 수도 있다.
base를 사용해 templates를 관리하는 이유
- 우리가 웹페이지를 이용하다보면 페이지를 이동해도 계속해서 존재하는 상단 메뉴나, 하단 정보창이 존재한다.
- 이를 모든 html마다 반복해서 작성하는 일은 매우 비효율적이다.
- 따라서 base를 만들고 이를 활용하면, 새로 작성할 페이지의 기능에만 집중하여 효율적인 코드 작성이 가능해진다.
base.html의 위치와 settings.py
- base.html은 보통 프로젝트의 root 디렉토리에 templates폴더를 새로 만들어 관리한다.
- base.html에서 사용하는 css파일, 이미지 등의 파일은 마찬가지로 root 디렉토리에 static폴더를 새로 만들어 관리한다.
- 하지만 django는 기본적으로 root에 위치한 templates와 static 폴더를 탐색하지 않는다.
- 따라서 settings.py에서 옵션을 수정해줘야 한다.
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]- TEMPLATES에 대해 적힌 부분을 찾아 DIRS를 수정한다.
- os.path.join(BASE_DIR, 'templates')를 기입한다.
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]- 위와 같은 코드도 추가해준다. (TEMPLATES와 달리 기존에 작성되어 있지 않아 완전히 새로 작성해야 한다.)
- 이로서 base.html을 사용할 준비를 마쳤다.
base.html 활용
{% extends "base.html" %}
{% block static %}
<!--이 곳에 static에 해당하는 코드 (css파일 연결 등) 작성-->
{ % endblock % }
{% block content %}
<!--이 곳에 페이지의 내용 작성-->
{% endblock %}- '{ % extends "base.html" % }'로 base.html을 '상속'받는다.
- 그리고 각각의 block에 내용을 작성하면된다.
반응형
'🛠 기타 > WEB' 카테고리의 다른 글
| Node.js - 설치 / NPM (0) | 2020.10.12 |
|---|---|
| django 기초 - model에서 이미지 사용하기 (0) | 2020.09.14 |
| django 기초 - app 단위별로 url 정리하기 (0) | 2020.09.13 |
| django 기초 - CSS파일 연결하기 (0) | 2020.08.24 |
| django 기초 - 확인메세지(onclick) (0) | 2020.08.24 |