Создание шаблона для Libarea

Этот сайт работает на платформе для коллективных блогов libarea. Недавно в репозитории Libarea была обновлена версия и внесено много улучшений. Посмотрел код проекта - он стал продвинутее и появились новые возможности. Но возникли проблемы с обновлением этого блога, потому что не следовал инструкции и изменил исходный код во многих местах, добиваясь нужного вида. В этот раз создам свой шаблон и опишу его создание, чтобы не забыть.

Кстати, вот исходная инструкция, как создать шаблон.

Установка Libarea

Скопировал репозиторий (v0.7+) в папку blog-faq:

git clone https://github.com/LibArea/libarea.git blog-faq

Затем из папки blog-faq выполнил composer install. При этом установились все зависимости, указанные в composer.json и связанные с ними тоже. Вручную повторить это будет очень сложно, так что тем, кто не освоил Composer прилагаю ссылку. Здесь его потребуется только установить и выполнить вышеуказанную команду.

Для хостинга сразу поменял название папки public на public_html и в файле console тоже изменил соответственно название директории. На используемом хостинге название данной папки не поддается редактированию.

Теперь нужно запустить проект локально. А так как он основан на фреймворке HLEB2 то можно произвести аналогичные этой инструкции действия (в разделе Запуск приложения несколько вариантов).

Обновление

Как я собираюсь обновлять до новых версий Libarea (выше текущей)? До этого не задумывался, но, скорее всего, просто переустановлю проект на новую версию, не трогая базу данных, затем выполню миграции в БД и перенесу настройки (а также новый шаблон). Затем протестирую и перенесу на хостинг.

Ошибки при установке и запуске

Если главная страница сайта не отображается, то тут два пути:

1. Если файл /favicon.ico не отображается, то это проблема настройки веб-сервера, он должен указывать в папку public (или как выше поменял на public_html).
2. Если пустая страница с ошибкой 500, то ответ нужно искать в логах в папке storage/logs за текущий день. Например, если запустить с неправильными настройками базы данных, то там появится строчка наподобие этой, описывающая проблему:

   [18:58:19.740100 15.05.2024 UTC+03] Web:ERROR Hleb\DatabaseException: PDOException: SQLSTATE[HY000] [1045] Access denied for user 'root'@'localhost' (using password: NO) in /home/user/blog-faq/vendor/phphleb/framework/Database/SystemDB.php:315 ...

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

Настройка конфигурации

После установки свежей версии Libarea, первым делом нужно настроить конфигурацию.

В папке config проекта множество файлов с конфигурацией, но понадобится только часть из них, так как остальные - это настройки фреймворка (ядра приложения), которые уже выставлены по-умолчанию и скорее всего не пригодятся. Вот описание настроек:

/common/database.php - в файле config/database.php (или, если есть config/database-local.php) нужно поменять значения массива 'mysql.name' на те, которые использует ваша база данных MySQL. Скорее всего это будет только название базы данных, имя пользователя и пароль. Подозреваю, что аналогично есть поддержка и MariaDB.

/common/facets.php - настройки дополнительных(специальных) страниц проекта. Обратите внимание на эти настройки, так как там еще есть настройка "Количество тем и блогов которые читает участник на боковой панели".

/common/feed.php - небольшое количество важных настроек Ленты (основной список постов), а также внешнего вида постов. Здесь установил'classic' => true, буду использовать минималистичный дизайн. Возможно, что вам интересно, что такое nsfw? Опционально можно включить возможность отмечать посты и в профиле на наличие нецензурного контента. Похожим образом это присутствует и в Reddit.

/common/general.php - основные настройки Libarea, поэтому остановлюсь на них подробнее.

    'template'  => 'default', // Шаблон используемый по-умолчанию
    'templates' => [ // Список доступных шаблонов
        'default'   => 'Default',
        'qa'        => 'Q&A',
        'minimum'   => 'Minimum',
    ],

Если сократить список шаблонов 'templates' до одного, то на сайте будет один этот шаблон и пользователи не смогут выбирать другие в настройках. Также, чтобы создать собственный шаблон - дал ему название 'qa-main' и он будет отображаться один. Для этого надо еще скопировать папку resources/views/qa, но об этом позже.

    'template'  => 'qa-main', // Новый шаблон.
    'templates' => [ // В выборе будет только этот шаблон.
        'qa-main'  => 'Q&A-main',
    ],

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

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

       'lang'  => 'ru',
    'languages'     => [
        'ru'        => 'Русский',
    //  'en'        => 'English',
    //  'de'        => 'Deutsch',
    // ...
    ],

Еще изменил настройку 'qa_site_format' => true но это лишнее, так как собираюсь скрыть посты и в принципе формат их не так важен. Если установить эту настройку посты превратятся в дизайн вопросы-ответы.

/config/integration.php - настройки различных сервисов. Почтовый сервер, спам, капча, телеграм... вот это надо попробовать,

/config/meta.php - этот раздел обязателен к изменениям, здесь устанавливаются названия страниц и прочее SEO сайта, а также изображения и баннеры.

/config/notification.php - здесь, так понимаю планируется перевод в таблицу БД, но пока список для оформления уведомлений, насколько понял, его трогать не буду.

/config/publication.php - настройки комментариев. Как всегда, надеюсь, что изначально все выставлено удобно и менять не буду.

/config/stop-blog.php - стоп-лист из забронированных названий блогов, эти названия использовать нельзя пользователям при создании блога.

/config/stop-email.php - перечень спамерских доменов, которые пишут "письма счастья", можно дополнять.

config/trust-levels.php - настройки для использования сайта. Это лимиты добавления контента, дозволенное время на редактирование и тд. В общем, если вы хотите тонко настроить этот блоговый движок под себя то этот раздел для вас.

config/editor/buttons.php - настройки кнопок визуального редактора. Вот эти самые:

config/user/profile.php - настройки боковой панели, там где в профиле пользователя отображены ссылки на его страницы других сайтов. Отображением блоков можно управлять так-же закомментировав блок с настройкой.

config/user/setting.php - это настройки похожие на предыдущие, но более конкретные. Здесь можно определить, какие поля в настройках профиля (Контакты) будут отображены.

Шаблоны

Папки с шаблонами располагаются по пути resources/views в отдельных одноимённых с настройками директориях, по умолчанию там default, minimum и qa. Так как в настройках был указан новый шаблон qa-main, то теперь нужно скопировать папку qa в qa-main. В директории с шаблонами находится еще один файл error.php - в нём верстка страницы ошибок, которую можно оформить под общий дизайн сайта (но обычно такие ассоциации нежелательны).

Шаблоны в Libarea устроены таким образом, что default является родительским для minimum и qa. 'Родительским' здесь означает, что файлы из других шаблонов переопределяют файлы в default, если они присутствуют в шаблонах, если нет, то используются из default. Так как я скопировал файлы из qa, то это значит, что изменения шаблона qa теперь никак не отразятся на моем новом шаблоне qa-main, он связан только с default. При полноценном создании нового шаблона нужно создать папку этого шаблона и переносить в нее соответствующие файлы из default, но только те, в которые собираетесь вносить изменения, так вы минимизируете расхождение файлов при обновлении на следующую версию Libarea.

Вот сравнение папок qa (qa-main) и default:

В этих файлах находятся разбитые на блоки 'запчасти' вашего сайта. Создав свой шаблон вы можете поделиться им с другими участниками сообщества, но учитывая, что это php-файлы, они должны проходить проверку перед запуском на сервере или локально на ПК.

_block - чтобы переопределить файлы из этой папки в своем шаблоне нужно перенести их в последний. Повторюсь, только те, что собираетесь изменить. Например, мне нужно скрыть ссылку в меню на посты (так как шаблон qa-main будет ориентирован не на дискуссии). Файл буду искать в папке resources/views/default/_block/navigation/config.

Вот в этом блоке меню собираюсь удалить раздел Посты:

Для этого перенес из папки default в новый шаблон файл resources/views/qa-main/_block/navigation/config/home-nav.php - он отвечает за отображение этого меню. В нем закомментировал часть массива с id соответствующему main.posts:

      //        [
//            'id' => 'main.posts',
//            'url' => url('main.posts'),
//            'title' => 'app.posts',
//        ],

В итоге этот раздел из меню пропал. Ведь мне нужно оставить только Вопросы и этот раздел введет посетителей в заблуждение. Блоги здесь тоже лишние, на них есть ссылка в верхнем меню и ещё Темы тоже.

При этом обнаружил, что проще перенести всю папку _block в шаблон qa-main, потом внести правки и затем удалить файлы, которых эти правки не коснулись, это избавит от переноса файлов по-отдельности.

Теперь отредактирую верхнее меню убрав некоторые пункты.

Блок этот нашёл в файле resources/views/qa-main/global/base-header.php, его не надо копировать, это часть шаблона. В нём будет достаточно убрать из вёрстки те пункты, которые мне не нужны. В итоге оставил только Поиск.

Как видно, можно не только удалять, но и добавлять пункты, а также назначать им другие названия (если сайт мультиязычный то необходимо исправить также перевод в файлах /app/Languages/).

Остались не нужные на этом сайте(для конкретного сайта) разделы в подвале, ещё называемом "футер". Файл называется resources/views/qa-main/global/base-footer.php и здесь тоже нужно поменять вёрстку, похоже, что вся верстка подвала находится здесь, так что имейте ввиду. Здесь просто удалил столбец с уже ранее убранными из меню ссылками.

По желанию, нужно заполнить согласно тематике и правилам сайта разделы Информация и Конфиденциальность. Потом придумаю, что туда написать, они редактируются, если зайти на эти страницы с правами администратора. По крайней мере, когда делал этот блог, вроде так и было.

Теперь займемся css. Стили resources/views/qa-main/css/custom.css по всей видимости для этого и предназначены. После изменения стилей необходимо каждый раз заходить в админку под администратором и там в разделе Инструменты нажимать на кнопку Собрать для "Собрать JS / CSS".

Мне не нравится отступ в верхнем меню, он получился слишком маленький при том что в меню остался только один пункт поиск. Добавлю для него отступ (также добавил цвет фона, так как отступ не так нагляден):

header {
  padding-top: 5px;
  background-color: #b5e1cf!important;
}

После пересборки стилей (см. выше) на некоторое время впал в ступор, так как стили должны были применится, но не применились. Оказалось, что стиль билдился как main-qa.css и нужно залезть в файл resources/views/qa-main/meta.php, найти там подключение /assets/css/qa.css и исправить на /assets/css/qa-main.css. После этого заработало.

На мой взгляд, по оформлению верстки в Libarea можно было задать логическим блокам дополнительные классы, например lbr-header-top-menu, lbr-header-main-menu и тд, так пользовательские стили можно было не привязывать к нюансам верстки, например очередности, а просто к этим классам.

Также было бы удобно вывести куда-то в настройках включение/отключение модулей блоги/Q&A/сайты, чтобы не настраивать их комбинацию вручную. Здесь привел пример как скрыть посты.

Итог

Можно потратить один вечер на установку проекта, настройку под себя и можно им пользоваться. Эта инструкция мне будет нужна когда буду переводить этот блог на новую версию.