MODX Revo - Создание блока, для отображения последних комментариев

На этом уроке мы рассмотрим создание блока для отображения последних комментариев, которые оставили посетители на сайте. Этот блок (модуль) выполним в виде чанка, которому дадим имя lastComment. Логику работы блока для отображения последних комментариев в этом чанке организуем с помощью сниппета TicketLatest.

Основные действия для создания блока, отображающего последние комментарии:

1. Написать код для вызова сниппета TicketLatest, которому необходимо указать необходимые параметры:


[[!TicketLatest? &limit=`3` 
                 &tpl=`tpl.Tickets.comment.latest.my`   
                 &action=`comments` 
                 &includeContent=`1`]]

• limit=`3` - ограничение по количеству выводимых записей;
• action=`comment` - указывает, что необходимо выбирать комментарии (comment)
• includeContent=`1` - указывает что необходимо также выбирать контент комментариев
• tpl=`tpl.Tickets.comment.latest.my` - выводить результаты (данные по каждому комментарию) в этот чанк.
2. Создать чанк tpl.Tickets.comment.latest.my, код, которого будет являться шаблоном для вывода отдельно взятого комментария. Сниппет TicketLatest передаёт данные в этот чанк с помощью плейсхолдеров (placeholders). Для нашего блока мы будем использовать следующие плейсхолдеры:


<div><span class="glyphicon glyphicon-user"></span> [[+fullname]] ([[+date_ago]]):</div>
<div class="alert alert-lastmessage">
  <div class="text-lastmessage">[[+text:ellipsis=`150`]]</div>
</div>
<div class="text-right"><a href="[[~[[+ticket.id]]]]#comment-[[+id]]" class="btn btn-default">Перейти</a></div>
<hr>

• [[+fullname]] - содержит полное имя пользователя, оставившего комментарий к посту
• [[+date_ago]] - дата оставления комментария пользователем;
• [[+text:ellipsis=`150`]] - текст комментария. Если текст комментария слишком большой, то ограничим его длину 150 символами.
• [[+ticket.id]] - id поста (тикета)
• [[+id]] - id комментария

3. Создать чанк lastComment, который будет представлять собой блок, содержащий последние комментарии.

   <div class="last-comment">
     <h4 class="page-header text-center">Последние комментарии</h4>
     <div>
       [[!TicketLatest? &limit=`3` 
                        &tpl=`tpl.Tickets.comment.latest.my`   
                        &action=`comments` 
                        &includeContent=`1`]]
     </div>
   </div>
   

   
4. Создать стили CSS для блока с комментариями

   .last-comment {
     background-color: rgba(255, 255, 255, 0.8);
     padding: 15px;
   }
   .last-comment h4 {
     margin-top:5px;
     border-bottom: 1px solid #4a452a;
   }
   .last-comment hr {
     margin-top:8px;
     margin-bottom:8px;
   }
   .alert-lastmessage {
     color: #4a452a;
     background-color: #ddd9c3;
     border-color: #948a54;
     padding: 10px;
     margin-top:5px;
     margin-bottom:5px;
   }
   .alert-lastmessage pre.prettyprint {
     border: 0px;
     display: inline;
     background-color: #ddd9c3;
   }
   .text-lastmessage {
     max-height:100px;
     overflow:hidden;
   }
   

5. Добавить блоки (чанки lastComment) в нужные страницы (шаблоны).