Вывод мета информации в статье блога на Fenom

В данном уроке создадим блок с мета информацией: автор публикации, категория в которую опубликована статья, дата публикации и дата обновления поста. Данный блок делаем в первую очередь из соображений SEO, в дальнейшем он будет размечаться микро разметкой Shema.org.

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

<div class="border-bottom row g-0">
    <div class="col-md-3 col-6">
        <svg class="float-start ms-lg-4 pe-2" xmlns="http://www.w3.org/2000/svg" width="51" height="51" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
          <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
        </svg>
        Автор <br>
        <a class="link-dark" href="{$_modx->makeUrl($_modx->resource.id, '', '', 'full')}#autor"><strong>{$_modx->resource.createdby | user : 'fullname'}</strong></a>
    </div>
    <div class="col-md-3 col-6">
        <svg class="float-start pe-2" xmlns="http://www.w3.org/2000/svg" width="51" height="51" fill="currentColor" class="bi bi-folder" viewBox="0 0 16 16">
          <path d="M.54 3.87.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181l-.637 7A2 2 0 0 1 13.174 14H2.826a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31zM2.19 4a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91h10.348a1 1 0 0 0 .995-.91l.637-7A1 1 0 0 0 13.81 4H2.19zm4.69-1.707A1 1 0 0 0 6.172 2H2.5a1 1 0 0 0-1 .981l.006.139C1.72 3.042 1.95 3 2.19 3h5.396l-.707-.707z"/>
        </svg>
        <a class="link-dark" href="{$_modx->resource.parent | resource : 'uri'}">{$_modx->resource.parent | resource : 'menutitle'}</a>
    </div>
    <div class="col-md-3 col-6">
        <svg class="float-start pe-2" xmlns="http://www.w3.org/2000/svg" width="51" height="51" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
          <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
        </svg>
        Опубликовано <br><strong>{$_modx->resource.publishedon | date : "d.m.Y"}</strong>
    </div>
    <div class="col-md-3 col-6">
        <svg class="float-start pe-2" xmlns="http://www.w3.org/2000/svg" width="51" height="51" fill="currentColor" class="bi bi-calendar-check" viewBox="0 0 16 16">
          <path d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
          <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
        </svg>
        Обновлено <br><strong>{$_modx->resource.editedon | date : "d.m.Y"}</strong>
    </div>
</div>

Небольшой разбор по верстке блока — bootstrap 5, svg иконки тоже bootstrap.

Разбор по выводам:

Первая колонка — выводит якорную ссылку на блок Автора — мы его создадим позже.

Вторая колонка — выводит ссылку на родителя и его название — в моем случае я вывожу menutitle — вам скорее всего нужно указать pagetitle.

Третья колонка — дату публикации.

Четвертая — дату обновления контента.