pdoMenu и все тот же аккордеон

anton
3,9K
19
0
Александр здравствуйте. Прочитал предыдущее по поводу аккордеона и формирования в pdoMenu. На основе этого пробовал реализовать данное меню
Итог достаточно плачевен, оно ни в какую не хочет выпадать. Кроме того не понятно как засадить несколько дочерних ресурсов при такой форме.
После множества проб, остановился на этом варианте и он естественно не правильный…
<div class="container-fluid">
<div id="MainMenu">
<div class="list-group panel">
  [[pdoMenu?
    &parents=`0`
    &level=`2`
    &tpl=`@INLINE <a class="list-group-item list-group-item" data-parent="#MainMenu" href="#[[+menutitle]]">[[+menutitle]]</a>`
    &tplInner=``
    &tplInnerRow=``
    &tplOuter=`@INLINE [[+wrapper]]`
    &tplParentRow=`@INLINE 
	<a class="list-group-item list-group-item" data-toggle="collapse" data-parent="#MainMenu" href="#[[+menutitle]]">
          [[+pagetitle]]
        </a>
    <div id="[[+menutitle]]" class="collapse">
        <a href="#[[+pagetitle]]" class="list-group-item">[[+pagetitle]]</a>
          [[+wrapper]]
    </div>`
  ]]
</div>
</div>
</div>
Поможете разобраться?

Комментарии:

  1. Павел
    25 января 2018, 12:20
    Здравствуйте. Подскажите как реализовать такое меню на pdomenu и возможно ли. Помогите пожалуйста как то начать составлять правильно :) что то я путаюсь, что куда, и где первое и второе :)

    <div class="navbar-collapse pull-right nav-main-collapse collapse">
    <nav class="nav-main">
    <ul id="topMain" class="nav nav-pills nav-main">
    								    
    <li class="active">
    <a class="dropdown-toggle" href="#">
    <span class="theme-color">ГЛАВНАЯ</span></a>
    <ul class="dropdown-menu">
    <li class="dropdown">
    <a class="dropdown" href="#">О НАС</a>
    </ul></li>
    
    <li class="dropdown mega-menu">
    <a class="dropdown-toggle" href="#">
    <span class="theme-color">НАШИ УСЛУГИ</span></a>
    
    <ul class="dropdown-menu">
    <li>
    <div class="row">
    <div class="col-md-5th">
    <ul class="list-unstyled">
    <li><span>ПОЛУСУХАЯ СТЯЖКА</span></li>
    <li><a href="portfolio-grid-1-columns.html">1 COLUMN</a></li>
    <li><a href="portfolio-grid-2-columns.html">2 COLUMNS</a></li>
    <li><a href="portfolio-grid-3-columns.html">3 COLUMNS</a></li>
    <li><a href="portfolio-grid-4-columns.html">4 COLUMNS</a></li>
    <li><a href="portfolio-grid-5-columns.html">5 COLUMNS</a></li>
    <li><a href="portfolio-grid-6-columns.html">6 COLUMNS</a></li>
    </ul></div>
    
    <div class="col-md-5th">
    <ul class="list-unstyled">
    <li><span>СУХАЯ СТЯЖКА</span></li>
    <li><a href="[[~3]]">ОПИСАНИЕ</a></li>
    <li><a href="portfolio-masonry-3-columns.html">3 COLUMNS</a></li>
    <li><a href="portfolio-masonry-4-columns.html">4 COLUMNS</a></li>
    <li><a href="portfolio-masonry-5-columns.html">5 COLUMNS</a></li>
    <li><a href="portfolio-masonry-6-columns.html">6 COLUMNS</a></li>
    </ul></div>
    
    <div class="col-md-5th">
    <ul class="list-unstyled">
    <li><span>КЛАССИЧЕСКАЯ</span></li>
    <li><a href="portfolio-single-extended.html">EXTENDED ITEM</a></li>
    <li><a href="portfolio-single-parallax.html">PARALLAX IMAGE</a></li>
    <li><a href="portfolio-single-slider.html">SLIDER GALLERY</a></li>
    <li><a href="portfolio-single-html5-video.html">HTML5 VIDEO</a></li>
    <li><a href="portfolio-single-masonry-thumbs.html">MASONRY THUMBS</a></li>
    <li><a href="portfolio-single-embed-video.html">EMBED VIDEO</a></li>
    </ul></div>
    
    <div class="col-md-5th">
    <ul class="list-unstyled">
    <li><span>НАЛИВНОЙ ПОЛ</span></li>
    <li><a href="portfolio-layout-default.html">DEFAULT</a></li>
    <li><a href="portfolio-layout-aside-left.html">LEFT SIDEBAR</a></li>
    <li><a href="portfolio-layout-aside-right.html">RIGHT SIDEBAR</a></li>
    <li><a href="portfolio-layout-aside-both.html">BOTH SIDEBAR</a></li>
    <li><a href="portfolio-layout-fullwidth.html">FULL WIDTH (100%)</a></li>
    <li><a href="portfolio-layout-tabfilter.html">TAB FILTER & PAGINATION</a></li>
    </ul></div></div>
    </li></ul></li>
    
    <li class="dropdown">
    <a class="dropdown-toggle" href="#">
    <span class="theme-color">КЛИЕНТУ</span></a>
    <ul class="dropdown-menu">
    <li class="dropdown">
    <a class="dropdown-toggle" href="#">ДОГОВОРА</a>
    <ul class="dropdown-menu">
    <li><a href="blog-default-aside-left.html">ФИЗ.ЛИЦО</a></li>
    <li><a href="blog-default-aside-right.html">ЮР.ЛИЦО</a></li>
    </ul></li>
    
    <li class="dropdown">
    <a class="dropdown" href="#">ВОПРОС \ ОТВЕТ</a>
    </li>
    <li class="dropdown">
    <a class="dropdown" href="#">ОТЗЫВЫ</a></li>
    
    <li class="dropdown">
    <a class="dropdown" href="#">ПОЛЕЗНОЕ</a></li>
    
    <li class="dropdown">
    <a class="dropdown" href="#">НОВОСТИ</a></li>
    </ul></li>
    
    <li class="dropdown">
    <a class="dropdown-toggle" href="#"><span class="theme-color">ПОРТФОЛИО</span></a>
    <ul class="dropdown-menu">
    <li class="dropdown">
    <a class="dropdown" href="#">СУХАЯ СТЯЖКА</a></li>
    
    <li class="dropdown"><a class="dropdown" href="#">ПОЛУСУХАЯ СТЯЖКА</a>
    </li></ul></li>
    
    <li class="dropdown">
    <a class="dropdown" href="#"><span class="theme-color">КОНТАКТЫ</span></a>
    </li>
    
    <li class="dropdown">
    <a class="dropdown-toggle" href="#"><span class="theme-color">ИНТЕРНЕТ МАГАЗИН</span></a>
    <ul class="dropdown-menu">
    <li class="dropdown">
    <a class="dropdown" href="#">КАТАЛОГ ТОВАРОВ</a>
    </li>
    
    <li class="dropdown"><a class="dropdown" href="#">ДОСТАВКА</a></li>
    <li class="dropdown"><a class="dropdown" href="#">КОРЗИНА</a></li>
    <li class="dropdown"><a class="dropdown" href="#">ИНФОРМАЦИЯ</a></li>
    
    </ul></li></ul></nav></div>
    1. Павел
      25 января 2018, 13:59
      Так выводит вроде как надо кроме меню (наши услуги) — dropdown mega-menu
      Подскажите куда что добавить пожалуйста.

      <div class="navbar-collapse pull-right nav-main-collapse collapse">
      <nav class="nav-main">
      [[pdoMenu?
      &level=`5`
      &parents=`mega-menu`
      &firstClass=`nav nav-pills nav-main`
      &lastClass=`0`
      &hereClass=`active`
      &parentClass=`dropdown`
      &outerClass=`nav nav-pills nav-main`
      &levelClass=``
      &tplOuter=`@INLINE <ul id="topMain" [[+classes]]>[[+wrapper]]</ul>` 
      &tplInner=`@INLINE <ul class="dropdown-menu">[[+wrapper]]</ul>`
      &tplParentRow=`@INLINE <li [[+classes]]><a class="dropdown-toggle" data-toggle="dropdown" href="[[+link]]" [[+attributes]]><span class="theme-color">[[+menutitle]]</span></a>[[+wrapper]]</li>`
      ]]
      </nav></div>
      Сейчас так:

      А надо так:
    2. Вадим
      25 июля 2017, 11:21
      Александр добрый день!
      Нужна ваша помощь, есть меню:

      [[pdoMenu?
      &lastClass=``
      &firstClass=``
      &rowClass=``
      &hereClass=``
      &level=`2`
      &parents=`2`
      &showUnpublished=`1`
      &selfClass=`current`
      &tplOuter=`@INLINE
        [[+wrapper]]
      `
      &tplParentRow=`@INLINE [[+menutitle]][[+wrapper]]`
      &tplParentRowActive=`@INLINE [[+menutitle]][[+wrapper]]`
      &tplInner=`@INLINE [[+wrapper]]`
      &tplInnerRow=`@INLINE [[+menutitle]]`
      &tplInnerHere=`@INLINE [[+menutitle]]`
      &tplHere=`@INLINE [[+menutitle]]`
      &tpl=`@INLINE [[+menutitle]]`
      ]]

      Как можно сделать чтобы у нужных родителей не показывались дочерние страницы, а только родитель и все, кликая на него пользователь должен попасть на страницу???

      СПАСИБО!!!
      1. Александр Мальцев
        25 июля 2017, 15:33
        В чанке, который используется для формирования дочерних страниц добавить условие, например, с использованием Fenom или использовать обычные фильтры вывода.
        [[+parent:in=`5,15,22`:then=``:else=`...`]]
        1. Вадим
          26 июля 2017, 00:12
          Александр с предыдущей проблемой справился, но появилась другая и последняя, помогите решить!
          Вот код меню:
          [[pdoMenu?
          &lastClass=``
          &firstClass=``
          &rowClass=``
          &hereClass=``
          &level=`3`
          &parents=`2,-80`
          &showUnpublished=`1`
          &selfClass=`current`
          &tplOuter=`@INLINE
            [[+wrapper]]
          `
          &tplParentRow=`@INLINE [[+menutitle]][[+wrapper]]`
          &tplParentRowActive=`@INLINE [[+menutitle]][[+wrapper]]`
          &tplInner=`@INLINE [[+wrapper]]`
          &tplInnerRow=`@INLINE [[+menutitle]]`
          &tplInnerHere=`@INLINE [[+menutitle]]`
          &tplHere=`@INLINE [[+menutitle]]`
          &tpl=`@INLINE [[+menutitle]]`
          ]]
          Сейчас меню прекрасно работает и все вроде хорошо вот живой пример: maniyaremonta.ru/remont-detskoj-komnatyi.html

          Но выплыл один косяк, с хлебными крошками при такой иерархии в хлебных крошках нет родителя допустим у «ремонта детской комнаты для девочки», хотя родителем должен быть «ремонт детской комнаты». Когда вкладываешь «ремонт детской комнаты для девочки» и делаешь родителем «ремонт детской комнаты», хлебные крошки отображаются правильно, а меню рушиться как исправить этот косяк? СПАСИБО!!!
          Я так понимаю нужно доработать меню, но моих мозгов не хватает, прошу вас помогите решить эту проблему если нужно могу вас пустить в админку, терпения моего уже нет!!!
          1. Александр Мальцев
            26 июля 2017, 07:25
            Насколько я понимаю у вас таких страниц нет.
            Наиболее просто это решить с помощью JavaScript.
            Например, можно добавить такой скрипт на страницы (в шаблон):
            $(function(){
              var parent = $('.gh.current').parent('.collapse');
              if (parent.length > 0) {
                var parentText = parent.prev('a').text();
                $('<li>' + parentText + '</li>').insertBefore('.breadcrumb li:last');
              }
            });
            
            1. Вадим
              26 июля 2017, 10:24
              Александр скажите а можно управлять хлебными крошками, так что бы для каждого документа они выстраивались по заранее отработанной схеме?
              1. Александр Мальцев
                26 июля 2017, 10:38
                Не знаю точно, как у вас в админке организованы ресурсы, но при таком раскладе, скорее всего, придётся писать какие-то дополнительные условия в чанках или вообще создавать свой сниппет.
                На JavaScript эта проблема решается с помощью нескольких строчек кода.
                1. Вадим
                  26 июля 2017, 10:43
                  Может посмотрите админку что посоветуете или поправите?
              2. Вадим
                26 июля 2017, 08:24
                Скажите что можно добавить в pdoMenu чтобы он правильно отображал вложенные ресурсы? или копать в сторону pdoCrumbs?
                1. Вадим
                  26 июля 2017, 08:12
                  Скрипт добавил нечего не поменялось! А что он выполняет?
                  1. Александр Мальцев
                    26 июля 2017, 10:26
                    Выполняет те действия, которые вы хотите.
                    До выполнения скрипта:
                    До выполнение скрипта
                    После выполнения скрипта:
                    После выполнение скрипта
                    У вас в js есть ошибки и если вы вставите вышеприведённый JavaScript код после них, то он не выполниться. Вам необходимо исправить ошибки в JavaScript коде, либо вставить вышеприведённый код до них.
          2. Вадим
            04 июля 2017, 23:29
            [[pdoMenu?
              &level=`2`
              &selfClass=`current`
              &parents=`0`
              &plPrefix=`wf.`
              &tplOuter=`@INLINE  <nav id="MainMenu"><div class="list-group panel">[[+wrapper]]</div></nav>`
              &tplParentRow=`@INLINE  
                <a id="tplParentRow[[+isfolder]]" href="#[[+id]]" class="list-group-item hvr-underline" data-toggle="collapse" data-parent="#MainMenu">
                <span class="fa fa-chevron-down fa-lg"></span> [[+menutitle]]</a>[[+wrapper]]`
              &tplInner=`@INLINE <div class="collapse" id="[[+id]]">[[+wrapper]]</div>`
              &tplInnerRow=`@INLINE <a href="[[+link]]" class="[[+classnames]] list-group-item"><span class="fa fa-minus fa-lg"></span> [[+menutitle]]</a>`
              &tpl=`@INLINE <a id="tpl" href="[[+link]]" class="list-group-item hvr-underline">[[+menutitle]]</a>`
            ]]
            
            <script>
            $(function(){
              $('#MainMenu .current').parent('div.collapse').addClass('in');
            });
            </script>
            
            Добрый вечер! Сделал как у вас написано но увы, сам аккордеон возвращается в исходное состояние и не остается активным, при открытии страницы вот живой пример lisovv.bget.ru/remont-odnokomnatnoj-kvartiryi-60-metrov.html помогите пожалуйста!!!
            1. Александр Мальцев
              06 июля 2017, 15:29
              Насколько понимаю, проблема уже решена…
            2. Александр Мальцев
              14 октября 2016, 12:38
              Будет следующим образом:
              [[!pdoMenu?
                &level=`2`
                &parents=`0`
                &plPrefix=`wf.`
                &tplOuter=`@INLINE  <div id="MainMenu"><div class="list-group panel">[[+wrapper]]</div></div>`
                &tplParentRow=`@INLINE  
                  <a id="tplParentRow[[+isfolder]]" href="#[[+id]]" class="list-group-item" data-toggle="collapse" data-parent="#MainMenu">
                    [[+menutitle]] <span class="caret"></span>
                  </a>[[+wrapper]]`
                &tplInner=`@INLINE <div class="collapse" id="[[+id]]">[[+wrapper]]</div>`
                &tplInnerRow=`@INLINE <a href="[[+link]]" class="list-group-item">[[+menutitle]]</a>`
                &tpl=`@INLINE <a id="tpl" href="[[+link]]" class="list-group-item">[[+menutitle]]</a>`
              ]]
              
              1. anton
                26 октября 2016, 19:37
                Большое спасибо, все работает.
                А не подскажите моменты еще по этому меню?
                Вот у Вас стоит кеширования у снипета. Можете пролить свет все-таки окончательно. Стоит ли везде кешировать все и вся или же стоит отказаться (ну кроме меню) от кеширования? Просто сколько я тестировал и прочее, сайт работает куда быстрее, если сниппеты (за исключением которые, скажем так, динамические) не кешируются.
                И второй момент с показательным классом для этого меню.
                Вот знаете, добавил [[+classnames]] в
                [[pdoMenu?
                  &level=`2`
                  &parents=`0`
                  &plPrefix=`wf.`
                  &tplOuter=`@INLINE  <nav id="MainMenu"><div class="list-group panel">[[+wrapper]]</div></nav>`
                  &tplParentRow=`@INLINE  
                    <a id="tplParentRow[[+isfolder]]" href="#[[+id]]" class="list-group-item hvr-underline" data-toggle="collapse" data-parent="#MainMenu">
                    <span class="fa fa-chevron-down fa-lg"></span> [[+menutitle]]</a>[[+wrapper]]`
                  &tplInner=`@INLINE <div class="collapse" id="[[+id]]">[[+wrapper]]</div>`
                  &tplInnerRow=`@INLINE <a href="[[+link]]" class="[[+classnames]] list-group-item"><span class="fa fa-minus fa-lg"></span> [[+menutitle]]</a>`
                  &tpl=`@INLINE <a id="tpl" href="[[+link]]" class="list-group-item hvr-underline">[[+menutitle]]</a>`
                ]]
                
                И вроде бы задумка правильная. Типа когда мы выбираем страницу из этого аккордеона, то она типа как остается активной и указывает пользователю, что находясь на этой странице он находится в этой части меню.
                Но вот сам аккордеон возвращается в исходное состояние и не остается активным…
                Т.е. при выборе пункта в этом меню, пункт остается активным, но аккордеон сворачивается. Не поможете и с этим?
                1. Александр Мальцев
                  27 октября 2016, 13:11
                  По возможности конечно лучше использовать кэшированный вызов сниппета. В этом случае, если результат его работы есть в кэше (/core/cache/...), он использует именного его и страница клиенту отдаётся быстрее. А если результата его работы в кэше нет, то он выполняется. В зависимости от логики работы сниппета, он может посылать запросы в базу данных, обрабатывать их, формировать из них ответ. А также выполнять многое другое. Это зависит от того, что это за сниппет и что он делает. На это тратится значительное время (зависит от сниппета), и, следовательно, страница отдаётся пользователю дольше. Т.е. кэшированный сниппет тратит значительное время, и создаёт нагрузку на сервер только в первый раз. Затем он берёт результаты из кэша, и страница генерируется быстрее. Не кэшированный вариант сниппета — всё это делает постоянно.

                  Чтобы это сделать, можно выполнить 2 следующих действия:
                  • Добавить в вызов сниппета pdoMenu параметр, который будет отвечать за добавления класса curent к текущему пункту меню:
                  • &selfClass=`current`
                    
                  • Вставить на страницу небольшой JavaScript сценарий, который после загрузки страницы будет разворачивать меню аккордеон с текущим пунктом:
                    <script>
                    $(function(){
                      $('#MainMenu .current').parent('div.collapse').addClass('in');
                    });
                    </script>
                    
                  1. anton
                    28 октября 2016, 11:51
                    хм… все оказалось куда проще)
                    Александр, но я начал очень издалека. Просто я подумал что поэтапно подходя к этому — будет хорошо. Ведь это главный элемент моего вопроса. Заранее прошу простить за простынь.
                    Мой вопрос касается семантической разметки сайта. В интернете полно информации, но эта информация сводится к примерам: блогам, магазинам, новостных порталов. И вопросы которые появляются сами собой ответов не находят.
                    Я начну с макета. Предполагаемый макет не: интернет магазин, блог, новости. Я делаю себе сайтик под свою мастерскую (может буду вести блог, но с блогом все понятно как устроенно).

                    На рисунке видно, в элемент <.header> вложена навигация по сайту <.nav>. По сути это основная навигация, которая позволяет пользователю совершать переходы по сайту, по основным страницам (главная, о нас, контакты и такого плана). Так же в <.header> расположен логотип, контакты и кнопки соц сетей. Так же говорится, что навигация может быть вложена в элемент header.
                    Я опущу про разметку элементов, такие как address, arcticle, section и т.п.

                    Дальше у нас идет основное содержимое сайта <.main>. Везде говорится, что в этом элементе должна находиться информация которая меняется на каждой странице. Т.е. сюда лучше класть [[*content]].
                    Но у меня, как видите, этот элемент стилями бутстрапа разбит на две колонки. Колонка 1 — имеет роль боковой части сайта, в которую разместился наш аккордеон и в этой же колонки будут находиться блоки с информацией и дополнительными блоками (такие как реклама например). Колонка 2 — собственно куда и выводится контент страницы. Так же в этой колонке на верху (на других страницах кроме главной) выведены хлебные крошки.
                    1. Правильно ли так делать с .main? Ведь колонка 1 имеет роль боковой панели, в которой информация не меняется.

                    И вот получается, что мы имеем на сайте три навигации:
                    — навигация в .header. Тут у нас основные страницы.
                    — навигация аккордеон. Тут у нас расположились категории продукций.
                    — хлебные крошки (тут понятно как делать).
                    2. Александр, скажите как лучше сделать семантику для этих элементов на сайте? Не могу же я два раза использовать .nav или могу? Т.е. на сайте получается две навигации в любом случае же.

                    У Вас на сайте приведены статьи касательно разметки nav.
                    <nav>
                      <ul>
                        <li><a href="/">Главная</a>
                        <li><a href="news.html">Новости</a>
                        <li><a href="blog.html">Блог</a>
                        <li><a href="about.html">О блоге</a>
                      </ul>
                    </nav>
                    Так же можно использовать и другие способы разметки.
                    <nav>
                      <p><a href="">...</a></p>
                      <p><a href="">...</a></p>
                    </nav>
                    
                    <nav>
                      <h2>...</h2>
                        <ul>
                          <li><a>...</a></li>
                          <li><a>...</a></li>
                          <li><a>...</a></li>
                        </ul>
                    </nav>
                    
                    С полученным аккордеоном получается что у нас будет:
                    <nav>
                      <h2>Категории</h2>
                        <ul>
                          <li><a>...</a></li>
                          <ul name="">
                             <li><a>...</a></li>
                             <li><a>...</a></li>
                          </ul>
                          <ul name="">
                             <li><a>...</a></li>
                             <li><a>...</a></li>
                          </ul>
                        </ul>
                    </nav>
                    
                    3. Правильно я понял, что так можно сделать?

                    Александр и предпоследний вопрос. С получившимся аккордеон у нас пропали главные категории. Целость навигации нарушена. Посему я подумал что правильней сделать посадочные страницы категорий в главном меню (которое расположено в .header), пусть это будут: дерево, сталь, стекло.
                    <nav>
                        <ul>
                          <li><a>Главная</a></li>
                          <li><a>О нас</a></li>
                          <ul name="Продукция">
                             <li><a>Дерево</a></li>
                             <li><a>Сталь</a></li>
                             <li><a>Стекло</a></li>
                          </ul>
                          <li><a>Контакты</a></li>
                        </ul>
                    </nav>
                    
                    а боковое меню (аккордеон) привести в вид:
                    <nav>
                      <h2>Категории</h2>
                        <ul>
                          <ul name="Дерево">
                             <li><a>Двери</a></li>
                             <li><a>...</a></li>
                          </ul>
                          <ul name="Сталь">
                             <li><a>...</a></li>
                             <li><a>...</a></li>
                          </ul>
                          <ul name="Стекло">
                             <li><a>Зеркала</a></li>
                             <li><a>...</a></li>
                          </ul>
                        </ul>
                    </nav>
                    
                    4. Скажите, правильно ли я думаю? (Конечно все так же будет зависеть от перелинковки и прочего)

                    И последний вопрос.
                    После много чего прочитанного пришел к выводу, что если верстать семантикой html5 то неплохо было бы подкреплять это дело и ARIA (естественно где нужно задавать роли) и внимательно смотреть, что бы не было тавтологии. К примеру .nav это уже role=navigation, .main это role=main и так далее.
                    Для лучшего отображения так же делаем разметку с помощью Open Graf для соц сетей и с Schema.org для поисковиков.
                    И вот тут вопрос с Schema.org. Никак не могу допереть какой критерий использовать для материала на сайте. Моя мастерская не предлагает никаких готовых изделий, не является блогом. На ней просто будет описание материала из чего можно сделать. Пусть это будет «Стекло» и можно заказать «Душевую кабину». Готовых решений нету и все полностью индивидуально. Т.е. пользователь ознакамливается с услугами, понимает из каких материалов можно сделать, использует на сайте калькулятор изделия и понимает приблизительно что к чему по сумме.
                    Далее делается замер, производится изделие и монтаж изделия.
                    И вот не понятно под какой фильтр моя информация попадает у Schema.org
                    И еще раз извините что так много текста получилось.
                    1. Александр Мальцев
                      29 октября 2016, 11:49
                      На текущий момент семантическое создание структуры документа не приносит никакой практической пользы в поисковом продвижении сайта. Но если только делать задел на будущее. Так как даже в самом стандарте написано, что нет никаких нативных реализаций данного алгоритма в графических браузерах и других пользовательских агентах. Он только реализован в различном софте, который служит для проверки этой структуры. Поэтому эту часть стандарта HTML 5 нельзя использовать для того чтобы с помощью неё передать структуру пользователю. Авторам, как и прежде, следует использовать заголовки h1-h6, чтобы передать структуру документа.
                      Предупреждение при использование структруры HTML5 на практике
                      В спецификации HTML 5 говорится, что элемент main – это контейнер, который должен содержать уникальную информацию, не повторяющуюся на других страницах. Т.е. указать, где у вас находится основное содержимое страницы. Т.е. правильно его использовать в соответствии со спецификацией HTML 5.1 только для блока 2. Но бывает многое случаев, когда этот блок используют неправильно. Например, такой авторитетный ресурс как html5doctor.com. Сделать это можно используя 2 способа. Первый – это всё содержимое 2 колонки обернуть элементом main. Т.е. создать внутри 2 колонки элемент main, а внутри него помещать содержимое content. При этом он может находиться в любой цепочки иерархии. Второй способ — заменить элемент div на main.
                      1 вариант:
                      <div class="container">
                        <div class="row">
                          <div class="col-md-4">
                            <aside>
                              ...
                            </aside>
                          </div>
                          <div class="col-md-8">
                            <main>
                              ...
                            </main>
                          </div>
                        </div>
                      </div>
                      
                      2 вариант
                      <div class="container">
                        <div class="row">
                          <aside class="col-md-4">...</aside>
                          <main class="col-md-8">...</main>
                        </div>
                      </div>
                      
                      Блок nav в соответствии со спецификацией можно использовать несколько раз на странице. Если он у Вас будет находиться в header, а header в body – то это основной блок навигации на сайте. А если в aside, то nav уже будет считаться вспомогательной навигацией, косвенно связанной со страницей. Т.к. все, что помещено в aside является уже второстепенным, но связанным с основным содержанием страницы. Это как раз то, что вам и надо. Из представленных вариантов на мой взгляд лучше сделать последний. Т.к. не хорошо внутри основного содержимого (main + aside) помещать ссылки на главную страницу сайта или разделы, если конечно ваша цель контент. Т.е. в этом блоке лучше поместить ссылки на другие страницы. Помещать в aside ссылки на главную или разделы обычно необходимо только в том случае, если ваша цель – главная страница или разделы.

                      Конечно, можно добавлять и ARIA. Но если от него практическая польза. Сколько людей его будет использовать?

                      А вот микроразметку сделать необходимо обязательно. Это позволит поисковым роботом лучше ориентироваться на сайте, что в итоге может привести к значительному увеличению трафика (что как обычно и происходит).
                      Лучше что предлагается на сайте schema.org не использовать, т.к. это не всё поддерживается системами Google и Яндекс. Необходимо выбрать из той категории, что поддерживается этими системами (Фильмы, Отзывы о книгах, Рестораны, Мероприятия, Приложения, Статьи, Местные организации, Продукты), т.к. именно они формируют сниппет, который увидит пользователь при поиске. Ваша категория – это Article.
              Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.