Djangoのテンプレート(HTML)の分割とアセット(CSS/JS)周りの読み込み

Djangoの設定を変更して、

https://programming.manabupanda.net/django-self-html-layout-settings/

上記の記事の感じで、

独自のHTMLを使ってみて、

各ページをシンプルに作ってみることはやってみた。

その上で、

必要に応じて、

  • ファイルを分けたい
  • CSS/JSなどのアセットを追加したい

と考えて試したので、

その方法おを記載しておく。

Django / Python3のバージョン

Django

$ python3 manage.py runserver --version
3.2.6

Python3

$ python3 -V
Python 3.8.10

Djangoのテンプレート(HTML)の分割とアセット(CSS/JS)周りの読み込み

関連する公式サイトのドキュメント

参考:公式サイトのドキュメント

https://docs.djangoproject.com/ja/3.2/topics/templates/

https://docs.djangoproject.com/ja/3.2/ref/templates/language/

https://docs.djangoproject.com/ja/3.2/intro/tutorial06/

Djangoのテンプレート(HTML)の分割

HTMLファイルのフォルダ

/project/templates

分割前のファイル

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>サンプル</title>
  </head>
  <body>
    <h1>Sample</h1>
    <p>Sample</p>
  </body>
</html>

このファイルを、

例えば、headの中だけを分割する場合は、

以下のように分割できる。

<meta charset="utf-8">
<title>サンプル</title>
<!DOCTYPE html>
<html>
  <head>
    {% include "header.html" %}
  </head>
  <body>
    <h1>Sample</h1>
    <p>Sample</p>
  </body>
</html>

アセット(CSS/JS)周りの読み込み

アセット周りの読み込みは、

ファイルを用意したら、

テンプレートのHTML内でパス指定する。

その際、staticというパス設定が必要になるので、

それをうまくやると読み込めるようになった。

まずは、

以下のようにフォルダ、ファイルを用意。

/project/static/css
.sample {
  color: red;
}

フォルダの構造は、

公式サイトにも書いてある通り、

Django公式ドキュメントより一部引用

上記のようにきちんとフォルダを分割しましょうとのこと。

テンプレートのHTML側から、

このstaticを読み込むには、

以下のように設定。

<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">

ここまでの設定でうまくいくはずだが、

自分の環境だとうまくいかなかった。

そして、

https://stackoverflow.com/questions/6014663/django-static-file-not-found

の情報の中で、

StackOverFlowより一部引用

この部分を参考に調整。

具体的には、

自分の環境であれば、

以下の設定を追加するとうまく動いた。

STATICFILES_DIRS = (
  os.path.join(BASE_DIR, 'static/'),
)

スキルを使って、就職/転職/副業する時のサイト

プログラミングのスキルなどを、自分なりに高めた上で、

自分のスキルをアピールして就職や転職を行い、年収をあげるか、

副業という形で、年収にプラスアルファの稼ぎを増やすことはできます。

まずはできる範囲で取り組むことで、

少しずつ、経験値も増え、自分のスキルが収入につながるのでおすすめです。

おすすめ書籍

広告

おすすめ記事