sample01.htmlとsample02.html内の共通部分を別のテンプレートにひとまとめにする。
☆最初の記述
1) sample01.html
<html>
<head>
<meta charset="utf-8">
{% if title %}
<title> MossyMob Blog - {{ title }}</title>
{% else %}
<title> MossyMob Blog</title>
{% endif %}
</head>
</body>
{% for post in posts %}
<h1>{{ post.Artist }} </h1>
<p>Born in {{ post.Birthday }}</p>
<p> Title is {{post.Title}} released in {{ post.Year_Released }}
{% endfor %}
</body>
</html>
<meta charset="utf-8">
{% if title %}
<title> MossyMob Blog - {{ title }}</title>
{% else %}
<title> MossyMob Blog</title>
{% endif %}
</head>
</body>
{% for post in posts %}
<h1>{{ post.Artist }} </h1>
<p>Born in {{ post.Birthday }}</p>
<p> Title is {{post.Title}} released in {{ post.Year_Released }}
{% endfor %}
</body>
</html>
2) sample02.html
<html>
<head>
<meta charset="utf-8">
{% if title %}
<title> MossyMob - {{ title }}</title>
{% else %}
<title> MossyMob Blog</title>
{% endif %}
</head>
</body>
<p>Sample02 Page: About</p>
</body>
</html>
<head>
<meta charset="utf-8">
{% if title %}
<title> MossyMob - {{ title }}</title>
{% else %}
<title> MossyMob Blog</title>
{% endif %}
</head>
</body>
<p>Sample02 Page: About</p>
</body>
</html>
◆共通項を記述するファイルを作成
layout.html
<html>
<head>
<meta charset="utf-8">
{% if title %}
<title> MossyMob - {{ title }}</title>
{% else %}
<title> MossyMob Blog</title>
{% endif %}
</head>
</body>
{% block content %} #child templateがover wrightできるブロックを作成。
{% endblock %}
</body></html>
<head>
<meta charset="utf-8">
{% if title %}
<title> MossyMob - {{ title }}</title>
{% else %}
<title> MossyMob Blog</title>
{% endif %}
</head>
</body>
{% block content %} #child templateがover wrightできるブロックを作成。
{% endblock %}
</body></html>
☆最初の記述
1) sample01.html
{% extends "layout.html" %} #layout.htmlを適用する指定
{% block content %} #over wrightする箇所を指定
{% for post in posts %}
<h1>{{ post.Artist }} </h1>
<p>Born in {{ post.Birthday }}</p>
<p> Title is {{post.Title}} released in {{ post.Year_Released }}
{% endfor %}
{% endblock content %} #blockに名前(今回はcontentという名前)を付けて終了することも可能。
</body>
</html>
2) sample02.html
{% extends "layout.html" %} #layout.htmlを適用する指定
{% block content %} #over wrightする箇所を指定
<p>Sample02 Page: About</p>
{% endblock content %} #blockに名前(今回はcontentという名前)を付けて終了することも可能。
Outputのソースを表示すると以下のようにhtml構文が記述されている。
sample01.html
<html>
<head>
<meta charset="utf-8">
<title> MossyMob Blog</title>
</head>
<body>
<h1>Justin Bieber </h1>
<p>Born in March 1, 1994</p>
<p> Title is Sorry released in 2016
<h1>Taylor Swift </h1>
<p>Born in December 13, 1989</p>
<p> Title is We Are Never Ever Getting Back Together released in 2012
</body>
</html>
0 件のコメント:
コメントを投稿