153 lines
9.3 KiB
Django/Jinja
153 lines
9.3 KiB
Django/Jinja
{% extends "base.jinja2" %}{% load static %}
|
||
|
||
{% block page_title %}TMP: черновик вёрстки новости | CADpoint{% endblock %}
|
||
{% block meta_title %}TMP: черновик вёрстки новости | CADpoint{% endblock %}
|
||
{% block meta_description %}Временная dev-страница для сборки и отладки сложной вёрстки новостей.{% endblock %}
|
||
{% block Description %}Временная dev-страница для подготовки сложной вёрстки новостей.{% endblock %}
|
||
{% block Keywords %}tmp, cadpoint, dev, вёрстка, новость{% endblock %}
|
||
{% block robots %}noindex,nofollow{% endblock %}
|
||
{% block canonical %}{{ request.scheme }}://{{ request.get_host }}/tmp/{% endblock %}
|
||
{% block og_url %}{{ request.scheme }}://{{ request.get_host }}/tmp/{% endblock %}
|
||
{% block og_type %}article{% endblock %}
|
||
{% block og_title %}TMP: черновик вёрстки новости | CADpoint{% endblock %}
|
||
{% block og_description %}Временная dev-страница для подготовки сложной вёрстки новостей.{% endblock %}
|
||
{% block twitter_title %}TMP: черновик вёрстки новости | CADpoint{% endblock %}
|
||
{% block twitter_description %}Временная dev-страница для подготовки сложной вёрстки новостей.{% endblock %}
|
||
{% block og_image %}{% static 'img/og-cadpoint-default.png' %}{% endblock %}
|
||
{% block twitter_image %}{% static 'img/og-cadpoint-default.png' %}{% endblock %}
|
||
|
||
{% block CONTENT %}
|
||
<div class="container bread-crumb">
|
||
<div class="row">
|
||
<nav class="col-12" aria-label="breadcrumb">
|
||
<ol class="breadcrumb">
|
||
<li class="breadcrumb-item nw s"><a href="/"><i class="bi bi-house-door" title="Главная"></i> Главная</a></li>
|
||
<li class="breadcrumb-item active s" aria-current="page">TMP: вёрстка новости</li>
|
||
</ol>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="container news">
|
||
<div class="row">
|
||
<article class="col-12 col-md-9" aria-labelledby="tmp-article-title">
|
||
<time datetime="2050-01-01">01 января 2050 <small>(Суббота) <small title="Число просмотров"><i class="bi bi-eye-fill"></i> 0000</small></small></time>
|
||
|
||
<!-- НАЧАЛО ВЕРСТКИ -->
|
||
<h1 id="tmp-article-title">Пример заголовка статьи с длинными словами, <span class="text-nowrap">HTML-тегами</span> и потенциально сложной типографикой</h1>
|
||
|
||
<p>
|
||
Никакого специального оформления для тизера нет (и не нужно). Тизер — это просто часть публикации.
|
||
</p>
|
||
|
||
<p><img alt="Пример" src="{% static 'img/og-cadpoint-default.png' %}" style="width:100%"/></p>
|
||
|
||
<h2>Подзаголовок первого смыслового блока</h2>
|
||
<p>
|
||
Здесь удобно собирать текстовый контент с разной плотностью: обычные абзацы,
|
||
<strong>выделения</strong>, <em>курсив</em>, <a href="#">ссылки</a>,
|
||
<code>inline code</code> и прочие штуки, которые потом попадут в реальную новость.
|
||
</p>
|
||
<p>
|
||
Можно вставить и более тяжёлый HTML: списки, таблицы, вложенные блоки, цитаты,
|
||
галереи, карточки и любой другой контент, который в обычной статье сложно быстро
|
||
оценить без отдельной песочницы.
|
||
</p>
|
||
|
||
<blockquote>
|
||
<p>Здесь можно проверить длинные цитаты, висячую пунктуацию и поведение типографа
|
||
на реальном HTML.</p>
|
||
</blockquote>
|
||
|
||
<h2>Карточки, списки и вспомогательные блоки</h2>
|
||
<div class="row row-cols-1 row-cols-md-2 g-3 mb-4">
|
||
<div class="col">
|
||
<div class="card h-100 shadow-sm">
|
||
<div class="card-body">
|
||
<h3 class="h5 card-title">Карточка №1</h3>
|
||
<p class="card-text mb-0">Проверка отступов, высот и поведения сетки Bootstrap.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="card h-100 shadow-sm">
|
||
<div class="card-body">
|
||
<h3 class="h5 card-title">Карточка №2</h3>
|
||
<p class="card-text mb-0">Можно подставить сюда любой сложный блок будущей новости.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Список</h2>
|
||
<ul>
|
||
<li>Пункт с обычным текстом.</li>
|
||
<li>Пункт с <strong>выделением</strong> и <a href="#">ссылкой</a>.</li>
|
||
<li>Пункт с длинным словом: сверхмногословнаятипографическаяконструкция.</li>
|
||
</ul>
|
||
|
||
<h2>Таблица</h2>
|
||
<div class="table-responsive mb-4">
|
||
<table class="table table-striped table-hover align-middle border-top border-bottom border-2">
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">№</th>
|
||
<th scope="col">Дата</th>
|
||
<th scope="col">Тема</th>
|
||
<th scope="col">Автор</th>
|
||
<th scope="col">Статус</th>
|
||
<th scope="col">Примечание</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>1</td><td>01.04.2026</td><td>Вводный блок</td><td>Ерёмин</td><td>Черновик</td><td>Проверка ширины колонки.</td></tr>
|
||
<tr><td>2</td><td>02.04.2026</td><td>Типографика</td><td>Ерёмин</td><td>Готово</td><td>Длинные слова и переносы.</td></tr>
|
||
<tr><td>3</td><td>03.04.2026</td><td>Изображения</td><td>Ерёмин</td><td>В работе</td><td>Рядом с текстом и без налезания.</td></tr>
|
||
<tr><td>4</td><td>04.04.2026</td><td>Списки</td><td>Ерёмин</td><td>Готово</td><td>Маркированные и нумерованные.</td></tr>
|
||
<tr><td>5</td><td>05.04.2026</td><td>Цитаты</td><td>Ерёмин</td><td>Черновик</td><td>Проверка отступов и акцентов.</td></tr>
|
||
<tr><td>6</td><td>06.04.2026</td><td>Ссылки</td><td>Ерёмин</td><td>Готово</td><td>Внутренние и внешние URL.</td></tr>
|
||
<tr><td>7</td><td>07.04.2026</td><td>Карточки</td><td>Ерёмин</td><td>В работе</td><td>Плитка, сетка, отступы.</td></tr>
|
||
<tr><td>8</td><td>08.04.2026</td><td>Таблица</td><td>Ерёмин</td><td>Готово</td><td>Проверка адаптивности.</td></tr>
|
||
<tr><td>9</td><td>09.04.2026</td><td>Финальный прогон</td><td>Ерёмин</td><td>На ревью</td><td>Сборка перед публикацией.</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<!-- КОНЕЦ ВЕРСТКИ -->
|
||
<hr />
|
||
<nav class="sm-tags">
|
||
<a href="#"><i class="bi bi-tag" title="тег"></i> tmp</a>  
|
||
<a href="#"><i class="bi bi-tag" title="тег"></i> news-layout</a>  
|
||
<a href="#"><i class="bi bi-tag" title="тег"></i> typography</a>  
|
||
<a href="#"><i class="bi bi-tag" title="тег"></i> html</a>
|
||
</nav>
|
||
|
||
</article>
|
||
|
||
<nav class="col order-last order-md-first" aria-label="Ближайшие новости">
|
||
<div>
|
||
<time datetime="2026-04-04">04 апреля 2026</time>
|
||
<p><i class="bi bi-newspaper"></i> <a href="#">Предыдущая новость для проверки боковой навигации</a></p>
|
||
</div>
|
||
<div class="active">
|
||
<time datetime="2026-04-05">05 апреля 2026</time>
|
||
<p><i class="bi bi-newspaper"></i> Текущая TMP-страница для вёрстки</p>
|
||
</div>
|
||
<div>
|
||
<time datetime="2026-04-06">06 апреля 2026</time>
|
||
<p><i class="bi bi-newspaper"></i> <a href="#">Следующая новость для проверки боковой навигации</a></p>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
|
||
<nav class="row" aria-label="Навигация по контенту">
|
||
<ul class="col offset-md-3 pagination px-1">
|
||
<li class="page-item disabled"><a class="page-link" href="#"><i class="bi bi-arrow-left" title="Предыдущая"></i></a></li>
|
||
</ul>
|
||
<ul class="col pagination justify-content-end px-0">
|
||
<li class="page-item disabled"><a class="page-link" href="#"><i class="bi bi-arrow-right" title="Следующая"></i></a></li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
{% endblock %}
|
||
|