Разработка сайтов на таких порталах как 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 можно прочитать из других моих статей, например вот этой:

Разработка веб-приложений на встраиваемом портале

Разработка тем для портала Liferay 7