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

18 Мая (ред)

Этот сайт работает на платформе для коллективных блогов 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/сайты, чтобы не настраивать их комбинацию вручную. Здесь привел пример как скрыть посты.

Итог

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

Для ответа вы можете авторизоваться


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.