Django를 사용한 식료품 가방(2부) - 템플릿 및 정적 파일 수정

30492 단어 webdev django python

소개

last part 에서 GroceryBag 프로젝트를 설정했습니다. 이 부분에서는 템플릿에서 템플릿 및 정적 파일 URL을 수정합니다. 문제는 템플릿을 보면 코드가 모든 파일에서 비슷하다는 것입니다. 템플릿 상속을 사용하여 이 문제를 해결할 수 있습니다. 상속은 다른 것으로부터 무언가를 얻는 것을 의미합니다. 즉, 자식(상속되는 자식)은 부모(상속되는 자식)로부터 속성을 가져옵니다. 템플릿 상속을 사용하여 다양한 파일에서 동일한 HTML 코드를 반복해서 작성하지 않도록 합니다.

다음으로 수정할 사항은 정적 파일을 이러한 템플릿과 연결하는 방식입니다. 먼저 이 문제를 해결한 다음 템플릿 상속으로 이동하겠습니다.

정적 파일 URL 수정

지금까지 정적 파일(CSS, 이미지 및 JavaScript)을 다음과 같은 방식으로 템플릿과 연결했습니다.

<link rel="stylesheet" href="css/style.css" />

그러나 템플릿 파일과 정적 파일을 각각의 디렉토리에 올바르게 넣은 경우에는 작동하지 않습니다. 이전 블로그에서 STATIC_URL와 STATICFILES_DIR를 다음과 같이 추가했습니다.

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    BASE_DIR / "static",
]

이러한 구성이 준비되면 다음 구문을 사용하여 템플릿에서 동적으로 정적 파일을 제공할 준비가 된 것입니다.

{% load static %}
<link rel="stylesheet" href="{% static 'css/style.css' %}" />

Django의 official documentation에서 이에 대해 자세히 알아볼 수 있습니다.

Django 템플릿 상속

아시다시피 템플릿 상속을 사용하여 다양한 파일에서 동일한 HTML 코드를 반복해서 작성하지 않도록 합니다. 모든 웹 페이지에 공통적인 몇 가지 사항이 있다고 가정합니다. 우리가 할 수 있는 것은 코드를 반복해서 작성하는 대신 GroceryBag/settings.py 파일에 공통 코드를 작성한 다음 이 파일을 다른 HTML 템플릿으로 확장할 수 있다는 것입니다.

확장 및 블록 태그

extends 태그는 하위 템플릿 내에서 상위 또는 기본 템플릿을 상속하는 데 사용됩니다. 구문은 다음과 같습니다.

{% extends "filename.html" %}

파일 이름은 템플릿 디렉토리 내의 기본 템플릿 경로여야 합니다.

블록 태그는 하위 템플릿에서 상위 템플릿의 일부를 재정의하는 데 사용됩니다. 필요한 만큼 블록을 생성할 수 있습니다. 구문은 다음과 같습니다.

{% block block_name %}

{% endblock block_name %}

예시

다음과 같은 기본 템플릿base.html이 있다고 가정합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>{% block title %}{% endblock title %} | Grocery Bag</title>
  </head>
  {% block content %} {% endblock content %}
</html>

이 기본 템플릿을 상속하고 다음과 같이 하위 템플릿base.html을 생성할 수 있습니다.

{% extends "base.html" %}

{% block title %}Index Page{% endblock title %} 

{% block content %}
<body>
  Hello World!
</body>
{% endblock content %}

템플릿 수정

이제 템플릿 상속을 배웠으므로 템플릿 디렉토리에 base.html 파일을 만들고 그 안에 다음 콘텐츠를 추가할 수 있습니다.

{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>{% block title %}{% endblock title %} | Grocery Bag</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
<!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="{% static 'css/style.css' %}" />
    {% block custom_head %} {% endblock custom_head %}
  </head>
  {% block content %} {% endblock content %}
</html>

CSS 파일을 웹 페이지에 어떻게 연결했는지 확인하십시오. 또한 index.html , title 및 custom_head 의 세 블록을 생성했습니다. content는 각 페이지의 제목을 제공하는 데 사용되고, title는 다른 웹 페이지에 필요한 더 많은 정적 파일을 추가하는 데 사용되며, custom_head는 본문을 제공하는 데 사용됩니다.

이제 다른 웹페이지를 수정해 보겠습니다.

index.html

{% extends "base.html" %}{% load static %} {% block title %}View Bag{% endblock title %} 

{% block content %}
<body>
  <div class="container mt-5">
    <!-- top -->
    <div class="row">
      <div class="col-lg-6">
        <h1>View Grocery List</h1>
      </div>
      <div class="col-lg-6 float-right">
        <div class="row">
          <div class="col-lg-8">
            <!-- Date Filtering-->
            <input type="date" class="form-control" />
          </div>
          <div class="col-lg-4">
            <input type="submit" class="btn btn-danger" value="filter" />
          </div>
        </div>
      </div>
    </div>
    <!-- // top -->
    <!-- Grocery Cards -->
    <div class="row mt-4">
      <!--- -->
      <!-- Loop This -->
      <div class="col-lg-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Tomato</h5>
            <h6 class="card-subtitle mb-2 text-muted">2 Pcs.</h6>
            <p class="text-success">BOUGHT</p>
          </div>
        </div>
      </div>
      <!-- // Loop -->
      <div class="col-lg-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Chicken</h5>
            <h6 class="card-subtitle mb-2 text-muted">2Kgs</h6>
            <p class="text-danger">NOT AVAILABLE</p>
          </div>
        </div>
      </div>

      <div class="col-lg-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Posto</h5>
            <h6 class="card-subtitle mb-2 text-muted">50gms</h6>
            <p class="text-info">PENDING</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
{% endblock content %}

add.html

{% extends "base.html" %}{% load static %} {% block title %}Add to bag{% endblock title %} 

{% block content %}
<body>
  <div class="container mt-5">
    <h1>Add to Grocery Bag</h1>
    <form>
      <div class="form-group mt-2">
        <label>Item name</label>
        <input type="text" class="form-control" placeholder="Item name" />
      </div>
      <div class="form-group mt-2">
        <label>Item quantity</label>
        <input type="text" class="form-control" placeholder="Item quantity" />
      </div>
      <div class="form-group mt-2">
        <label>Item status</label>
        <select class="form-control">
          <option value="0">PENDING</option>
          <option value="1">BOUGHT</option>
          <option value="0">NOT AVAILABLE</option>
        </select>
      </div>
      <div class="form-group mt-2">
        <label>Date</label>
        <input type="date" class="form-control" placeholder="Date" />
      </div>
      <div class="form-group mt-2">
        <input type="submit" value="Add" class="btn btn-danger" />
      </div>
    </form>
  </div>
</body>
{% endblock content %}

업데이트.html

{% extends "base.html" %}{% load static %} {% block title %}Update bag{% endblock title %} 

{% block content %}
<body>
  <div class="container mt-5">
    <h1>Update Grocery Bag</h1>
    <form>
      <div class="form-group mt-2">
        <label>Item name</label>
        <input
          type="text"
          class="form-control"
          placeholder="Item name"
          value="TOMATO"
        />
      </div>
      <div class="form-group mt-2">
        <label>Item quantity</label>
        <input
          type="text"
          class="form-control"
          placeholder="Item quantity"
          value="2PCS"
        />
      </div>
      <div class="form-group mt-2">
        <label>Item status</label>
        <select class="form-control">
          <option value="0">PENDING</option>
          <option value="1" selected>BOUGHT</option>
          <option value="0">NOT AVAILABLE</option>
        </select>
      </div>
      <div class="form-group mt-2">
        <label>Date</label>
        <input
          type="date"
          class="form-control"
          placeholder="Date"
          value="2020-03-20"
        />
      </div>
      <div class="form-group mt-2">
        <input type="submit" value="Update" class="btn btn-danger" />
      </div>
    </form>
  </div>
</body>
{% endblock content %}

signin.html

{% extends "base.html" %}{% load static %} {% block title %} Sign In {% endblock title %} 

{% block custom_head %}
<link rel="stylesheet" href="{% static 'css/signin.css' %}" />
{% endblock custom_head %} 

{% block content %}
<body class="text-center">
  <main class="form-signin">
    <form>
      <h1 class="h3 mb-3 fw-normal">Please sign in</h1>

      <div class="form-floating mt-2">
        <input
          type="text"
          class="form-control"
          id="floatingInput"
          name="username"
          placeholder="johndoe"
        />
        <label for="floatingInput">Username</label>
      </div>
      <div class="form-floating mt-2">
        <input
          type="password"
          class="form-control"
          id="floatingPassword"
          name="password"
          placeholder="Password"
        />
        <label for="floatingPassword">Password</label>
      </div>

      <button class="w-100 btn btn-lg btn-primary" type="submit">
        Sign in
      </button>
      <p class="mt-3">New user? <a href="signup.html">Sign up now</a></p>
    </form>
  </main>
</body>
{% endblock content %}

signup.html

{% extends "base.html" %}{% load static %} {% block title %} Sign Up {% endblock title %} 

{% block custom_head %}
<link rel="stylesheet" href="{% static 'css/signin.css' %}" />
{% endblock custom_head %} 

{% block content %}
<body class="text-center">
  <main class="form-signin">
    <form>
      <h1 class="h3 mb-3 fw-normal">Please sign up</h1>

      <div class="form-floating mt-2">
        <input
          type="text"
          class="form-control"
          id="floatingInput"
          name="username"
          placeholder="johndoe"
        />
        <label for="floatingInput">Username</label>
      </div>
      <div class="form-floating mt-2">
        <input
          type="password"
          class="form-control"
          id="floatingPassword"
          name="password"
          placeholder="Password"
        />
        <label for="floatingPassword">Password</label>
      </div>

      <button class="w-100 btn btn-lg btn-primary" type="submit">
        Sign up
      </button>
      <p class="mt-3">
        Already Registered? <a href="signin.html">Sign in now</a>
      </p>
    </form>
  </main>
</body>
{% endblock content %}

서버 실행

서버를 실행하기 전에 다음과 같이 content에 보기 기능을 추가해 보겠습니다.

from django.shortcuts import render

# Create your views here.
def index(request):
    return render(request, "index.html")

또한 bag/views.py에 뷰를 추가합니다.

from django.urls import path

from bag.views import index

urlpatterns = [
    path('', index, name='index'),
]

이제 다음 명령을 사용하여 서버를 실행할 준비가 되었습니다.

$ py manage.py runserver
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
November 25, 2021 - 18:57:25
Django version 3.2.9, using settings 'GroceryBag.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

선호하는 브라우저에서 URL을 열면 다음 출력이 표시됩니다.

이것은 우리가 모든 것이 올바르게 작동한다는 것을 의미합니다. 마찬가지로 bag/urls.py를 index.html의 다른 템플릿 파일로 대체하여 다른 웹 페이지를 테스트할 수 있습니다.

결론

이 블로그에서는 템플릿 상속과 정적 파일을 제공하는 방법에 대해 배웠습니다. 이제 템플릿을 수정했습니다. 다음 블로그에서는 사용자를 웹 앱에 인증하는 방법을 살펴보겠습니다. 계속 지켜봐 주세요!

지금까지 코드: https://github.com/ashutoshkrris/Grocery-Bag/tree/blog2

Reference

이 문제에 관하여(Django를 사용한 식료품 가방(2부) - 템플릿 및 정적 파일 수정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ashutoshkrris/grocery-bag-using-django-part-2-fixing-templates-and-static-files-22h9

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Ionic Framework를 사용한 모바일 앱 개발

ionic + AngularJS의 모바일 웹 개발 환경을 구축했습니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다