[Разработка веб-сайтов, Java] Разработка тем для портала Liferay 7
Автор
Сообщение
news_bot ®
Стаж: 6 лет 4 месяца
Сообщений: 27286
Разработка сайтов на таких порталах как 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=falsetheme.images.fast.load=falsejavascript.fast.load=falselayout.template.cache.enabled=falsebrowser.launcher.url=combo.check.timestamp=truefreemarker.engine.cache.storage=soft:1freemarker.engine.modification.check.interval=0openoffice.cache.enabled=falsevelocity.engine.resource.manager.cache.enabled=falsecom.liferay.portal.servlet.filters.cache.CacheFilter=falsecom.liferay.portal.servlet.filters.themepreview.ThemePreviewFilter=truecom.liferay.filters.strip.StripFilter=falsecom.liferay.portal.servlet.filters.header.HeaderFilter=falsejavascript.single.page.application.enabled=falseВ этом же конфиге прописывается внешняя СУБД для продакшина и миллион других параметров кастомизации и интеграции портала.
===========
Источник:
habr.com
===========
Похожие новости:
- [Разработка веб-сайтов, PHP, Laravel] Laravel–Дайджест (26 октября – 1 ноября 2020)
- [PHP, MySQL, CSS, JavaScript, HTML] RevolveR Contents Management Framework v.1.9.4.9
- [JavaScript, HTML, Accessibility] Решение проблемы обеспечения доступности модального окна для людей с ограниченными возможностями
- [Тестирование IT-систем, Java, Google Chrome, API] Замена UI авторизации на API для автотестов
- [Хостинг, WordPress, JavaScript] JAM-стэк — нищета на стероидах
- [Разработка веб-сайтов, CSS, HTML] Задавать Height и Width для изображений снова важно (перевод)
- [JavaScript, Программирование, Google Chrome, Управление медиа] Я никогда не писал расширения для Хрома, но меня допекли
- [Разработка веб-сайтов, PHP, Программирование, Laravel] PHP 8 — пробуем новые возможности (перевод)
- [Разработка мобильных приложений, Проектирование и рефакторинг, Разработка под Android] Это не я! История одного рефакторинга
- [Разработка веб-сайтов, JavaScript, Программирование] Примеры использования наблюдателей в JavaScript
Теги для поиска: #_razrabotka_vebsajtov (Разработка веб-сайтов), #_java, #_liferay, #_razrabotka_vebsajtov (
Разработка веб-сайтов
), #_java
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 03-Июл 04:24
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 4 месяца |
|
|
Разработка сайтов на таких порталах как 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=falsetheme.images.fast.load=falsejavascript.fast.load=falselayout.template.cache.enabled=falsebrowser.launcher.url=combo.check.timestamp=truefreemarker.engine.cache.storage=soft:1freemarker.engine.modification.check.interval=0openoffice.cache.enabled=falsevelocity.engine.resource.manager.cache.enabled=falsecom.liferay.portal.servlet.filters.cache.CacheFilter=falsecom.liferay.portal.servlet.filters.themepreview.ThemePreviewFilter=truecom.liferay.filters.strip.StripFilter=falsecom.liferay.portal.servlet.filters.header.HeaderFilter=falsejavascript.single.page.application.enabled=falseВ этом же конфиге прописывается внешняя СУБД для продакшина и миллион других параметров кастомизации и интеграции портала. =========== Источник: habr.com =========== Похожие новости:
Разработка веб-сайтов ), #_java |
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 03-Июл 04:24
Часовой пояс: UTC + 5