Template 상속

번호

비고

11:06

주차

5월 셋째주

확인

Bootstrap 에서 CSS 코드, JS bundle 코드, Nav 바 코드 각각 헤드헤드바디에 넣음

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
HTML
복사

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>
HTML
복사

중복되는 코드를 장고에서는 base.html 을 만들어서 다른 html 에 적용 가능

⇒ 템플릿 상속

project2 폴더에 templates 폴더 생성, base.html 파일 생성

home.html 파일의 맨 위부터 </nav> 까지 잘라내서 base.html 에 넣은 후 </body></html> 넣음

</nav> 아래에 다음 코드 넣음

<div class="container">
          {% block content %}
          {% endblock %}
</div>
HTML
복사

home.html 의 맨 위에는 다음 코드 넣음

{% extends 'base.html' %}

{% block content %}
HTML
복사

맨 아래에는 다음 코드 넣음

{% endblock %}
HTML
복사

project2 의 settings.py 의 TEMPLATES DIRS [] 안에 'project2/templates' 로 경로 넣음

TypeError: argument of type 'WindowsPath' is not iterable

⇒ 가상환경 안 켜서 생기는 에러

→ source myvenv/Scripts/activate 터미널에 입력해서 가상환경 킴

home.html 에 한대로 detail.html 이랑 edit.html 이랑 new.html 에도 변경

⇒ 모든 사이트에 nav 바 형성(base.html 에 있는 스타일도 함께 적용되므로 가운데 정렬됨)

urls.py 에서 path 가 너무 많이 늘어남 ... 가독성 별로, urls.py 가 커짐

⇒ 앱별로 관리

→ blog 폴더에 urls.py 파일 생성, 기존 urls.py 의 from~ path 끝까지 복사 붙여넣기

→ 다음 코드 지움

path('admin/', admin.site.urls),

path('', home, name="home"),

→ from 에서 blog.views 을 .views 로 경로 옮기고

기존 파일에서 from blog.views import * 의 * 을 home 으로 바꾸고

urlpatterns 에서 지운 코드 뺀 나머지 path 들 다 지움

위에 참고 글에 path('blog/', include('blog.urls')) 그대로 추가하고

(, 주의? 왜 안써도 돌아감?)

from django.urls import path 에 ,include 추가함

(하나하나 적으면 include 적을 때 from 뭐시기 자동 추가되는데 문제가 될지도?)