本棚アプリケーションの作成【4-8base.htmlファイルの作成】
同じレイアウトを使いまわす。
定形のhtmlを別のファイルとして作成しておき、その中身を別のhtmlファイル内でそのたびに呼び出していきます。
さっそくベースのhtmlを作成していきます。
なおbase.htmlのような、どのアプリでも使いまわすことができるファイルは、プロジェクト直下のディレクトリ(manage.pyファイルが入っているディレクトリの中)に作成するのが一般です。
以下のコマンドでtemplatesフォルダーを作成し、そのフォルダーの中にbase.htmlファイルを作成します。
(venv) $ mkdir templates
(venv) $ touch templates/base.html
そして作成したbase.htmlファイルにコードを書き込んでいきます。
bookproject/templates/base.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/
bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldv
KuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldv
KuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>{% block title %}{% endblock title %}| 本棚アプリ</title>
</head>
<body>
{% bloack content %}{% endblock content %}
</body>
</html>
これがベースになります。
次にbook_list.htmlファイルを編集します。
bookproject/book/templates/book/book_list.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/
bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldv
KuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldv
KuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>本棚アプリ</title>
</head>
<body>
{% for item in object_list %}
<div class="card">
<h5 class="card-header">{{ item.title }}</h5>
<div class="card-body">
<p class="card-text">{{ item.text }}</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
<h6 class="card-title">{{ item.category }}</h6>
</div>
</div>
{% endfor %}
</body>
</html>
を
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/
bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldv
KuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldv
KuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>本棚アプリ</title>
</head>
<body>
{% extends 'base.html' %}
{% block title %}書籍一覧{% endblock %}
{% bloack content %}
{% for item in object_list %}
<div class="card">
<h5 class="card-header">{{ item.title }}</h5>
<div class="card-body">
<p class="card-text">{{ item.text }}</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
<h6 class="card-title">{{ item.category }}</h6>
</div>
</div>
{% endfor %}
{% endblock content %}
</body>
</html>
に編集
次にbook_detail.htmlファイルを編集します。
bookproject/book/templates/book/book_detail.html
{{ object.category }}
{{ object.title }}
{{ object.text }}
を
{% extends 'base.html' %}
{% block title %}書籍詳細{% endblock %}
{% bloack content %}
<div class="card">
<h5 class="card-header">{{ object.title }}</h5>
<div class="card-body">
<p class="card-text">{{ object.text }}</p>
<a href="#" class="btn btn-primary">ボタン</a>
<h6 class="card-title">{{ object.category }}</h6>
</div>
</div>
{% endblock content %}
に編集。