目次
- 1.はじめに
- 2.テンプレートを貼り付ける
- 3.細かい調整を行う。
-ナビゲーションバーの文字にリンクを指定する。
-ログイン・ログアウトボタンをつける。
-ナビゲーションバーの色をカラーコードで指定する。
1.はじめに
今回実装していくナビゲーションバーとは、このようなサイト上部に表示される「ホーム」や「ログアウト」ボタンを表示している機能のことです。
Bootstrapを使うとナビゲーションバーを簡単に実装できるので、やり方を解説していきます。
Bootstrapを既に使用した事がある前提で進めていきます。
ナビゲーションバーを実装するだけで、ワンランク上のWebサイトに見えてくるので、初学者必見の機能です笑
2.テンプレートを貼り付ける。
ナビゲーションバーはwebアプリケーション内の全てのサイトの上部に表示させたいので、base.htmlに記述しましょう。
Bootstrap5の公式ドキュメントから使いたいテンプレートを選ぶことができます。
もちろん後からカスタマイズもできますので、今回は以下のテンプレートを拝借して実装を行います。
ドキュメントからテンプレートをコピーしてbase.htmlのbodyタグの中に貼り付けてください。
{% load django_bootstrap5 %}
<html>
<head>
<!-- 中略 -->
</head>
<body>
<!-- ここから追加 -->
<nav class=" navbar navbar-primary bg-primary">
<div class="container-fluid">
<a class="navbar-brand text-light" href="#">Navbar</a>
</div>
</nav>
<!-- ここまで追加 -->
<main>
<!-- 中略 -->
</main>
</body>
</html>
base.htmlの細かい設定は各自行なってください。
以上でbase.htmlファイルをloadしている全てのページでナビゲーションバーが実装できたと思います。
私の場合はこのようになりました。
3.細かい調整を行う。
これだけで終わる人はあまりいないと思うので、細かい実装をおこなっていきます。
ナビゲーションバーの文字にリンクを指定する。
普段使うWebサイトではロゴ部分を押すとサイトのホーム画面に遷移するのが一般的ではないでしょうか？
この実装は非常に簡単で、navタグの中にあるaタグのhref属性にトップページのリンクを指定するだけで完了します。
私の場合はトップページのURLは以下のように'top'とい名前で設定しているのでこちらをしていしていきます。
ご自分のurls.pyで、トップページの名前をどのように設定しているかを確認して実装してみましょう。
urlpatterns = [
path('', top, name='top'),
]
実装は、href="{% url 'トップページのname' %}"と変更するだけです。
<nav class=" navbar navbar-primary">
<div class="container-fluid">
<a class="navbar-brand text-light" href="{% url 'top' %}">Navbar</a>
</div>
</nav>
この設定方法はbootstrapに関わらず、djangoのhtml編集においては、aタグやbuttonタグなどでも同じなので覚えてきましょう。
ログイン・ログアウトボタンをつける。
※このパートはすでにログイン、ログアウトページを実装している前提で進めますので、まだ実装していない方は実装後に挑戦しましょう。
ログアウトボタンの実装は先ほど記述したnavバーの中のaタグにの下に以下の要素を加えるだけです。
<nav class=" navbar navbar-primary">
<div class="container-fluid">
<a class="navbar-brand text-light" href="{% url 'top' %}">Navbar</a>
<!-- ここから追加 -->
<ul class="navbar-nav mr-md-2">
{% if user.is_authenticated %}
<li class="nav-item"><a class="nav-link" href="{% url 'logout' %}">ログアウト</a></li>
{% else %}
<li class="nav-item"><a class="nav-link" href="{% url 'login' %}">ログイン</a></li>
{% endif %}
</ul>
<!-- ここまで追加 -->
</div>
</nav>
これでナビゲーションバーにログアウトボタンが実装されました。
今書いたコードの内容は、
「ユーザーがログインしていたら、ログアウトボタンを表示してください。それ以外の時（ログインしていない時やユーザー登録前）にはログアウトボタンを表示してください。」
という意味です。
ナビゲーションバーの色をカラーコードで指定する。
bootstrapでは以下のようなテーマカラーが用意されていますが、今回はカラーコードで自由に色を指定する方法を実践します。
BootstrapはCSSベースのフレームワークなので、CSSで色を指定する事ができます。
今回はアプリのディレクトリ直下にstaticファイルを用意し、その中にstyle.cssというCSSファイルを作成します。
今回はnavbarタグのclassに"nabvar"というクラス名を指定しているので、"navbar"に背景色を指定していきます。
.navbar {
background-color: #e68c42;
}
カラーコードと検索して、好きな色を指定していきましょう。
以上でナビゲーションバーに好きな色を指定する事ができました。
