python Django学習(9)-テンプレートの継承とインポート
前言
私たちはウェブページを作るとき、多くのページが重複している部分に出会うことがあります.この場合、各ページに同じコードを書き込むことができるが、これによりプログラミングの意味が失われ、重複コードが多すぎたり煩雑になったりする.この場合、テンプレートの継承とインポートが必要になる.
一.テンプレートの継承
まず、継承されたテンプレートmasterを定義します.html:
次のようになります.
このコードはhtmlファイルが継承できることを示しています.contentは私たちが定義した名前で、継承時に使用されます.3つのページを定義して上のmasterを継承しますhtml. tpl1.html:
tpl2.html:
tpl3.html:
urlsを構成してviewsを書きますpy: urls.py:
app 01のurl.py:
ブラウザで異なる効果を見ることができます(ここではプレゼンテーションをしません).
注意:次の点を説明します.
1.htmlファイルは1つのテンプレートしか継承できません.2.テンプレートに次のコードを書き込んで、テンプレートを継承できることを宣言します.
このうちcontentは私たちが定義した名前で、継承するときに使われています.3.新しいページの継承時に、まずどのhtmlファイルを継承するかを宣言します.
ここでextendsは私たちが引き継ぐことを宣言します.html'というテンプレート4.テンプレートを継承する場合は、交換するモジュールを書き込むだけです.
ここで、{%block content%}は、テンプレート内のcontentを置き換えることを示す部分である.5.CSSとJSの継承について、私たちはそれを単独で書いて、それから異なるページに自分の異なるCSSとJSを書くことができます.
6.tpl 1,htmlに独自のCSSを単独で書くことができます.
注:この位置には規定がなく、任意に書くことができます.
二.テンプレートのインポート
ページに重複する要素がたくさんある場合、ボタンがたくさんある場合や入力ボックスがたくさんある場合は、まずファイルをカスタマイズして、このファイルをインポートすることができます.たとえば、tagをカスタマイズします.htmlは、インポートするために使用されます.
そして、tpl 1.htmlにこのファイルをインポートするには:
注:includeはインポートに使用されます.C++のincludeを考えてみてください.html’はインポートされたファイルです.
テンプレートを継承する場合、1つのファイルは1つのテンプレートしか継承できませんが、インポート時に複数のテンプレートをインポートできます.
最後に書く
本文は個人のいくつかの学習ノートで、権利侵害があれば、直ちに私に連絡して削除してください.ありがとうございます.
私たちはウェブページを作るとき、多くのページが重複している部分に出会うことがあります.この場合、各ページに同じコードを書き込むことができるが、これによりプログラミングの意味が失われ、重複コードが多すぎたり煩雑になったりする.この場合、テンプレートの継承とインポートが必要になる.
一.テンプレートの継承
まず、継承されたテンプレート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つのテンプレートしか継承できませんが、インポート時に複数のテンプレートをインポートできます.
最後に書く
本文は個人のいくつかの学習ノートで、権利侵害があれば、直ちに私に連絡して削除してください.ありがとうございます.