Часть шестая. Статические данные
Коротенькая глава про статические данные
Цель: Поработать со статическими данными
Задачи:
    Создать свой CSS-файл
    Поработать с файлами

Статика

Займёмся статическими файлами.
В папке приложения blog создадим папку static (имя зарезервировано) и в ней создадим папку blog (аналогично templates). В эту папку добавим css-файл – main.css.
В файле напишем следующее:
1
body {
2
background: #fafafa;
3
}
Copied!
Таким образом, мы заменили цвет фона с белого на кремовый (можете «поиграть» с цветом).
Чтобы статические файлы заработали на сайте, в файле main.html пропишем в самом начале следующую строку:
1
{% load static %}
Copied!
Теперь введём ещё один стиль CSS (вспомните Bootstrap), но путь уже будет не ссылкой, а статический относительный, т.е.:
1
<link rel="stylesheet" href="{% static 'blog/main.css' %}">
Copied!
Чтобы стиль применился, перезапустите сервер.
Финальный код main.html:
1
{% load static %}
2
<!doctype html>
3
<html lang="en">
4
<head>
5
<meta charset="UTF-8">
6
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8
<title>{{ title }}</title>
9
<link rel="stylesheet" ref="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
10
<link rel="stylesheet" href="{% static 'blog/main.css' %}">
11
</head>
12
<body>
13
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-5">
14
<a class="navbar-brand" href="/">МИИГАиК</a>
15
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
16
arget="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
17
<span class="navbar-toggler-icon"></span>
18
</button>
19
20
<div class="collapse navbar-collapse" id="navbarsExample09">
21
<ul class="navbar-nav mr-auto">
22
<li class="nav-item active">
23
<a class="nav-link" href="/">Главная</a>
24
</li>
25
<li class="nav-item">
26
<a class="nav-link" href="/contacts">О ВУЗе</a>
27
</li>
28
</ul>
29
</div>
30
<div class="navbar-nav">
31
<a href="tel:+74993227800" class="btn btn-outline-secondary">Позвонить</a>
32
</div>
33
</nav>
34
<main class="container">
35
<div class="row">
36
<div class="col-md-8">
37
{% block main_section %}
38
{% endblock %}
39
</div>
40
41
<aside class="col-md-4">
42
<div class="p-3">
43
<h3><b>Интересные новости</b></h3>
44
<img src="http://www.miigaik.ru/upload/medialibrary/6c5/6c57c4e2a73db9f0dc225b28c8dab3f6.png" height="400">
45
<p>Международная научно-техническая онлайн конференция «Пространственные данные в условиях цифровой трансформации» станет ключевым мероприятием, приуроченным к дате основания Московского государственного университета геодезии и картографии (МИИГАиК) 25 мая 1779 года и пройдет в период с 25 по 27 мая 2020 года.</p>
46
<a href="http://www.miigaik.ru/about/" target="_blank">
47
<button class="btn btn-warning">Посмотреть</button>
48
</a>
49
</div>
50
</aside>
51
</div>
52
</main>
53
</body>
54
</html>
Copied!
Последним штрихом, я изменил вывод статей на такой:
Чтобы это сделать, я изменил файл home.html:
1
{% extends 'blog/main.html' %}
2
{% block main_section %}
3
{% for post in news %}
4
<div class="alert alert-light">
5
<h1>{{ post.title }}</h1>
6
<p>{{ post.text }}</p>
7
<span class="text-muted">Публикация: {{ post.date }}</span>
8
{% if post.author == 'Валерий' %}
9
<p><b>Автор:</b> <mark>Админ</mark></p>
10
{% else %}
11
<p><b>Автор:</b> <mark>{{ post.author }}</mark></p>
12
{% endif %}
13
</div>
14
{% endfor %}
15
{% endblock main_section %}
Copied!
И добавил в main.css стиль на alert-light:
1
.alert-light {
2
border-color: #bfbfbf;
3
}
Copied!
main.css стал выглядеть так:
1
body {
2
background: #fafafa;
3
}
4
5
.alert-light {
6
border-color: #bfbfbf;
7
}
Copied!
Last modified 10mo ago
Copy link