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

Александр здравствуйте. Прочитал предыдущее по поводу аккордеона и формирования в 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>
Поможете разобраться?


   Вопросы 0    95 0

Комментарии (5)

  1. Александр Мальцев # 0
    Будет следующим образом:
    [[!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 # 0
      Большое спасибо, все работает.
      А не подскажите моменты еще по этому меню?
      Вот у Вас стоит кеширования у снипета. Можете пролить свет все-таки окончательно. Стоит ли везде кешировать все и вся или же стоит отказаться (ну кроме меню) от кеширования? Просто сколько я тестировал и прочее, сайт работает куда быстрее, если сниппеты (за исключением которые, скажем так, динамические) не кешируются.
      И второй момент с показательным классом для этого меню.
      Вот знаете, добавил [[+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. Александр Мальцев # 0
        По возможности конечно лучше использовать кэшированный вызов сниппета. В этом случае, если результат его работы есть в кэше (/core/cache/...), он использует именного его и страница клиенту отдаётся быстрее. А если результата его работы в кэше нет, то он выполняется. В зависимости от логики работы сниппета, он может посылать запросы в базу данных, обрабатывать их, формировать из них ответ. А также выполнять многое другое. Это зависит от того, что это за сниппет и что он делает. На это тратится значительное время (зависит от сниппета), и, следовательно, страница отдаётся пользователю дольше. Т.е. кэшированный сниппет тратит значительное время, и создаёт нагрузку на сервер только в первый раз. Затем он берёт результаты из кэша, и страница генерируется быстрее. Не кэшированный вариант сниппета — всё это делает постоянно.

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

          На рисунке видно, в элемент <.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. Александр Мальцев # 0
            На текущий момент семантическое создание структуры документа не приносит никакой практической пользы в поисковом продвижении сайта. Но если только делать задел на будущее. Так как даже в самом стандарте написано, что нет никаких нативных реализаций данного алгоритма в графических браузерах и других пользовательских агентах. Он только реализован в различном софте, который служит для проверки этой структуры. Поэтому эту часть стандарта 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.

    Вы должны авторизоваться, чтобы оставлять комментарии.