Django(장고)에서 Base.html 만들어서 html 상속받기

이번에는 html 상속하는 법을 따라해보자!

반복되는 html 태그를 base.html에 작성한 뒤에 다른 html문서에서 상속받는 방법으로 반복되는 코드를 줄일 수 있다. 

1. 가장먼저 templates/blog 폴더에 base.html을 만들어준다.

2. base.html에 공통적으로 들어갈 부분을 작성해준다.

예시로 index.html에서 처음부터 73번째 줄 </nav>까지 그리고 가장 하단의 jquery 부분을 복사해서 base.html로 옮겼다.

3. 그 다음에 할 일은 아래 코드를 적절한 위치에 삽입하는 것이다.

{% block content %}

{% endblock %}

상단 nav 아래에 넣어주었다.

4. base.html에서 nav 부분을 수정해주자.

앞으로 post list, post 작성, 로그인 기능을 추가할 것이므로 아래의 코드와 같이 수정해주었다.

                <a class="navbar-brand page-scroll" href="#page-top">Joon's Blog</a>
            </div>
 
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a class="page-scroll" href="/list">List</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="/write">write</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="/Login">Login</a>
                    </li>

5. index.html에서 base를 상속받기 위하여 extends 명령어를 써준다.

 
{% extends 'blog/base.html' %}

여기서 주의할 점은 

extends 명령은 항상 가장 윗 줄에 쓰여져야 한다는 점이다!

6. <nav> tag와 하단의 jquery 부분을 삭제하고 아래의 코드를 각각 넣어준다.

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

 상속을 받은 경우 block 바깥 영역의 코드들은 무의미해진다.

7. 서버를 구동하고 확인해보자!

서버 구동은 프로젝트 폴더에서 manage.py runserver로 할 수 있고,

http://localhost:8000 에서 확인할 수 있다.

아래와 같이 navigation bar가 수정된 것을 볼 수 있으면 성공!