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

+22
2.84K
Иллюстрация

Создает автоматическое оглавление на основании 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
Def Def 6 лет назад #
классно! НО! если на странице нет ни одного тега такого, то просто пустое поле со словом Содержание.

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

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

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

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


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


добавлен год


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


страница со статьей - содержание не появилось
0
Jestik Jestik 6 лет назад #
Попробуйте этот код:
Код 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 6 лет назад #
Спасибо! теперь все заработало.
0
cmotp10 cmotp10 5 лет назад #
спасибо за решение. Подскажите. в 2.11 версии слетает блок и выводится над пунктами меню большим блоком.
+1
Jestik Jestik 2 года назад #

У кого проблемы на новых версиях, то можно использовать код (найден в сети, функцию свою выполняет):

  1. <style type="text/css" media="all">
  2. #toc {
  3. padding-left: 20px;
  4. padding-bottom: 20px;
  5. }
  6.  
  7. #toc li{font-size:1.1em}
  8. #toc li{padding-bottom: 10px;}
  9.  
  10. </style>
  11.  
  12. <script>
  13. /*Лучше делать отложенную загрузку, поисковики, не будут воспринимать навигацию как переспам - повторные вхождения заголовков.*/
  14. $(document).ready(function(){
  15. /*Делаем плавную прокрутку при клике на якорную ссылку:*/
  16. $("body").on('click', '[href*="#"]', function(e){
  17. /*body > nav.menu - указываем на фиксированный блок меню.*/
  18. var fixed_offset = $("body > nav.menu").outerHeight(true);
  19. /*fixed_offset = 100; - так можно указать фиксированную высоту напрямую*/
  20. $('html,body').stop().animate({ scrollTop: $(this.hash).offset().top - fixed_offset }, 1000);
  21. e.preventDefault();
  22. });
  23. /*Делаем плавную прокрутку при клике на якорную ссылку:*/
  24. $(function() {
  25. var curlvl;
  26. /*startlvl = 2; - для Blogger*/
  27. var startlvl = 0;
  28. var prevlvl = startlvl;
  29. /*toc - наш контейнер*/
  30. var lst = $("#toc");
  31. /*решил вынести заголовок Содержания сюда - и управлять проще и индексироваться не будет.*/
  32. var tmp2 = $("<h3>Зміст</h3>");
  33. lst.append(tmp2);
  34. /*текущий полный URL - актуально если у вас не работают якорные ссылки из-за тега base, задающий относительность урлов.*/
  35. var href1 = window.location.href;
  36. /*вырезаем якоря в URL - так решил проблему зацикливания на якорях. пример зацикливания: site.ru/ ... /page#title1#title2 ...*/
  37. var href2 = href1.replace(window.location.hash, "");
  38. if(typeof lst !== "undefined") {
  39. /*.text_read h1, .text_read h2, .text_read h3, .text_read h4 - указываете свой путь к заголовкам.*/
  40. $(".likaryam_item h1, .likaryam_item h2, .likaryam_item h3, .likaryam_item h4").each(function(i) {
  41. var current = $(this);
  42. current.attr("id", "title" + i);
  43. for(curlvl = parseInt(current.prop("tagName").substring(1)); curlvl > prevlvl; prevlvl++) {
  44. var tmp = $("<ul></ul>");
  45. if(prevlvl == startlvl)
  46. lst.append(tmp);
  47. else {
  48. var last_li = $("#toc li").last();
  49. last_li.append(tmp);
  50. }
  51. if (curlvl > prevlvl + 1)
  52. tmp.append("<li style=\"list-style-type: none\"></li>");
  53. lst = tmp;
  54. }
  55. while(curlvl < prevlvl) {
  56. lst = lst.parent().parent();
  57. prevlvl--;
  58. }
  59. /*убираем двоеточие в конце заголовка для ссылки в оглавлении:*/
  60. curder=current.html();
  61. if (curder.charAt(curder.length - 1) == ':') {
  62. curder = curder.substr(0, curder.length - 1);
  63. }
  64.  
  65. /*href2 - исправляет проблему с тегом base и зацикливанием якорей; itemprop='url' - элемент микроразметки; curder - анкор без двоеточия в конце подстроки:*/
  66. lst.append("<li><a id='link" + i + "' itemprop='url' href='" + href2 + "#title" + i + "' title='" + current.html() + "'>" + curder + "</a></li>");
  67. });
  68. }
  69. });
  70. });
  71. </script>
  72.  
  73. <!--Контейнер который выводи содержание статьи -->
  74. <div id="toc" itemscope itemtype='https://www.schema.org/SiteNavigationElement'></div>
  75.  
  76. <!--Контейнер самой статьи -->
  77. <div itemprop="articleBody" class="text_read">
  78.  
  79. </div>

Еще от автора

Вставка Adsense в тело статьи
Вставляем рекламный код от Adsense после N-го абзаца с помощью стандартных средств системы
Стиль для списка контента
Стиль основан на этих стилях, а именно на стиле №2. Cтудия Sitestroi дала добро для изменения и выкладывания для общего пользования.
Виджет именинники
Обновлено! Виджет выводит сегодняшних именинников. Есть функция скрытия виджета, если именинников нет.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.