前のページの views.py で呼び出している comments/index.html などの HTML ファイルを作成するが，それらの HTML ファイルで共通する部分をまとめてテンプレート化しておくと後の開発作業や運用開始後の保守作業が非常に楽になります．したがって，HTML ファイルの共通部分を取り出したテンプレート base.html を作成します．
具体的には，comments フォルダに templates フォルダを作成し，その中に base.html を設置します．ここでは，Bootstrap によるレスポンシブ Web デザインを利用することにします．次のように Bootstrap のテンプレートをコピーして若干手を加えることにします．なお，2022年7月時点での最新バージョンは5.2です．
comments/templates/base.html{% load static %}<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}{% endblock %}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<div class="container">
{% block content %}
{% endblock content %}
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
上の 1 行目 {% load static %} は静的ファイル（CSSファイル）を読み込むために必要な命令で，5 行目で CSS ファイルを読み込みます．この CSS ファイルは後ほど設置します．上の 2 行目でページの言語を日本語に指定しています．上の 7 行目で <title>{% block title %}{% endblock %}</title> のように記述することで，ページごとに異なったタイトルを指定することができるようになります．12 行目と 13 行目の間にページのコンテンツが差し込まれるようになります．ただしコンテンツ全体が <div class="container"> ... </div> で囲まれるように 11 行目と 14 行目にタグを配置しています．
次のページではこの base.html テンプレートを活用しながら，comments アプリケーションの HTML ファイルを作成します．