在Django+React中学习编程基础（14）：Django教程（投票应用程序第6部分）
[上一篇] 用Django+React学习编程基础(13): Django教程(投票应用程序5-4)
首先
这是Django官方教程第6部分。
上一次，我们总结了Django自动测试。
这一次，我们将自定义应用程序结构。
[Django应用程序创建（第6部分）：投票应用]
这次的内容
-
- Djangoの静的(static)ファイル
-
- アプリ構造のカスタマイズ
- 背景画像を追加
Django的静态(static)文件
静的(static)ファイルとは
Webページのレンダリングに必要なファイル
HTML
画像
JavaScript
CSS
複数アプリからなる大きなプロジェクトの場合
各アプリが持っている静的ファイルの集まりを複数扱うのは煩雑な作業
解決法: django.contrib.staticfiles
静的ファイルを各アプリから(アプリ以外の場所からでもOK)、一つの場所に集め、運用環境で公開しやすくする
自定义应用程序结构的步骤
li a {
color: green;
}
-
- 作成したスタイルシートへのリンクをHTMLの上部に追加
{% static %}テンプレートタグは、静的ファイルの完全URLを生成
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}">
- VS Codeからサーバーを起動(すでに起動済みの場合は再起動)
C:\kanban\pollsite>..\venv\.venv\Scripts\activate
(venv) C:\kanban\pollsite>python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...
System check identified no issues (0 silenced).
June 10, 2022 - 07:43:53
Django version 4.0.5, using settings 'pollsite.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
静态文件的名称空间
-
- Djangoは最初に見つけた静的ファイルの中から名前が一致するものを選ぶ
複数アプリが存在する場合、Djangoに正しいものを指し示す必要あり
解決法: 名前空間を使用
静的ファイルをアプリ自身の名前を付けたディレクトリの中に置く
pollsサブディレクトリを作って配置する
静的ファイルを直接polls/staticに置かない
添加背景图片
-
- 画像を配置するサブディレクトリを作成
polls/static/polls/ディレクトリの中に、imagesサブディレクトリを作成
imagesディレクトリに、background.pngという名前の画像を配置
画像のパスは、polls/static/polls/images/background.png
- スタイルシートで背景画像を指定
body {
background: white url("images/background.png") no-repeat;
}
-
- ブラウザで、http://localhost:8000/polls/をリロード(F5)
背景画像が読み込まれ、画面に表示される
注意事项
-
- 静的ファイルのリンクは、常に相対パスを使う
こうすることで、staticテンプレートタグがURL生成で使用するSTATIC_URLを自由に変更できる
Djangoから生成されていない静的ファイルでは、テンプレートタグ{% static %}を使えない
例えば、スタイルシート(上記style.cssコードでも使用できず)
最后
我对渲染网页的静态文件进行了定制。
下次还将继续。敬请期待。
