Django — افزودن استایل به پروژه (Add Styles to the Project)

آخرین بروزرسانی: 1404/08/20

قبلی: افزودن فایل های استاتیک سراسری (Add Global Static Files) بعدی: مقدمه (PostgreSQL Intro)

افزودن استایل به پروژه (Add Styles to the Project)

می خواهیم «استایل (Style)» به پروژه اضافه کنیم. استایل یعنی قوانین ظاهر صفحه، مثل رنگ و فونت. ابتدا یک فایل CSS می سازیم. سپس آن را در قالب اصلی وارد می کنیم. در پایان هم فایل های استاتیک را جمع آوری می کنیم.

ساخت فایل CSS در پوشه سراسری

فایل های مشترک را در پوشه سراسری می گذاریم. این پوشه در ریشه پروژه است.

my_tennis_club
  manage.py
  my_tennis_club/
  members/
  mystaticfiles/
    mystyles.css

مشاهده در ادیتور

حالا داخل فایل CSS یک رنگ پس زمینه ساده می گذاریم.

# my_tennis_club/mystaticfiles/mystyles.css
body {
  background-color: violet;
}

مشاهده در ادیتور

وارد کردن CSS در قالب اصلی

قالب «master.html» مادر همه صفحات است. پس لینک CSS را آن جا بگذار.

{% 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>

مشاهده در ادیتور

بررسی تنظیمات استاتیک

باید مسیر پوشه سراسری را به جنگو معرفی کنیم. از STATICFILES_DIRS استفاده کن.

# my_tennis_club/my_tennis_club/settings.py
STATIC_ROOT = BASE_DIR / 'productionfiles'
STATIC_URL = 'static/'
STATICFILES_DIRS = [
  BASE_DIR / 'mystaticfiles'
]

مشاهده در ادیتور

نکته: STATIC_ROOT محل نهایی جمع آوری است. STATICFILES_DIRS محل های منبع هستند.

جمع آوری فایل های استاتیک

هر تغییری در CSS دادی، دوباره «collectstatic» اجرا کن. مثل به روزرسانی کلاسور.

python manage.py collectstatic

مشاهده در ادیتور

زیباتر کردن ظاهر صفحات

می توانیم 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;
}

مشاهده در ادیتور

به روزرسانی قالب ها

ناوبری بالای صفحات را به قالب اصلی اضافه کن تا همه جا یکسان باشد.

{% 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>

مشاهده در ادیتور

فهرست اعضا را کارت دار کن و لینک ها را آیتم لیست کن.

{% 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 %}

مشاهده در ادیتور

صفحه جزئیات را هم کارت دار کن و لینک برگشت را حذف کن.

{% 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 %}

مشاهده در ادیتور

صفحه اصلی را ساده و هماهنگ کن.

{% 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 %}

مشاهده در ادیتور