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

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

Создает автоматическое оглавление на основании 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 в тело статьи
Комментарии (6)
yury 10 марта 2018 в 09:29 0
no avatar
классно! НО! если на странице нет ни одного тега такого, то просто пустое поле со словом Содержание.

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

Код 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 0
small user social cms
Реально, очень полезный хак.
Но, как бы сделать, чтобы не показывалось если пунктов <2
?