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

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

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



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

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

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

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

Код PHP:
  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

Если у кого как и у меня фиксированая шапка или хочется плавный скролл, то по той же схеме добавляем:
Спойлер
Благодарности: Loadырь, Ris, Старый балбес smile
Вставка Adsense в тело статьи
Комментарии (14)
yury 10 марта 2018 в 09:29 0
классно! НО! если на странице нет ни одного тега такого, то просто пустое поле со словом Содержание.

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

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

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

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


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


добавлен год


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


страница со статьей - содержание не появилось
Jestik 29 августа 2018 в 19:06 0
Попробуйте этот код:
Код PHP:
  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">Содержание:<br></div>');
  14. $("h2, h3").each(function(i,item){
  15. var tag = $(item).get(0).localName;
  16. $(item).attr("id","wow"+i);
  17. $("#category").append('<a class="new'+tag+'" href="#wow'+i+'">'+$(this).text()+'</a></br>');
  18. $(".newh2").css("margin-left",10);
  19. $(".newh3").css("margin-left",35);
  20. });
  21. });
  22. </script>
  23.  
iton 29 августа 2018 в 20:21 0
Спасибо! теперь все заработало.