將 CSS 檔案新增到專案中
專案 - My Tennis Club
如果您已完成整個 Django 教程的所有步驟，您的電腦上將有一個名為 my_tennis_club 的專案，其中包含 5 名會員
我們想向此專案新增一個樣式表，並將其放入 mystaticfiles 資料夾中
my_tennis_club
manage.py
my_tennis_club/
members/
mystaticfiles/
mystyles.css
CSS 檔名由您選擇，在本例中我們稱之為 mystyles.css。
開啟 CSS 檔案並插入以下內容
my_tennis_club/mystaticfiles/mystyles.css:
body {
background-color: violet;
}
修改主模板
現在您有了一個 CSS 檔案，下一步是將此檔案包含在主模板中
開啟主模板檔案並新增以下內容
my_tennis_club/members/templates/master.html:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="{% static 'mystyles.css' %}">
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>檢查設定
確保您的 settings.py 檔案包含一個 STATICFILES_DIRS 列表，其中引用了根目錄中的 mystaticfiles 資料夾，並且您已指定一個 STATICFILES_ROOT 資料夾
my_tennis_club/my_tennis_club/settings.py:
.
.
STATIC_ROOT = BASE_DIR / 'productionfiles'
STATIC_URL = 'static/'
#Add this in your settings.py file:
STATICFILES_DIRS = [
BASE_DIR / 'mystaticfiles'
]
.
.收集靜態檔案
每次更改靜態檔案時，都必須執行 collectstatic 命令才能使更改生效
py manage.py collectstatic
如果您之前在專案中執行過此命令，Django 會向您提出一個問題
您已請求將靜態檔案收集到目標
位置，如您的設定中所指定
C:\Users\Your Name\myworld\my_tennis_club\productionfiles
這將覆蓋現有檔案！
您確定要繼續嗎？
輸入 'yes' 繼續，或輸入 'no' 取消
輸入 'yes'。這將更新靜態檔案中所做的任何更改，並得到以下結果
1 個靜態檔案已複製到 'C:\Users\Your Name\minverden\my_tennis_club\productionfiles'，132 個未修改。
現在，如果您執行該專案
py manage.py runserver
它看起來會像這樣
如果您已在自己的計算機上完成所有步驟，您可以在瀏覽器中看到結果
在瀏覽器視窗中，在位址列中鍵入 127.0.0.1:8000/members/。
給樣式增添色彩！
在上面的示例中，我們向您展示瞭如何將樣式表包含到您的專案中。
我們最終得到了一個紫色的網頁，但 CSS 的作用不僅僅是改變背景顏色。
我們要對樣式做更多操作，並得到類似這樣的結果
首先，用以下內容替換 mystyles.css 檔案中的內容
my_tennis_club/mystaticfiles/mystyles.css:
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');
body {
margin:0;
font: 600 18px 'Source Sans Pro', sans-serif;
letter-spacing: 0.64px;
color: #585d74;
}
.topnav {
background-color:#375BDC;
color:#ffffff;
padding:10px;
}
.topnav a:link, .topnav a:visited {
text-decoration: none;
color: #ffffff;
}
.topnav a:hover, .topnav a:active {
text-decoration: underline;
}
.mycard {
background-color: #f1f1f1;
background-image: linear-gradient(to bottom, #375BDC, #4D70EF);
background-size: 100% 120px;
background-repeat: no-repeat;
margin: 40px auto;
width: 350px;
border-radius: 5px;
box-shadow: 0 5px 7px -1px rgba(51, 51, 51, 0.23);
padding: 20px;
}
.mycard h1 {
text-align: center;
color:#ffffff;
margin:20px 0 60px 0;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
background-color: #ffffff;
background-image: linear-gradient(to right, #375BDC, #4D70EF);
background-size: 50px 60px;
background-repeat: no-repeat;
cursor: pointer;
transition: transform .25s;
border-radius: 5px;
box-shadow: 0 5px 7px -1px rgba(51, 51, 51, 0.23);
padding: 15px;
padding-left: 70px;
margin-top: 5px;
}
li:hover {
transform: scale(1.1);
}
a:link, a:visited {
color: #375BDC;
}
.main, .main h1 {
text-align:center;
color:#375BDC;
}修改模板
您還需要對模板進行一些更改
Master
我們希望所有頁面都有相同的頂部導航，因此我們將頂部導航插入到 master.html 中
my_tennis_club/members/templates/master.html:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{% static 'mystyles.css' %}">
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<div class="topnav">
<a href="/">HOME</a> |
<a href="/members">MEMBERS</a>
</div>
{% block content %}
{% endblock %}
</body>
</html>Members
在 all_members.html 中，我們想對 HTML 程式碼進行一些更改。
成員被放入了一個 div 元素中，連結變成了帶有 onclick 屬性的列表項。
我們還想刪除導航，因為它現在是主模板的一部分。
my_tennis_club/members/templates/all_members.html:
{% extends "master.html" %}
{% block title %}
My Tennis Club - List of all members
{% endblock %}
{% block content %}
<div class="mycard">
<h1>Members</h1>
<ul>
{% for x in mymembers %}
<li onclick="window.location = 'details/{{ x.id }}'">{{ x.firstname }} {{ x.lastname }}</li>
{% endfor %}
</ul>
</div>
{% endblock %}詳情
在 details.html 中，我們將成員詳細資訊放入一個 div 元素中，並刪除返回成員的連結，因為那現在是主模板中導航的一部分。
my_tennis_club/members/templates/details.html:
{% extends "master.html" %}
{% block title %}
Details about {{ mymember.firstname }} {{ mymember.lastname }}
{% endblock %}
{% block content %}
<div class="mycard">
<h1>{{ mymember.firstname }} {{ mymember.lastname }}</h1>
<p>Phone {{ mymember.phone }}</p>
<p>Member since: {{ mymember.joined_date }}</p>
</div>
{% endblock %} 主選單
在 main.html 模板中，我們將一些 HTML 程式碼放入一個 div 元素中
my_tennis_club/members/templates/main.html:
{% extends "master.html" %}
{% block title %}
My Tennis Club
{% endblock %}
{% block content %}
<div class="main">
<h1>My Tennis Club</h1>
<h3>Members</h3>
<p>Check out all our <a href="members/">members</a></p>
</div>
{% endblock %}
收集靜態檔案
由於我們對靜態 mystyles.css 檔案進行了一些更改，因此我們必須執行 collectstatic 命令才能使更改生效
py manage.py collectstatic
現在，如果您執行該專案
py manage.py runserver
您可以看到結果應該是什麼樣子
或者，如果您已在自己的計算機上完成所有步驟，您可以在瀏覽器中看到結果
在瀏覽器視窗中，在位址列中鍵入 127.0.0.1:8000/members/。
