Djangoを使用している食料雑貨袋(パート2)－固定テンプレートと静的ファイル

31139 ワード

導入

にlast part , 我々は、我々をセットアップしましたGroceryBag プロジェクトこの部分では、テンプレート内のテンプレートと静的ファイルURLを修正します.問題は、テンプレートを見ると、コードはすべてのファイルに似ています.テンプレートの継承を使用してこの問題を解決できます.継承とは、別のものから得るものを意味します.つまり、子(継承されている子)は、親からプロパティ(継承されているもの)を取得します.私たちは様々なファイルで何度も何度も同じHTMLコードを書くのを避けるためにテンプレート継承を使用します.
次の修正プログラムは、静的ファイルをこれらのテンプレートとリンクしている方法です.まずはこの問題を修正しましょう.

静的ファイルのURLの修正
これまでは、静的ファイル( css , image , javascript )をテンプレートでリンクしています:

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

しかし、あなたが正しく彼らのそれぞれのディレクトリにテンプレートファイルと静的ファイルを置くならば、これは作動しません.あなたが覚えているならば、前のブログでSTATIC_URL and STATICFILES_DIR 我々の中でGroceryBag/settings.py このように

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    BASE_DIR / "static",
]

これらの設定を適切に行うと、この構文を使用して、テンプレートに動的に静的ファイルを提供する準備ができています.

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

あなたはこれらの詳細についてはofficial documentation ジャンゴの.

テンプレートの継承
私たちが知っているように、私たちは様々なファイルで何度も何度も同じHTMLコードを書くのを避けるためにテンプレート継承を使用します.仮定すると、すべてのWebページで一般的ないくつかのことがあります.私たちができることは、コードを書く代わりに、何度も何度も、私たちはbase.html ファイルをこのファイルを他の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>

この基本テンプレートを継承し、子テンプレートを作成できますindex.html このように

{% extends "base.html" %}

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

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

テンプレートの修正
テンプレート継承を学びましたので、ベースを作成できます.テンプレートディレクトリの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ファイルをどのようにウェブページにリンクしているかに注目してください.また、3つのブロックを作成しましたtitle , custom_head and content . title 各ページからタイトルを供給するために使用されます.custom_head 他のWebページで必要な静的ファイルを追加するために使用され、content 体を供給するために使用されます.
さて、他のウェブページを修正しましょう.

インデックス.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 %}

追加.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 %}

signinHTML

{% 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 %}

サインアップ.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 %}

サーバーの実行
サーバーを実行する前に、bag/views.py このように

from django.shortcuts import render

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

また、bag/urls.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を開くと、この出力が表示されます.

これは、すべてが正しく動作していることを意味します.同様に、置換することができますindex.html 他のテンプレートファイルをbag/views.py 他のWebページをテストします.

結論
このブログでは、テンプレート継承と静的ファイルの提供方法について学びました.我々は現在、テンプレートを修正しました.次のブログでは、どのように我々はWebアプリにユーザーを認証することができます表示されます.ステイ!
今までコード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

[白俊]2869号カタツムリが上に行きたい

「CSS」ディスプレー属性inline、block、in-blockについて