Loyihaga stillar qo‘shish

Loyiha — My Tennis Club

Agar butun Django darsligidagi qadamlarni bajargan bo‘lsangiz, kompyuteringizda 5 ta a’zoga ega my_tennis_club loyihasi bo‘ladi:

Biz ushbu loyihaga stil fayli (stylesheet) qo‘shib, uni mystaticfiles papkasiga joylashtirmoqchimiz:

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

CSS faylining nomini o‘zingiz tanlaysiz, biz bu loyihada uni mystyles.css deb nomlaymiz.

CSS faylni oching va unga quyidagini qo‘shing:

my_tennis_club/mystaticfiles/mystyles.css:

body {
  background-color: violet;
}

Master shablonni o‘zgartirish

Endi sizda CSS fayl bor, keyingi qadam — bu faylni master shablonga ulash:

Master shablon faylini oching va quyidagilarni qo‘shing:

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>

Sozlamalarni tekshirish

settings.py faylingizda ildiz katalogdagi mystaticfiles papkasiga havola qiluvchi STATICFILES_DIRS ro‘yxati borligiga va STATICFILES_ROOT papkasi ko‘rsatilganiga ishonch hosil qiling:

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'
]
.
.

Statik fayllarni yig‘ish

Statik faylga har safar o‘zgartirish kiritganingizda, o‘zgarishlar kuchga kirishi uchun collectstatic buyrug‘ini ishga tushirishingiz kerak:

python manage.py collectstatic

Agar bu buyruqni loyihada avval ham bajargan bo‘lsangiz, Django sizga savol beradi:

You have requested to collect static files at the destination location as specified in your settings: C:\Users\Your Name\myworld\my_tennis_club\productionfiles This will overwrite existing files! Are you sure you want to do this? Type 'yes' to continue, or 'no' to cancel:

"yes" deb yozing. Bu statik fayllarga kiritilgan barcha o‘zgarishlarni yangilaydi va quyidagi natijani beradi:

1 static file copied to 'C:\Users\Your Name\minverden\my_tennis_club\productionfiles', 129 unmodified.

Endi loyihani ishga tushirsangiz:

python manage.py runserver

U quyidagicha ko‘rinadi:

Agar barcha qadamlarni o‘z kompyuteringizda bajargan bo‘lsangiz, natijani o‘z brauzeringizda ko‘rishingiz mumkin:

Brauzer oynasidagi manzil satriga 127.0.0.1:8000/members/ deb yozing.

Dizaynga jilo beramiz!

Yuqoridagi misolda loyihangizga stil faylini qanday ulashni ko‘rsatdik.

Natijada binafsha rangli veb-sahifa hosil bo‘ldi, ammo CSS fon rangini o‘zgartirishdan ko‘ra ko‘proq narsaga qodir.

Biz stillar bilan ko‘proq ishlab, quyidagi kabi natijaga erishmoqchimiz:

Avval mystyles.css faylining mazmunini quyidagi bilan almashtiring:

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;
}

Shablonlarni o‘zgartirish

Shuningdek, shablonlarga ham ba’zi o‘zgartirishlar kiritishingiz kerak:

Asosiy shablon (master)

Barcha sahifalarda bir xil yuqori navigatsiya bo‘lishini istaymiz, shuning uchun yuqori navigatsiyani master.html fayliga joylashtiramiz:

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>

A’zolar

all_members.html faylida HTML kodga ba’zi o‘zgartirishlar kiritmoqchimiz.

A’zolar div elementiga joylashtiriladi, havolalar esa onclick atributiga ega ro‘yxat elementlariga aylanadi.

Navigatsiyani ham olib tashlamoqchimiz, chunki u endi master shablonning bir qismi.

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

Tafsilotlar

details.html faylida a’zo haqidagi ma’lumotlarni div elementiga joylashtiramiz va a’zolar ro‘yxatiga qaytish havolasini olib tashlaymiz, chunki u endi master shablondagi navigatsiyaning bir qismi.

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

Bosh sahifa

main.html shablonida HTML kodning bir qismini div elementiga joylashtiramiz:

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

Statik fayllarni yig‘ish

Statik mystyles.css fayliga o‘zgartirishlar kiritganimiz sababli, ular kuchga kirishi uchun collectstatic buyrug‘ini ishga tushirishimiz kerak:

python manage.py collectstatic

Endi loyihani ishga tushirsangiz:

python manage.py runserver

Natija qanday ko‘rinishi kerakligini ko‘rishingiz mumkin:

Yoki, agar barcha qadamlarni o‘z kompyuteringizda bajargan bo‘lsangiz, natijani o‘z brauzeringizda ko‘rishingiz mumkin:

Brauzer oynasidagi manzil satriga 127.0.0.1:8000/members/ deb yozing.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish