[pinterest clone (6)] html (include / extends)

728x90

base.html 에서 head를 잘라내고 templates/head.html을 새로 만들었다.

head.html

<head>
    <meta charset="UTF-8">
    <title>Platypus</title>
</head>

base.html

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

{% include 'head.html' %}

<body>
    <div style="height: 10rem; background-color: #38df81; border-radius: 1rem; margin: 2rem; ">
        1

    </div>
    <div style="height: 20rem; background-color: #38df81; border-radius: 1rem; margin: 2rem; ">
        2

    </div>
    <div style="height: 10rem; background-color: #38df81; border-radius: 1rem; margin: 2rem; ">
        3

    </div>
</body>
</html>

{% include 'head.html' %} 이게 include 구문이다. 이런식이면 vue의 component랑 비스무리?하게 쓸 수 있을거 같다.

runserver에서 봐도 잘 나타난다.

header랑 footer는 계속 재활용할거니까 include로 빼주자.

: header.html, footer.html 만들어빼고 include로 넣어주기

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

{% include 'head.html' %}

<body>
    {% include 'header.html' %}
    <div style="height: 20rem; background-color: #38df81; border-radius: 1rem; margin: 2rem; ">

    </div>
    {% include 'footer.html' %}

</body>
</html>

header, footer 말고 내용이 바뀔 중간부분은 extend 구문을 사용해 accountapp에서 내용을 바꿔줄수있게한다.

{% block content %} # content라는 이름의 블럭을 만들고

{% endblock %} #어디까지가 블럭인지 알려준다

base.html

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

{% include 'head.html' %}

<body>
    {% include 'header.html' %}

    {% block content %}
    {% endblock %}

    {% include 'footer.html' %}
</body>
</html>

accountapp에서 templates을 관리할 수 있도록 안에 따로 templates를 만들어준다.

그리고 그안에 accountapp이라는 폴더를 또 만들어준다.

: 이건 가독성을 위한 사전작업이다!

그냥 templates에 바로 html넣는거 보다 이렇게하면 나중에 accountapp/base.html 이런식으로 표현되니까

어떤 app에서 가져왔는지 바로 보일수 있다.

accountapp/templates/accountapp 안에 extends할 html만들기 (ex. hello_world.html)

{% extends 'base.html' %}

{% block content %}

    <div style="height: 10rem; background-color: #38df81; border-radius: 1rem; margin: 2rem; ">
        <h1>
            testing
        </h1>
    </div>

{% endblock %}

extends로 base.html을 불러오고 그 안에 블럭 구문을 바꿔준다.

views.py

from django.http import HttpResponse
from django.shortcuts import render


def hello_world(request):
    return render(request, 'accountapp/hello_world.html')

runserver 해보면 제대로 나타나는거 볼 수 있다.

728x90

저작자표시

'웹 프로그래밍' 카테고리의 다른 글

[pinterest clone (8)] static 설정과 css분리 (0)	2021.04.26
[pinterest clone (7)] 디자인 (0)	2021.04.26
[pinterest clone (5)] Django template과 Views 연결 (0)	2021.04.26
[pinterest clone (4)] SECRET_KEY에 대해서 (0)	2021.04.26
[pinterest clone (3)] Accountapp (0)	2021.04.26

'웹 프로그래밍' 카테고리의 다른 글

티스토리툴바