Наши разработки | Плагины для DLE
html
<!-- Контейнер для оглавления -->
<div id="tcse4toc-container"></div>
html
<div class="tcse4toc-article">
{full-story}
</div>
html
{include file="custom/fullstory/tcse4toc.tpl"}
<div class="tcse4toc-article"><div id="tcse4toc-container"></div>html
<h2>Как выбрать хостинг</h2>
<p>Текст про выбор...</p>
<h3>Критерий 1: Скорость</h3>
<p>Текст про скорость...</p>
<h3>Критерий 2: Цена</h3>
<p>Текст про цену...</p>
<h4>Акции и скидки</h4>
<p>Текст про акции...</p>
<h2>Как перенести сайт</h2>
<p>Текст про перенос...</p>
| Тип сайта | Зачем им оглавление |
| Блоги, статьи, новости | Читатели могут быстро перейти к интересующей части |
| Интернет-магазины | В описаниях товаров — к характеристикам, доставке, отзывам |
| Документация, мануалы | Пошаговые инструкции без оглавления — мучение |
| Образовательные порталы | Студенты ищут конкретные темы |
| Корпоративные сайты | Длинные страницы «О компании» с историей и миссией |
<style>
/* TCSE4TOC Plugin Styles */
[tcse4toc-version] {
/* Версионный маркер */
}
/* Основной блок оглавления */
.tcse4toc-block {
margin-bottom: 25px;
border: 1px solid #e9ecef;
border-radius: 8px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 2px 8px rgba(0,0,0,0.03);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Заголовок оглавления (dt) */
.tcse4toc-header {
padding: 14px 18px;
background: linear-gradient(to bottom, #f8f9fa, #f1f3f5);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
font-size: 1.1rem;
color: #212529;
border-bottom: 2px solid transparent;
transition: all 0.25s ease;
user-select: none;
margin: 0; /* Сброс для dl */
}
.tcse4toc-header:hover {
background: linear-gradient(to bottom, #e9ecef, #dee2e6);
border-bottom-color: #0d6efd;
}
/* Заголовок в развернутом состоянии */
.tcse4toc-header[aria-expanded="true"] {
border-bottom-color: #0d6efd;
background: linear-gradient(to bottom, #e9ecef, #dee2e6);
}
/* Иконка сворачивания/разворачивания */
.tcse4toc-icon {
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
background: rgba(0,0,0,0.05);
border-radius: 50%;
font-size: 14px;
color: #495057;
transition: all 0.3s ease;
}
.tcse4toc-header:hover .tcse4toc-icon {
background: rgba(0,0,0,0.1);
color: #0d6efd;
}
/* Контент оглавления (dd) */
.tcse4toc-content {
padding: 16px 20px;
background: #ffffff;
transition: all 0.3s ease;
}
/* Скрытое состояние */
.tcse4toc-content[aria-hidden="true"] {
display: none;
}
/* Список оглавления */
.tcse4toc-list {
margin: 0;
padding-left: 0;
list-style: none;
counter-reset: toc-h2;
}
/* Элементы списка */
.tcse4toc-item {
margin-bottom: 6px;
line-height: 1.5;
}
/* Ссылки оглавления */
.tcse4toc-link {
display: inline-block;
padding: 6px 10px 6px 24px;
color: #495057;
text-decoration: none;
border-left: 3px solid transparent;
transition: all 0.2s ease;
position: relative;
font-size: 0.95rem;
}
.tcse4toc-link:hover {
color: #0d6efd;
border-left-color: #0d6efd;
background: rgba(13,110,253,0.03);
transform: translateX(3px);
}
/* Уровень H2 */
.tcse4toc-item-h2 {
font-weight: 500;
counter-increment: toc-h2;
counter-reset: toc-h3;
}
.tcse4toc-item-h2 .tcse4toc-link {
padding-left: 28px;
font-weight: 600;
color: #212529;
border-left-width: 4px;
}
.tcse4toc-item-h2 .tcse4toc-link::before {
content: counter(toc-h2) ".";
position: absolute;
left: 6px;
color: #0d6efd;
font-weight: 600;
font-size: 0.9rem;
opacity: 0.7;
}
/* Уровень H3 */
.tcse4toc-item-h3 {
margin-left: 20px;
counter-increment: toc-h3;
counter-reset: toc-h4;
position: relative;
}
.tcse4toc-item-h3 .tcse4toc-link {
padding-left: 40px;
font-size: 0.9rem;
}
.tcse4toc-item-h3 .tcse4toc-link::before {
content: counter(toc-h2) "." counter(toc-h3);
position: absolute;
left: 6px;
color: #6c757d;
font-size: 0.85rem;
opacity: 0.7;
}
/* Уровень H4 */
.tcse4toc-item-h4 {
margin-left: 40px;
counter-increment: toc-h4;
}
.tcse4toc-item-h4 .tcse4toc-link {
padding-left: 52px;
font-size: 0.85rem;
color: #6c757d;
}
.tcse4toc-item-h4 .tcse4toc-link::before {
content: counter(toc-h2) "." counter(toc-h3) "." counter(toc-h4);
position: absolute;
left: 6px;
color: #adb5bd;
font-size: 0.8rem;
opacity: 0.6;
}
/* Активный пункт при скролле (можно добавить через JS позже) */
.tcse4toc-link.active {
color: #0d6efd;
border-left-color: #0d6efd;
background: rgba(13,110,253,0.08);
font-weight: 500;
}
/* Минималистичная тема (опционально) */
.tcse4toc-block.minimal {
border: none;
box-shadow: none;
background: transparent;
}
.tcse4toc-block.minimal .tcse4toc-header {
background: transparent;
padding: 10px 0;
border-bottom: 2px solid #e9ecef;
}
.tcse4toc-block.minimal .tcse4toc-content {
padding: 15px 0;
}
/* Темная тема (опционально) */
@media (prefers-color-scheme: dark) {
.tcse4toc-block {
background: #2d2d2d;
border-color: #404040;
}
.tcse4toc-header {
background: linear-gradient(to bottom, #333, #2a2a2a);
color: #e0e0e0;
}
.tcse4toc-content {
background: #2d2d2d;
}
.tcse4toc-link {
color: #b0b0b0;
}
.tcse4toc-item-h2 .tcse4toc-link {
color: #e0e0e0;
}
}
/* Адаптивность */
@media (max-width: 768px) {
.tcse4toc-block {
border-radius: 6px;
}
.tcse4toc-header {
padding: 12px 15px;
font-size: 1rem;
}
.tcse4toc-content {
padding: 12px 15px;
}
.tcse4toc-item-h3 {
margin-left: 15px;
}
.tcse4toc-item-h4 {
margin-left: 30px;
}
.tcse4toc-link {
padding: 5px 8px 5px 20px;
font-size: 0.9rem;
}
}
/* Печать */
@media print {
.tcse4toc-block {
border: 1px solid #000;
break-inside: avoid;
}
.tcse4toc-header {
background: none;
border-bottom: 1px solid #000;
}
.tcse4toc-icon {
display: none;
}
.tcse4toc-content {
display: block !important;
}
}
</style>
Привет, коллеги-владельцы сайтов на DLE! Давайте начистоту: стандартная система комментариев — это часто боль, а не...
ПодробнееSEO как игра на фортепиано, один неправильный аккорд может расстроить весь концерт. Про «серую» оптимизацию: Чем бы...
ПодробнееПриветствую, уважаемый владелец контента! Сидите вы, значит, такой довольный: настроили RSS-ленту на своём сайте,...
ПодробнееИли: Пошаговое руководство для тех, кто прочитал первую статью, кивнул головой, сказал «да, email — это суверенитет», —...
ПодробнееИли: Почему Webasyst — это круто, если вы столяр, а DLE — если вы просто хотите жить 🪑 Пролог: История про мебельный...
ПодробнееКак то на Яндекс Кью попросили ответить на вопрос про автоматическое SEO продвижение — стоит ли его использовать и...
Подробнее
💬 Комментарии
В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.
🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.
💡 Хотите обсудить материал?
Присоединяйтесь к нашему Telegram-каналу:
https://t.me/tcsecms/Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями