python Django学習(9)-テンプレートの継承とインポート

15157 ワード

前言
私たちはウェブページを作るとき、多くのページが重複している部分に出会うことがあります.この場合、各ページに同じコードを書き込むことができるが、これによりプログラミングの意味が失われ、重複コードが多すぎたり煩雑になったりする.この場合、テンプレートの継承とインポートが必要になる.
一.テンプレートの継承
まず、継承されたテンプレートmasterを定義します.html:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tpl1title>
    <link rel="stylesheet" href="/static/commons.css">
    <style>
        .pg-header{
      
            height: 48px;
            background-color: seashell;
            color: green;
        }
    style>


    {% block css %} {% endblock %}
head>
<body>
    <div class="pg-header">
            
    div>
    {#                  ,content        #}
    {% block content%}
    {% endblock %}
    <script src="/static/jquery-1.12.4.js">script>

    {% block js %}

    {% endblock %}
body>
html>

次のようになります.
{% block content%}
{% endblock %}

このコードはhtmlファイルが継承できることを示しています.contentは私たちが定義した名前で、継承時に使用されます.3つのページを定義して上のmasterを継承しますhtml. tpl1.html:
{#  html          #}
{#       include#}
{#        #}
{% extends 'master.html' %}
{#  content     master.html#}


{% block content %}
    <ul>
        {% for li in user_list %}
            <li>{
    { li }}li>
        {% endfor %}
    ul>

    {#   tag.html   #}
    {% for i in user_list %}
    {% include  'tag.html' %}
    {% endfor %}
{% endblock %}


{% block css %}
    <style>
        body{
      
            background-color: #eeeeee;
        }
    style>
{% endblock %}

tpl2.html:
{% extends 'master.html' %}

{% block content %}
    <h1>    :{
    { name }}h1>
{% endblock %}

tpl3.html:
{% extends 'master.html' %}

{% block content %}
    <h1>  :{
    { status }}h1>
{% endblock %}

urlsを構成してviewsを書きますpy: urls.py:
"""day21 URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/2.1/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from django.urls.conf import include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('app01/', include('app01.url')),
]

app 01のurl.py:
from django.urls import path
from django.urls.conf import include
from app01 import views

urlpatterns = [
    path('index/', views.index),
    path('tpl1/', views.tpl1),
    path('tpl2/', views.tpl2),
    path('tpl3/', views.tpl3),
]

ブラウザで異なる効果を見ることができます(ここではプレゼンテーションをしません).
注意:次の点を説明します.
1.htmlファイルは1つのテンプレートしか継承できません.2.テンプレートに次のコードを書き込んで、テンプレートを継承できることを宣言します.
	{% block content%}
    {% endblock %}

このうちcontentは私たちが定義した名前で、継承するときに使われています.3.新しいページの継承時に、まずどのhtmlファイルを継承するかを宣言します.
{% extends 'master.html' %}

ここでextendsは私たちが引き継ぐことを宣言します.html'というテンプレート4.テンプレートを継承する場合は、交換するモジュールを書き込むだけです.
{% block content %}
    <ul>
        {% for li in user_list %}
            <li>{
    { li }}li>
        {% endfor %}
    ul>
{% endblock %}

ここで、{%block content%}は、テンプレート内のcontentを置き換えることを示す部分である.5.CSSとJSの継承について、私たちはそれを単独で書いて、それから異なるページに自分の異なるCSSとJSを書くことができます.
{% block css %} {% endblock %}
{% block js %}{% endblock %}

6.tpl 1,htmlに独自のCSSを単独で書くことができます.
{% block css %}
    <style>
        body{
      
            background-color: #eeeeee;
        }
    style>
{% endblock %}

注:この位置には規定がなく、任意に書くことができます.
二.テンプレートのインポート
ページに重複する要素がたくさんある場合、ボタンがたくさんある場合や入力ボックスがたくさんある場合は、まずファイルをカスタマイズして、このファイルをインポートすることができます.たとえば、tagをカスタマイズします.htmlは、インポートするために使用されます.
<form>
    <input type="text">
    <input type="submit">
form>

そして、tpl 1.htmlにこのファイルをインポートするには:
{#   tag.html   #}
    {% for i in user_list %}
    {% include  'tag.html' %}
    {% endfor %}

注:includeはインポートに使用されます.C++のincludeを考えてみてください.html’はインポートされたファイルです.
テンプレートを継承する場合、1つのファイルは1つのテンプレートしか継承できませんが、インポート時に複数のテンプレートをインポートできます.
最後に書く
本文は個人のいくつかの学習ノートで、権利侵害があれば、直ちに私に連絡して削除してください.ありがとうございます.