Django - blog 홈페이지 4 (templates-1)

yunseul·2024년 6월 17일
djangopython

Django

목록 보기
22/30

프로젝트 템플릿 디렉토리의 settings.py 파일 수정

### 위치 이동
cd /Users/user/test/django/project/web/web

### settings.py
vi 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',
            ],
        },
    },
]
  • ‘DIRS’
    • [os.path.join(BASE_DIR, 'templates')]
      • Django가 템플릿 파일을 찾을 사용자 지정 디렉토리 목록
      • BASE_DIR 디렉토리 내부의 templates 라는 서브 디렉토리를 의미
    • BASE_DIR : 프로젝트의 기본 디렉토리를 나타내며, 이는 일반적으로 settings.py 파일이 위치한 디렉토리
    • Django 에게 프로젝트의 루트 디렉토리 아래에 있는 templates 디렉토리에서 템플릿을 찾도록 지시

base.html

템플릿 상속 기능을 위한 base.html

### 위치 이동
cd /Users/user/test/django/project/web

### 디렉토리 생성
mkdir templates

### 위치 이동
cd /Users/user/test/django/project/web/templates

### base.html 생성
vi base.html

---

<!DOCTYPE html>
<html lang="ko">

<head>
<title>{% block title %}Django Web Programming{% endblock %}</title>

{% load static %}
<link rel="stylesheet" type="text/css" href="{% static "css/base.css" %}" />
<link rel="stylesheet" type="text/css" href="{% block extrastyle %}{% endblock %}" />

</head>

<body>

<div id="header">
    <h2 class="maintitle">Easy&amp;Fast Django Web Programming</h2>
    <h4 class="welcome">Welcome, <a href="#">yunseul</a> /
                <a href="#">Change Password</a> /
                <a href="#">Logout</a>
    </h4>
</div>

<div id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Bookmark</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Photo</a></li>

    <li><a href="#">Add&bigtriangledown;</a>
        <ul>
            <li><a href="#">Bookmark</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Photo</a></li>
        </ul>
    </li>
    <li><a href="#">Change&bigtriangledown;</a>
        <ul>
            <li><a href="#">Bookmark</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Photo</a></li>
        </ul>
    </li>

    <li><a href="#">Archive</a></li>
    <li><a href="#">Search</a></li>
    <li><a href="#">Admin</a></li>
</div>

{% block content %}{% endblock %}
{% block footer %}{% endblock %}

</body>
</html>

body 영역에는 크게 4가지의 영역

  • header 영역
    • 사이트의 제목, 로그인 관련 기능이 있으며, yunseul 자리는 로그인 아이디가 채워지는 자리
    • & 는 HTML 특수문자 (&) 를 의미함
  • menu 영역
    • 사이트의 메뉴가 있으며 <a href+"#"> 의 #은 링크 URL 이 들어갈 자리
  • content 영역
    • 빈칸으로 하고, 각 앱에서 만드는 페이지로 채워질 예정
    • {% bloock %} 태그를 사용하므로 실제 내용은 전적으로 하위 템플릿 파일에 따라 결정됨
  • footer 영역
    • 사이트의 꼬리말 텍스트가 위치할 예정으로 해당 영역 또한 content 영역처럼 {% block %} 태그를 사용

base.html 템플릿 파일에는 하위 템플릿 파일에서 재정의할 수 있도록 다음 4가지 블록을 정의

  • {% block title %}
    • 하위 페이지마다 페이지 제목을 다르게 정의
  • {% block extrastyle %}
    • base.html 파일에서 사용하는 base.css 파일 이외에 하위 페이지에서 필요한 CSS 파일 정의
  • {% block content %}
    • 하위 페이지마다 실제 본문 내용을 정의
  • {% block footer %}
    • 하위 페이지마다 꼬리말을 다르게 정의

참고 자료

profile
yunseul
새로운 것을 시도하고 도전하는 것을 좋아하는 Engineer 입니다..
이전 포스트

Django - blog 홈페이지 3 (views.py)

다음 포스트

Django - blog 홈페이지 4 (templates-1)

0개의 댓글