На этом уроке мы создадим, а точнее напишем код для шаблона "Пост", который определяет структуру и внешний вид веб-страницы, содержащей пост.

В шаблоне «Пост» будем использовать следующие сниппеты:

  • pdoCrumbs - для вывода «хлебных крошек»: (параметры сниппета: tpl - чанк для оформления ресурса в навигационной цепочке; tplWrapper – чанк-обёртка для навигационной цепочки; tplHome – чанк, для оформления ссылки на главную страницу; outputSeparator – строка, которая выступает в качестве разделителя между элементами в навигационной цепочке; showCurrent – булевский параметр, который определяет выводить текущий ресурс в хлебных крошках или нет; showHome – булевский параметр, который определяет выводить ссылку на главную страницу в начале навигации или нет).

    Результат работы сниппета pdoCrumbs

    [[pdoCrumbs? 
      &tpl=`@INLINE <li><a href="[[+link]]">[[+menutitle]]</a></li>` 
      &tplWrapper=`@INLINE <ol class="breadcrumb">[[+output]]</ol>`
      &tplHome=`@INLINE <li><a href="/"><i class="glyphicon glyphicon-home"></i></a></li>`
      &outputSeparator=``
      &showCurrent=`0`
      &showHome=`1`
    ]]
    
  • TicketMeta – для вывода информации о текущем посте.

    Результат работы сниппета TicketMeta

    [[TicketMeta]]
    
  • pdoNeighbors – для вывода ссылок на предыдущий и следующий посты от текущего (параметры сниппета: tplPrev – чанк, содержащий ссылку на предыдущий пост; tplNext - чанк, содержащий ссылку на следующий пост; tplWrapper – чанк, который является обёрткой для вывода ссылок на "соседние" посты).

    Результат работы сниппета pdoNeighbors

    [[pdoNeighbors? 
      &tplPrev=`@INLINE <span class="link-prev"><li class="previous"><a href="[[+link]]"><span class="glyphicon glyphicon-chevron-left"></span> [[+menutitle]]</a></li></span>` 
      &tplNext=`@INLINE <span class="link-next"><li class="next"><a href="[[+link]]">[[+menutitle]] <span class="glyphicon glyphicon-chevron-right"></span></a></li></span>`
      &tplWrapper=`@INLINE <div class="neighbors"><ul class="pager">[[+prev]][[+next]]</ul></div>`
    ]]
    

    CSS код:

    .neighbors {
    margin-bottom:10px;
    }
    
  • TicketComments – для вывода комментариев и формы для комментирования поста (параметр поста: allowGuest – булевский параметр, который позволять включить возможность комментирования для неавторизованных пользователей).

    Результат работы сниппета TicketComments

    [[!TicketComments? &allowGuest=`1`]]
    

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

  1. Открываем шаблон "Пост".
  2. Вводим следующий код:

    Создание кода (html) для шаблона Пост

    <!DOCTYPE html>
    <html lang="ru">
    [[$chunk.head]]
    <body>
      <div class="container"> 
        <div class="row">
          [[$chunk.header]]
          [[$chunk.navbar]]
          <div class="main-block col-md-8">
            [[pdoCrumbs? &tpl=`@INLINE <li><a href="[[+link]]">[[+menutitle]]</a></li>` 
                         &tplWrapper=`@INLINE <ol class="breadcrumb">[[+output]]</ol>`
                         &tplHome=`@INLINE <li><a href="/"><i class="glyphicon glyphicon-home"></i></a></li>`
                         &outputSeparator=``
                         &showCurrent=`0`
                         &showHome=`1`]]
            <h1 class="h2 page-header">[[*pagetitle]]</h1>
            [[*content]]
            [[TicketMeta]]
            [[pdoNeighbors? 
              &tplPrev=`@INLINE <span class="link-prev"><li class="previous"><a href="[[+link]]"><span class="glyphicon glyphicon-chevron-left"></span> [[+menutitle]]</a></li></span>` 
              &tplNext=`@INLINE <span class="link-next"><li class="next"><a href="[[+link]]">[[+menutitle]] <span class="glyphicon glyphicon-chevron-right"></span></a></li></span>`
              &tplWrapper=`@INLINE <div class="neighbors"><ul class="pager">[[+prev]][[+next]]</ul></div>`]]
            [[!TicketComments? &allowGuest=`1`]]
          </div>
          <div class="col-md-4">
          </div>
        </div>
      </div>
      [[$chunk.footer]]
    </body>
    </html>
    
Веб-страницу, содержащую пост "Ex ea voluptate" продемонстрируем с помощью 2 скриншотов.

Верхняя часть веб-страницы, содержащей пост

Нижняя часть веб-страницы, содержащей пост