0
0

Django基本10~Template にStaticを取込んでみた。

Last updated at Posted at 2023-10-15

雨の日に出かけると靴がびちょびちょに、、、ひえー(;'∀')
ということで今回はTemplateにstaticを取込みます。
※static → cssファイルや画像、javaスクリプトの事らしいです。

■Templateの修正方法
   {% load static}を指定し、画像の取り込み時にも指定します。
   以下のような感じです。
    {% load static}
    <ims src="{% static "app/xxxx.jpg" %}"alt="XXXの画像">

では実際にやってみますね。
1.アプリケーションフォルダ配下にstaticというフォルダを作成します。
2.ここに画像や、cssを入れていきます。
無題.jpg
3.fil.htmlに画像を挿入してみます。
無題.jpg
無題.jpg
上手くできました。
4.CSSを作成してみます。
(1)staticフォルダにnorizo.cssを作成します。
  ここでは背景とpタグに色を付ける指定をしています。
無題.jpg

ご参考リンク
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の取り込みをしています。
無題.jpg
(3)結果を確認してみます。
上手くいきました、背景とpタグに色が付きました。
無題.jpg
5.staticフォルダの配置換え
  以前、Templateフォルダの配置換えをしてみましたが、同様にフォルダを
  配置換えできます。早速やってみましょう
(1)setting.pyの修正
TEMPLATE_DIRと考え方は同じです。
BASE_DIR(ここではnorizo?project4ですね)の直下に配置する感じです。
無題.jpg
ここはTemplateと少し違うところです。
settinng.pyの初期作成時にはこの指定はないので追加します。
STATICFILES_DIRSと、STSTIC_DIRを紐づけます。
ちょっと気を付けたいのが、STATICFILES_DIRSの方は最後に
「S」がついてます。STATICS_DIRの方は、「S」がつかないのでご用心。
無題.jpg

(2)norizo_project4直下に移動する。
参照フォルダが変わったことを確認する為、
norizo_app4配下のstaticフォルダとは異なる
背景とpタグの色指定をしました。
無題.jpg
(3)結果を確認してみます。
上手くいきました。
ちょっとざわざわする配色ですが、ご勘弁を(^^;)
無題.jpg

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0