Создание блока автора на Fenom

Создание блока автора (Fenom) MODX Revo

В данном уроке создадим простенький блог автора на подобии как в данном блоге.

пример блока автора

Делать такой блок будем только ради SEO — shema.org разметки и не более — по этому заморачиваться особо не буду — так сказать для галочки. Но кто захочет полноценное решение я приведу ссылки на нужные материалы!

Открываем наш файловый шаблон статьи блога (ArticleTemplate.tpl) и вставляем в него следующий вывод:

<div class="card mt-3">
    <div class="card-body">
        <div class="row" id="author">
            <div class="col-4 col-md-2">
                 <img class="rounded-circle img-fluid" src="template/img/{$_modx->resource.createdby | user : 'photo'}" alt="{$_modx->resource.createdby | user : 'fullname'}">
            </div>
            <div class="col-8 col-md-10">
                <p><a class="h5 link-dark" href="{$_modx->makeUrl(10,'','',1)}">{$_modx->resource.createdby | user : 'fullname'}</a></p>
                <p>Эксперт по микрозаймам и микрофинансовым организациям. Блогер, журналист.</p>
                <p>Мы в: 
                    {if $_modx->config.vk?}<a href="{$_modx->config.vk}" target="_blank" title="мы вконтакте"><svg class="icon icon-vk"><use xlink:href="symbol-defs.svg#icon-vk"></use></svg></a>{/if} 
                    {if $_modx->config.facebook?}<a href="{$_modx->config.facebook}" target="_blank" title="мы в фейсбуке"><svg class="icon icon-facebook2"><use xlink:href="symbol-defs.svg#icon-facebook2"></use></svg></a>{/if} 
                    {if $_modx->config.twitter?}<a href="{$_modx->config.twitter}" target="_blank" title="мы twitter"><svg class="icon icon-twitter"><use xlink:href="symbol-defs.svg#icon-vk"></use></svg></a>{/if} 
                    {if $_modx->config.instagram?}<a href="{$_modx->config.instagram}" target="_blank" title="мы в instagram"><svg class="icon icon-facebook2"><use xlink:href="symbol-defs.svg#icon-instagram"></use></svg></a>{/if} 
                </p>
            </div>
        </div>
    </div>
</div>

Внешний вид:

Блок автора

Здесь {$_modx->resource.createdby | user : 'photo'} выводит аватар пользователя из профиля, т.к. перед выводом фото добавил путь источника файлов (т.к. он автоматом не подтягивается). user : 'fullname' выводит имя пользователя создавшего ресурс. Поля редактируются в профиле.

Да вот все поля (на всякий случай).

Редактирование полей пользователя

{$_modx->makeUrl(10,'','',1)} — ссылка на главную страницу блога (вам нужно заменить 10 на свой id страницы блог).

<svg class="icon icon-vk"><use xlink:href="symbol-defs.svg#icon-vk"></use></svg> - вывод иконки из SVG спрайта.

{$_modx->config.vk} — вывод настроек из clientConfig (вам их нужно создать самостоятельно).

{if $_modx->config.vk?}...{/if} — проверка на пустоту — если не заполнено не выводим.

С остальным думаю понятно. Кому нужен мой спрайт, вот ссылка на него: скачать пакет со спрайтом.

Т.к. на сайте один автор и т.д. (даже если не один — все из под админа будет публиковаться), я не стал заморачиваться с функционалом данного блока.

А так по хорошему, в место ссылки на блог должна быть ссылка на статьи автора (особенно если он не один). И тогда нужно расширять поля пользователей — как минимум добавить поле с описанием об авторе (чтобы они сами могли их добавлять) и т.д. В общем кто хочет заморочиться вот вам материалы в помощь:

Дополнительные поля профиля юзера (не extended);

Настройка прав доступа;

Вывод ресурсов определенного пользователя Modx revo;

Ну и дальше гугл в помощь: скорее всего создание личного кабинета (можно по разному реализовать).

Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( Пока оценок нет )
Web-Revenue.ru
Добавить комментарий