Часть шестая. Статические данные

Коротенькая глава про статические данные

Цель: Поработать со статическими данными

Задачи:

Создать свой CSS-файл
Поработать с файлами

Статика

Займёмся статическими файлами.

В папке приложения blog создадим папку static (имя зарезервировано) и в ней создадим папку blog (аналогично templates). В эту папку добавим css-файл – main.css.

В файле напишем следующее:

body { 
    background: #fafafa;  
}

Таким образом, мы заменили цвет фона с белого на кремовый (можете «поиграть» с цветом).

Чтобы статические файлы заработали на сайте, в файле main.html пропишем в самом начале следующую строку:

{% load static %}

Теперь введём ещё один стиль CSS (вспомните Bootstrap), но путь уже будет не ссылкой, а статический относительный, т.е.:

<link rel="stylesheet" href="{% static 'blog/main.css' %}">

Чтобы стиль применился, перезапустите сервер.

Финальный код main.html:

{% load static %}
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>{{ title }}</title>
        <link rel="stylesheet" ref="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="{% static 'blog/main.css' %}">
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-5">
            <a class="navbar-brand" href="/">МИИГАиК</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-
arget="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarsExample09">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="/">Главная</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/contacts">О ВУЗе</a>
                    </li>
                </ul>
            </div>
            <div class="navbar-nav">
                <a href="tel:+74993227800" class="btn btn-outline-secondary">Позвонить</a>
            </div>
        </nav>
        <main class="container">
            <div class="row">
                <div class="col-md-8">
                    {% block main_section %}
                    {% endblock %}
                </div>

                <aside class="col-md-4">
                    <div class="p-3">
                        <h3><b>Интересные новости</b></h3>
                        <img src="http://www.miigaik.ru/upload/medialibrary/6c5/6c57c4e2a73db9f0dc225b28c8dab3f6.png" height="400">
                        <p>Международная научно-техническая онлайн конференция «Пространственные данные в условиях цифровой трансформации» станет ключевым мероприятием, приуроченным к дате основания Московского государственного университета геодезии и картографии (МИИГАиК) 25 мая 1779 года и пройдет в период с 25 по 27 мая 2020 года.</p>
                        <a href="http://www.miigaik.ru/about/" target="_blank">
                            <button class="btn btn-warning">Посмотреть</button>
                        </a>
                    </div>
                </aside>
            </div>
        </main>
    </body>
</html>

Последним штрихом, я изменил вывод статей на такой:

Чтобы это сделать, я изменил файл home.html:

{% extends 'blog/main.html' %}
{% block main_section %}
    {% for post in news %}
        <div class="alert alert-light">
            <h1>{{ post.title }}</h1>
            <p>{{ post.text }}</p>
            <span class="text-muted">Публикация: {{ post.date }}</span>
            {% if post.author == 'Валерий' %}
                <p><b>Автор:</b> <mark>Админ</mark></p>
            {% else %}
                <p><b>Автор:</b> <mark>{{ post.author }}</mark></p>
            {% endif %}
        </div>
    {% endfor %}
{% endblock main_section %}

И добавил в main.css стиль на alert-light:

.alert-light {  
    border-color: #bfbfbf;  
}

main.css стал выглядеть так:

body {  
    background: #fafafa;  
}  

.alert-light {  
    border-color: #bfbfbf;  
}

PreviousЧасть пятая. Шаблонизатор NextЧасть седьмая. Настройка панели администратора

Last updated 4 years ago