• Страница 1 из 1
  • 1
Форум » Ленточный вариант форума
Новые сообщения
ABC
Дата: Чт, 14.05.2020, 16:25 | Сообщение # 1
Форум: Поделки для uCoz | Тема: Автоматическая навигация по размещённой статье
Offline
Если кому нужно, CSS-стили для оформления оглавления:

Код

.keyTags {padding: 10px;}
.keyTags li {
    color: #fff;
    background-color: #e67e22;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
    
    box-sizing: border-box;
    min-width: 26px;
    margin: .1em .22em;
    padding: 5px 10px;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.56;
    font-style: normal;
    border-radius: .2rem;
}

.keyTags li:hover {
background-color: #d35400;
}

.keyTags a:link,
.keyTags a:active,
.keyTags a:visited {
   color: #fff;
   text-decoration: none;
}
.keyTags a:hover {
   color: #fff;
}


Прикрепления: 4303443.jpg(193.6 Kb)
ABC
Дата: Чт, 14.05.2020, 16:19 | Сообщение # 2
Форум: Поделки для uCoz | Тема: Автоматическая навигация по размещённой статье
Offline
Суть решения: во время написания материала (например, для модулей "Блог" или "Новости", значимые части своей статьи вы обозначаете заголовками (например, h3)
Скрипт находит все эти заголовки и формирует из них оглавление по всей статье, кликая по пунктам которого вы можете быстро перемещаться к нужной части статьи.

Рассмотрим установку скрипта на примере модуля "Новости сайта"

Установка

1. Для начала нужно создать блок, в который скрипт соберёт все заголовки h3 с вашей страницы.
Я использовал для этого ul-список с классом .keyTags:

Код

<ul class='keyTags'></ul>


Его вы размещаете куда угодно, там где вы хотите видеть содержание своей страницы. Я, например, разместил его в правом сайдбаре.

2. При написании новой статьи все значимые части статьи нужно обозначить заголовками h3.
Если статья уже написана и размещена, зайдите в редактирование и сделайте нужные заголовки.

3. Зайдите в шаблон "Новости сайта - Страница материалов и комментариев к нему", найдите

Код
$MESSAGE$


и оберните его в тег div с классом .text_items

Код
<div class="text_items">$MESSAGE$</div>


4. В самом конце кода шаблона "Новости сайта - Страница материалов и комментариев к нему" размещаем скрипт:

Код

<script>
$(document).ready(function() {
   let allAnchors = $('.text_items h3');
   let item = 1;
   allAnchors.each(function() {
   let thisAnchor = $(this).html();
   $('.keyTags').append('<li>' + item + ' .' + ' <a href="' + '#' + item + '">' + thisAnchor +
   '</a>' + '</li>');
   $(this).html('<span id =' + '"' + item + '"' + '>' + thisAnchor + '</span>');
   item++;
   });
});
</script>
  • Страница 1 из 1
  • 1
Поиск: