Разработка сайтов на таких порталах как Liferay в наше время является делом пожалуй таким же простым как использование конструкторов сайтов и даже может быть еще более легким и быстрым нежели использование популярных цмсок на PHP. При этом у вас сохраняется как контроль за всеми своими данными со свободой размещать их где угодно и не зависеть от провайдера услуг, так и возможность делать доработку любой сложности с использованием качественных библиотек не слишком разбиваясь об самостийные особенности “легких” технологий.
Простота работы с веб-материалами формируется такими факторами как:
развитая система публикации и лейаута как в конструкторах
возможность создавать темы оформления практически без кода
В справедливости первого пункта вы можете легко убедится скачав дистрибутив портала с sf.net:
https://sourceforge.net/projects/lportal/files/Liferay%20Portal/
Затем распаковав его и запустив startup.bat (или .sh) из подкаталога
tomcat-x.y.z/bin
Для запуска кроме установленной джавы ничего устанавливать больше не потребуется.
Во время первого старта портал уточнит некоторые настройки, даст создать администратора и попросит перезапустить портал, для остановки используется скрипт shutdown.bat.
После входа администратором сверху появится панель с двумя выезжающими боковыми, которая позволят вам создавать сайты и материалы при желании абсолютно без написания кода.
Можно просто навставлять туда верстку и получить почти готовый лендос за час.
Делается это с помощью портлетов "Отображение сетевого контента", а с помощью "Публикатора" можно организовать страницы с агрегированным материалом. В новых версиях развивают инструменты ещё более напоминающие конструктор или офисный редактор. Но мы сегодня поговорим не о работе с материалами, а о создании тем для этого портала, т.к. с этим в ходе развития происходили изменения с которыми я столкнулся на досуге и хочу поделиться заодно закрыв возможные лакуны по документированности.
Суть изменений в том что если раньше создание тем раньше управлялось системами сборки на джава, такими как ant и gradle, то теперь это джаваскриптовый gulp. Положительный момент тут наверное в том, что теперь фронтенд специалистам можно использовать только знакомый им и при том достаточно гибкий инструмент не силльно залазя в миры бекенд разработки. Проекты тем создаются из шаблонов генератора yeoman, которые устанавливаются командой
npm install -g yeoman generator-liferay-theme
Созданные из этого шаблона темы будут работать только на лайфрее новее версии 7.1.
Если у вас какой-то более старый лайфрей можно попробовать ставить более старые версии сдк тем
npm install -g generator-liferay-theme@8.x.x
или даже 7.x.x
Отмечу, что именно эта история с версиями инструментов побудила меня написать данную статью, после нескольких часов разбирательств с гуглением и обращениям к туториалам с официального сайта портала. Имея наработанный опыт создания тем для Liferay, я сначала пытался воспользоваться генератором gradle проекта из воркспейса, который еще года 3 назад работал и подходил, но сейчас его темы не устанавливаются в 7.3+. Затем по гайдам с сайта я ставил легаси версию и получал несовместимость с актуальной версией дистрибутива портала. И так далее. Но продолжим.
Теперь мы запускаем визарда
yo liferay-theme
Нас будут спрашивать следующие параметры:
имя проекта темы - лучше выбрать что-нибудь типа {имя_проекта}-theme
версию портала - мы берем последнюю
тип развертывания - выберем локальный сервер
путь до вашего локального лайфрея - тут мы укажем подкаталог tomcat-x.y.z из которого запускали портал.
поддержку FontAwesome наверное стоит оставить включенной.
После генерации файлов проекта надо сделать установку пакетов.
npm install
Импортировать проект темы в среду разработки можно как обычный фронтенд проект.
Для среды разработки IntelliJ IDEA можно установить плагин для работы с liferay проектами и добавить конфигурацию запуска указав путь до портала.
В консоли собирать можно таском build.
gulp build
после сборки в каталоге dist/ окажется .war файл который можно скопировать в подкаталог deploy/ портала для развертывания.
Также можно использовать таск deploy, который все то же самое проделает.
После первого развертывания надо зайти в управления “Публичными страницами” в настройках сайта и поменять там тему на вашу.
Темы могут применяться по группам страниц (публичные/интранет) и даже для отдельных, также их можно наследовать от родительского портала.
Если заглянуть в каталог build/, там можно увидеть содержимое war’ки до упаковки. Для нас особенно интересен подкаталог templates/ т.к. он содержит основные шаблоны портала, которые вы можете скопировать в такой же каталог из src/ и внося изменения переопределить их относительно родительской темы.
portal_normal.ftl - это главный шаблон для страниц
navigation.ftl - основного меню
portlet.ftl - приложения портлета
init_custom.ftl - шаблон системных подключений, в файле init.ftl можно увидеть какие переменные инициализируются в контекст шаблона
Изменяя их вы сможете добиться необходимого вам вида. Т.к. в них не так уж много ��ода программных языков, заверстать статиску или даже переделать шаблон от другой цмски выходит вцелом не так уж трудозатратно.
Конечно это сложно будет сделать без своих стилей, которые можно подключить импортом в файле.
src/css/_custom.scss
А также картинок и скриптов разложенных по соответствующим каталогам.
При этом если вам потребуется знать хардкод значение адреса ресурса на севере он фомируется примерно вот так:
/o/{имя_проекта_темы}/{подкаталог_из_src}/{имя_файла}.{расширение}
т.е. например вот такие урлы на локалхосте:
http://localhost:8080/o/my-theme/images/heder.jpg
Вобщем-то этих знаний наверное достаточно чтобы начать погружение, ах да, при активной разработке может потребоваться отключение всевозможных кешей, для этого в каталоге портала надо создать файл portal-ext.properties и в него добавить такие строчки.
theme.css.fast.load=false
theme.images.fast.load=false
javascript.fast.load=false
layout.template.cache.enabled=false
browser.launcher.url=
combo.check.timestamp=true
freemarker.engine.cache.storage=soft:1
freemarker.engine.modification.check.interval=0
openoffice.cache.enabled=false
velocity.engine.resource.manager.cache.enabled=false
com.liferay.portal.servlet.filters.cache.CacheFilter=false
com.liferay.portal.servlet.filters.themepreview.ThemePreviewFilter=true
com.liferay.filters.strip.StripFilter=false
com.liferay.portal.servlet.filters.header.HeaderFilter=false
javascript.single.page.application.enabled=falseВ этом же конфиге прописывается внешняя СУБД для продакшина и миллион других параметров кастомизации и интеграции портала.
В качестве приложения покажу еще как мне удалось встроиться в жизненнцый цикл сборки проекта. Мне понадобилось просто копировать неприлинкованную к остальному коду библиотеку из node_modules, которые в результирующий .war файл не включается. Транспиляций которые ее бы сбандлили я приделывать не стал и основной код исходно почти пустого gulpfile.js получился примерно вот таким:
var gulp = require('gulp');
var liferayThemeTasks = require('liferay-theme-tasks');
var copy = require('gulp-copy');
gulp.task('copy-key-toggler', function() {
return gulp.src('./node_modules/key-toggler/src/key-toggler.js')
.pipe(gulp.dest('./build/js/'));
});
liferayThemeTasks.registerTasks({ gulp,});
gulp.task('build:war', gulp.series('copy-key-toggler', 'build:war'));О том как разрабатывать приложения для таких порталов как Liferay можно прочитать из других моих статей, например вот этой:
