django static files and header & footer

Set STATIC_FILES

settings.py

STATICFILES_DIRS = [BASE_DIR / "static"]

  template tag인 static을 사용하기 위해서는 settings.py에 위 코드를 추가해줘야 한다. 그러면 static directory에 있는 file들을 사용할 수 있다.

{% static %}

  html 파일 상단에 {% load static %}을 하면 static template tag를 사용할 수 있다.

header

base.html

  Search part를 {% block search-bar %}로 감쌌다. 만약 다른 rendering file에서 {% block search-bar %}{% endblock search-bar %}를 하면 base.html 파일에 있는 form은 사라진다. 즉 search-bar가 필요한 page에서만 serach-bar를 보이게 할 수 있다.

    <header>
      <div>
        <a href="{% url 'core:home' %}">
          <img src="{% static 'img/logo.png' %}" alt="logo" style = "width:50px">
          <span>hairbnb</span>
        </a>
      </div>
      {% block search-bar %}
        <div>
          <form>
            <input 
            type="text"
            placeholder="Searching By City"
            name="city" 
            >
          </form>
        </div>
      {% endblock search-bar %}
      {% include 'partials/nav.html' %}
    </header>

nav.html

  user는 context processor라고 한다. 즉 views.py에서 user를 넘겨주지는 않았지만 html 파일 어디에서든 사용할 수 있는 변수다.

  user.is_authenticated는 사용자가 login을 했는지의 여부를 반환한다(boolean).

<ul>
  {% if user.is_authenticated %}
    <li class="nav_link">
      <a href="#">Profile</a>
    </li>
    <li class="nav_link">
      <a href="#">Log Out</a>
    </li>
  {% else %}
    <li class="nav_link">
      <a href="#">Log In</a>
    </li>
    <li class="nav_link">
      <a href="#">Sign Up</a>
    </li>
  {% endif %}
</ul>

footer.html

<footer>
  <span>&copy; {{year}} HairBnb, Inc. All rights reserved</span>
</footer>

참고 자료

• 노마드 코더의 Airbnb 클론 강의
• STATICFILES_DIRS
• static template tag

소스 코드

github.com/zpskek/airbnb-clone-v3/commit/4b2c286a371fbb80d3a77c001f5bf86d63e076a7

footer.html : github.com/zpskek/airbnb-clone-v3/commit/960b159749e48083c0cea8a93f45c6f44fffb253