雨の日に出かけると靴がびちょびちょに、、、ひえー(;'∀')
ということで今回はTemplateにstaticを取込みます。
※static → cssファイルや画像、javaスクリプトの事らしいです。
■Templateの修正方法
{% load static}を指定し、画像の取り込み時にも指定します。
以下のような感じです。
{% load static}
<ims src="{% static "app/xxxx.jpg" %}"alt="XXXの画像">
では実際にやってみますね。
1.アプリケーションフォルダ配下にstaticというフォルダを作成します。
2.ここに画像や、cssを入れていきます。
3.fil.htmlに画像を挿入してみます。
上手くできました。
4.CSSを作成してみます。
(1)staticフォルダにnorizo.cssを作成します。
ここでは背景とpタグに色を付ける指定をしています。
ご参考リンク
https://djangobrothers.com/tutorials/memo_app/template_extending_css/
https://jajaaan.co.jp/web-production/frontend/css-background/
https://www.profuture.co.jp/mk/column/22273
(2)fil.htmlにcssの取り込みをしています。
(3)結果を確認してみます。
上手くいきました、背景とpタグに色が付きました。
5.staticフォルダの配置換え
以前、Templateフォルダの配置換えをしてみましたが、同様にフォルダを
配置換えできます。早速やってみましょう
(1)setting.pyの修正
TEMPLATE_DIRと考え方は同じです。
BASE_DIR(ここではnorizo?project4ですね)の直下に配置する感じです。
ここはTemplateと少し違うところです。
settinng.pyの初期作成時にはこの指定はないので追加します。
STATICFILES_DIRSと、STSTIC_DIRを紐づけます。
ちょっと気を付けたいのが、STATICFILES_DIRSの方は最後に
「S」がついてます。STATICS_DIRの方は、「S」がつかないのでご用心。
(2)norizo_project4直下に移動する。
参照フォルダが変わったことを確認する為、
norizo_app4配下のstaticフォルダとは異なる
背景とpタグの色指定をしました。
(3)結果を確認してみます。
上手くいきました。
ちょっとざわざわする配色ですが、ご勘弁を(^^;)