将 CSS 文件添加到项目中
项目 - 我的网球俱乐部
如果您已按照整个 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.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>成员
在 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/。
