Создание и Изминение JSP и LESS файлов

HanSoloSnipeHanSoloSnipe
отредактировано марта 2020 Раздел: HYBRIS

Здесь будет описание того, как работает отображение Компонентов на сайте, и как заменить стилизацию

Что такое JSP? - технология, позволяющая веб-разработчикам создавать содержимое, которое имеет как статические, так и динамические компоненты. Wiki

JSP это как HTML имеет те же принципы работы. В проекте HYBRIS он играет очень важную роль в показе страницы, обычно на один компонент приходиться 1 JSP, но бывает использует дерево из многих файлов JSP. Позже платформа из них создает HTML файл.

Что такое LESS? - это динамический язык стилей, который разработал Alexis Sellier. Wiki

LESS это кусочек стиля, для какого то компонента, который позже генерируется в один большой CSS файл

  • И так, приступим, мы имеем такую вот страницу,

  • Так же к этому заданию нам понадобятся вот эти файлы


    storefinder.less - это стиль страницы
    ybase.less - это туда, куда мы импортируем наши стили
    storeFinderSearchPage.jsp - это то как у нас отображается компонет
    style.css - это файл, где уже сгенерированы все less файлы

  • Переходим в файл storeFinderSearchPage.jsp и находим такой кусочек

  • Видим что у него есть ID

  • Теперь переходим в файл storefinder.less и находим этот кусок

  • Видим, что ID совпадает, с тем, что мы искали ранее

  • Давайте заменим цвет этому объекту, например на красный

  • Теперь, что бы изменения работали нам нужно импортировать наш файл в ybase.less

  • Но еще наши изменения не будут видны, для этого надо Перестроить систему, что бы все наши файлы сошлись в один файл style.css.

    Для этого переходим в директорию /hybris/bin/custom/training/trainingstorefront , открываем там терминал , и прописываем команду ant build.
    Если он ругается, что каманды не существует, следует ввести . ./setantenv.sh .
    Если вдруг не настроен линк на команду, то используем cd /home/user/HYBRIS_HOME_DIR/hybris/bin/platform && . ./setantenv.sh && cd /home/user/HYBRIS_HOME_DIR/hybris/bin/custom/training/trainingstorefront && ant build

  • Постройка прошла успешно

  • Переходим в файл style.css и удостоверимся, что наши изменения Появились

  • А теперь, последний этап это проверить изменения на странице

  • Как мы видим, нам удалось сменить цвет текста с черного на красный

Войдите или Зарегистрируйтесь чтобы комментировать.