Skip to content

Превью статьи. ui-article-preview

Данный компонент представляет собой предпросмотр статьи в любом контексте.

Пример использования

<a is="ui-article-preview"
    href="{{ article.url }}"
    hide-image="false"
    direction="row"
    title="{{ article.title }}"
    article-json="{{ article | custom_json: "author", "published_at", "comments_count" | escape}}"
>
    <img src="image.png"
        slot="image"
    />
</a>

Параметры

Данный компонент поддерживает следущие параметры

  • title - Заголовок статьи, в итоговой разметке обрамляется ссылкой на статью.
  • hide-image - флаг, что необходимо спрятать статью. (надо ли? проще на месте просто не выводить слот с изображением.)
  • href - url статьи. Необходимо указывать для нормального SEO
  • direction - ориентация раскладки полученного блока. Доступны значения row, column. По-умолчанию - column
  • article-json - json с информацией о статье. Для формирования json необходимо использовать liquid фильтр custom_json, с указанием необходимых полей. Эту ликвид конструкцию ОБЪЯЗАТЕЛЬНО оборачивать одинарными ковычками или используем фильтр escape.
  • hideAuthor - флаг принудительного скрытия автора статьи
  • hideDate- флаг принудительного скрытия даты публикации статьи
  • hideComments - флаг принудительного скрытия ссылки на комментарии
  • showMessages - подпись на кнопке комментария

Слоты

Так же поддерживаются Слоты

  • image - вывод картинки. В итоговой разметке обрамляется ссылкой, если предсталено.
  • content - вывод краткого описания статьи.

Классы компонента

В ходе работы компонента к его различным элементам присваиваются следующие классы.

  • article-preview - класс на основном узле компонента
  • article-preview__inner - класс общей обертки, выставялем отрицательные отступы для нивелирования отступов между вноутренними элементами
  • article-preview__image - картинка статьи
  • article-preview__link - ссылка на статью
  • article-preview__caption - класс обертки заголовка статьи
  • article-preview__caption-inner (WAT)
  • article-preview__heading - заголовок статьи
  • article-preview__body - обертка вокруг краткого текста
  • article-preview__introtext - краткий текст
  • article-preview__toolbar - блок с метаинформацией
  • article-preview__date - дата публикации статьи
  • article-preview__author - автор
  • article-preview__comments - блок с ссылкой на комментарии + вывод кол-ва комментариев.

Особенности и что важно помнить

Использование тега ссылки как базового для компонента в верстке

Настоятельно рекомендуем использовать для обозначения этого компонента в верстке комбинацию <a is="ui-article-preview"></a>

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