django載入css文件和圖片
這兩天被django折磨的快崩潰了。要做一個網頁，結果CSS 和圖片總是載入不出來。官方文檔中教了一部分，上網看樂各種教程都不行，研究了好幾個小時，東拼西湊各個地方學一點，終於弄出來了，趕緊記錄下來。
django用的靜態文件路徑：STATICFILES_DIRS部署的方式，文件路徑一定要設置好。
註： python2.7 django1.10.6； 項目mysite，項目下有一個應用myapp
一、目錄結構：
整個目錄結構是這樣的：
| mysite
| —— manage.py
| —— mysite
| —— | —— settings
| —— | ——…（urls等）
| —— templates
| —— myapp
| —— …(views等)
| —— | —— templates
| —— | —— | —— myapp
| —— | —— | —— | —— home.html
| —— | —— | —— | —— static
| —— | —— | —— | —— | —— css
| —— | —— | —— | —— | —— images
注意，文件夾結構比較複雜。
在項目文件夾下有一個templates文件夾，不過這個文件夾暫時沒什麼用，可以不用管（我也不知道為什麼要有這麼個文件夾）。
應用文件夾結構是這樣的：
「myapp/templates/myapp/home.html」；
「myapp/templates/myapp/static/images」；
「myapp/templates/myapp/static/CSS」；
二、設置templates和靜態路徑
- 在settings.py中設置templates路徑
TEMPLATES = [
{
"BACKEND": "django.template.backends.django.DjangoTemplates",
"DIRS": [os.path.join(BASE_DIR, "myapp/templates").replace("\", "/"),
os.path.join(BASE_DIR, "templates").replace("\", "/")],
}
]
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 在settings.py文件的最後加上以下內容：
STATIC_ROOT = os.path.join(BASE_DIR, "myapp/templates/myapp/static").replace("\", "/")
STATICFILES_DIRS = (
("css", os.path.join(STATIC_ROOT, "css").replace("\", "/")),
("images", os.path.join(STATIC_ROOT, "images").replace("\", "/")),
)
- 1
- 2
- 3
- 4
- 5
三、修改urls.py文件
在urls.py開頭加上一句：
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
- 1
在urls.py的最後加上以下內容：
#設置靜態文件路徑
urlpatterns += staticfiles_urlpatterns()
- 1
- 2
四、修改html文件
home.html文件相關內容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<link href="/static/css/style.css" rel="stylesheet" type="text/css" />
<title>Home</title>
</head>
<body>
<a href="https://www.baidu.com/>
<img src="/static/images/logo.png" alt="logo"/>
</a>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
改成自己的圖片名稱，注意圖片和link的前綴：/static/images/ 別寫成 static/images/ ，這樣會無法顯示。
感覺自己底子真的太差，這幾天一點一點看官方文檔感到非常吃力，很多地方都不懂，想直接看自己需要的部分又不知道該看哪。
※一步步拆解 LeakCanary
※CSS3旋轉跳躍的立方體
TAG:程序員小新人學習 |