Автоматическая генерация содержания статьи

+20
2.19K
Иллюстрация

Создает автоматическое оглавление на основании H2, H3 в статье
после первого абзаца.



Нам понадобится "Виджет HTML".

Перемещаем его на страницу записи нужного типа контента в любое место (помним только что браузер читает HTML-страничку, и видит <script> — он первым делом читает и выполняет код, а только потом продолжает читать страницу дальше).

В вкладке "Дизайн" стразу выбираем "Шаблон контейнера" значение "wrapper_plain" (что бы не применялось стилей к виджету и он был невидим).

В вкладке "Опции" в "Содержимое HTML блока" помещаем код:

  1.  
  2. <style type="text/css">
  3. #category {
  4. padding: 20px;
  5. background: #F4F8FD;
  6. }
  7. .newh2 {
  8. margin: 15px;
  9. }
  10. </style>
  11. <script type="text/javascript">
  12. $(document).ready(function(){
  13. $("p:eq(0)").after('<div id="category">Содержание:
  14. </div>');
  15. $("h2, h3").each(function(i,item){
  16. var tag = $(item).get(0).localName;
  17. $(item).attr("id","wow"+i);
  18. $("#category").append('<a class="new'+tag+'" href="#wow'+i+'">'+$(this).text()+'</a></br>');
  19. $(".newh2").css("margin-left",10);
  20. $(".newh3").css("margin-left",25);
  21. });
  22. });
  23. </script>
  24.  
Где:
background: #F4F8FD; — цвет фона
$(".newh2").css("margin-left",10); — отступ слева для h2
$(".newh3").css("margin-left",25); — отступ слева для h3

Если у кого как и у меня фиксированая шапка или хочется плавный скролл, то по той же схеме добавляем:
  1.  
  2. <script type="text/javascript">
  3. $(document).ready(function(){
  4. $("#category").on("click","a", function (event) {
  5. event.preventDefault();
  6. var id = $(this).attr('href'),
  7. top = $(id).offset().top;
  8. $('body,html').animate({scrollTop: top - 60}, 1500);
  9. });
  10. });
  11. </script>
  12.  
Где:
60 — отступ сверху
1500 — время прокрутки в милисекундах
Благодарности: Loadырь, Ris, Старый балбес smile
0
Реклама Реклама #
0
Def Def 3 года назад #
классно! НО! если на странице нет ни одного тега такого, то просто пустое поле со словом Содержание.

Может вообще не выводить можно?
-1
Jestik Jestik 3 года назад #
Хм, даже не предполагал что так может быть, делал под свой проект. Посмотрю на досуге
+3
Loadырь Loadырь 3 года назад #
Jestik:
Авторство можно присвоить Loadырь
спасибо, но не надо.
0
LuckyRain LuckyRain 3 года назад #
Очень полезная штука. Спасибо.
+1
Jestik Jestik 3 года назад #
Так же есть скрипт, который меняет цвет фона в элементе при наличии пункта меню. Например, у меня "уведомления" спрятаны в выпадающий список, и когда есть уведомления то область на которую надо навести для открытия меню красная, а когда уведомлений нет то цвет остается как обычно

Код PHP:
  1. <script>
  2. $(".bell").parents(".widget_user_avatar").css("background","#b31e1e");
  3. </script>
.bell - класс ссылки при наличии которой менять цвет
.widget_user_avatar - класс элемента в котором надо менять цвет
#b31e1e - цвет
-1
Вежливый Хам Вежливый Хам 3 года назад #
Реально, очень полезный хак.
Но, как бы сделать, чтобы не показывалось если пунктов <2
?
0
TOPg TOPg 3 года назад #
Добрый день! Сделал все поинструкции, 3 раза перепроверил, но виджет ничего не выводит
в теле статьи есть только h2, h2 - нет, это не влияет?
0
TOPg TOPg 3 года назад #
h3 - нет
+2
iton iton 3 года назад #
Вроде все сделал как написано, но не работает.
+1
TOPg TOPg 3 года назад #
тоже самое
0
Jestik Jestik 3 года назад #
А теги h2 то есть в статье? Или киньте сайт в лычку
0
iton iton 3 года назад #
Да тег h2 есть на странице

В скринах что сделал, может я что то не так делаю:

в тип контента "новости" в запись добавлен виджет


выбран шаблон контейнера


добавлен год


в статью добавлен тег h2


страница со статьей - содержание не появилось
0
Jestik Jestik 3 года назад #
Попробуйте этот код:
Код PHP:
  1. <style type="text/css">
  2. #category {
  3. padding: 20px;
  4. background: #F4F8FD;
  5. }
  6. .newh2 {
  7. margin: 15px;
  8. }
  9. </style>
  10. <script type="text/javascript">
  11. $(document).ready(function(){
  12. $("p:eq(0)").after('<div id="category">Содержание:<br></div>');
  13. $("h2, h3").each(function(i,item){
  14. var tag = $(item).get(0).localName;
  15. $(item).attr("id","wow"+i);
  16. $("#category").append('<a class="new'+tag+'" href="#wow'+i+'">'+$(this).text()+'</a></br>');
  17. $(".newh2").css("margin-left",10);
  18. $(".newh3").css("margin-left",35);
  19. });
  20. });
  21. </script>
0
iton iton 3 года назад #
Спасибо! теперь все заработало.
0
cmotp10 cmotp10 2 года назад #
спасибо за решение. Подскажите. в 2.11 версии слетает блок и выводится над пунктами меню большим блоком.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.