템플릿 상속

글쓰기 페이지

[글쓰기] 페이지가 밋밋하니 꾸며보도록 합시다.
앞에서 적용시켜보았던 부트스트랩을 활용하여 지금 페이지를 꾸며도 상관없습니다.
하지만 저는 이번에는 다른 방식을 적용하여 페이지를 꾸며보도록 할 것입니다.
[Fixed navbar]가 위에 고정되어 있으며, 그 밑에 원래 내용이 출력이 되게 할 것입니다.

이를 위해서 [blogMain.html]에서 작성하였던 html 코드를 가져와서 적용해도 됩니다.
지금의 경우 [글쓰기]에 한정되어 있지만, 여러 페이지에 적용해야 되는 경우가 생긴다면 이는 코드의 중복이 많이 일어나게 됩니다.
이러한 현상을 방지하기 위해 템플릿 상속을 적용하여 페이지를 작성하도록 합시다.

템플릿 상속

말 그대로 html 문서 중 기본 뼈대가 되는 문서를 기본 템플릿으로 정하고, 이는 공통의 코드이므로 다른 문서에서 기본 템플릿의 코드가 필요하면 상속하여 가져다 쓰는 것입니다.
기본이 되는 템플릿을 'base.html'로 정합니다.

base.html 생성

[firstProject]에서 오른쪽 클릭을 합니다.
[firstProject]-[New]-[Directory]를 클릭합니다.

[templates]를 입력하고 [OK]합니다.

새로 생성된 [templates]를 클릭한 뒤 오른쪽 클릭합니다.
[templates]-[New]-[HTML File]를 클릭합니다.

[base]를 입력하고 [OK]합니다.

[base.html]이 생성되었습니다.

blogMain.html 수정

기존에 작성해놓았던 [blogMain.html] 문서를 엽니다.
안에 있는 내용 전부를 복사합니다.

[base.html]에 붙여넣기 합니다.

스크롤을 내려 밑으로 내려오면 </nav>가 보입니다.
<main> </main> 태그를 지우고 다음 코드를 추가하여 작성합니다.

{% block content %}

{% endblock %}

우리가 필요한 것은 [navbar]이므로 [navbar]만 남기고 나머지는 삭제합니다.
{% block content %} 와 {% endblock %} 사이에는 나머지 상속받는 템플릿의 내용이 들어갑니다.
즉, base.html 문서를 상속받는 템플릿이라면 [navbar]는 공통으로 상속받고, [content] 내용만 바뀌어서 나타나게 되는 것입니다.

다시 [blogMain.html]로 돌아옵니다.
이제 [navbar] 내용은 상속을 받으니 <main>만 남기고 나머지는 삭제하여 줍니다.

[firstProject]-[settings.py]를 엽니다.
[TEMPLATES]를 다음과 같이 수정하여 줍니다.

'DIRS': [os.path.join(BASE_DIR, 'blogapp/templates')]를 지워줍니다.
'DIRS': [os.path.join(BASE_DIR, 'firstProject/templates')]로 바꾸어줍니다.

다시 [blogMain.html]로 돌아와서 다음을 추가해줍니다.
{% extends 'base.html' %}

{% block content %}

{% endblock %}

createBlog.html 수정

{% extends 'base.html' %}

{% block content %}

{% endblock %}

'base.html' 적용 확인