반원 블로그

django - 템플릿 상속, block contents 본문

2018~/Django 개인 공부 정리

django - 템플릿 상속, block contents

반원_SemiCircle 2019. 9. 8. 19:17

1. 공통된 html 코드 부분을 base.html로 따로 만들어, 다른 페이지(자식)들이 상속(extends)받을 수 있게 할 수 있다.

알아야될 코드는 다음 참고

//base.html

공통 html코드1

{% block contents %}
다른 페이지의 html 코드가 들어갈 장소
{% endblock %}

공통 html 코드1
//다른 html들

{% extends "base.html" %}

{% block contents %}
해당 페이지에서 사용하는 html코드
{% endblock %}

 

2. (예) 분리시키 base.html과 login.html과 register.html

팁 : Ctrl +A로 전부 선택한후 Ctrl + K + F 는 코드 정렬이다.

<!-- base.html -->

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> -->
    <link rel="stylesheet" href="/static/bootstrap.min.css">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</head>

<body>
    <div class="container">
        {% block contents %}

        {% endblock %}
    </div>
</body>

</html>
<!-- login.html -->

{% extends "base.html" %}

{% block contents %}
<div class="row mt-5">
    <div class="col-12 text-center">
        <h1>로그인</h1>
    </div>
</div>
<div class="row mt-5">
    <div class="col-12">
        {{error}}
    </div>
</div>

<div class="row mt-5">
    <div class="col-12">
        <form method="POST" action=".">
            {% csrf_token %}
            <div class="form-group">
                <label for="username">사용자 이름 입력</label>
                <input type="text" class="form-control" id="username" name="username" placeholder="사용자이름">
            </div>
            <div class="form-group">
                <label for="password">비밀번호 입력</label>
                <input type="password" class="form-control" id="password" name="password" placeholder="비밀번호">
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
</div>
{% endblock %}
{% extends "base.html" %}

{% block contents %}
<div class="row mt-5">
    <div class="col-12 text-center">
        <h1>회원가입</h1>
    </div>
</div>
<div class="row mt-5">
    <div class="col-12">
        {{error}}
    </div>
</div>

<div class="row mt-5">
    <div class="col-12">
        <form method="POST" action=".">
            {% csrf_token %}
            <div class="form-group">
                <label for="username">사용자 이름 입력</label>
                <input type="text" class="form-control" id="username" name="username" placeholder="사용자이름">
            </div>
            <div class="form-group">
                <label for="useremail">사용자 이메일 입력</label>
                <input type="email" class="form-control" id="useremail" name="useremail" placeholder="사용자 이메일">
            </div>
            <div class="form-group">
                <label for="password">비밀번호 입력</label>
                <input type="password" class="form-control" id="password" name="password" placeholder="비밀번호">
            </div>
            <div class="form-group">
                <label for="re-password">비밀번호 확인</label>
                <input type="password" class="form-control" id="re-password" name="re-password" placeholder="비밀번호 확인">
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
</div>

{% endblock %}
저작자표시 비영리 변경금지

'2018~ > Django 개인 공부 정리' 카테고리의 다른 글

django - 로그인 기능 수정(2) - 템플릿 if, 유효성 검사 추가  (1) 2019.09.08
django - 로그인 기능 수정(1) - forms.py 상속, 템플릿 for  (0) 2019.09.08
django - 로그아웃 처리  (0) 2019.09.06
django - 로그인 처리 (세션 이용)  (0) 2019.09.06
django - static 폴더 관리 + js와 css 위치  (0) 2019.09.06
django - 이메일 필드 추가  (0) 2019.09.06
django 회원 가입 - DataBase에 저장, 패스워드 부호화, 미입력 처리  (0) 2019.09.04
django 회원가입 페이지 id 속성 변경. 프론트에서 백으로 데이터 전송  (0) 2019.09.04
'2018~/Django 개인 공부 정리' Related Articles more
Comments