Основные темы развития. Основные темы развития
 Скачать 374 Kb.
|
1 2 #if(!$is_signed_in) $sign_in_text #end #if ($update_available_url) #language("updates-are-available-for-liferay") #end #if ($has_navigation) #parse ("$full_templates_path/navigation.vm") #end #if ($selectable) $theme.include($content_include) #else $portletDisplay.recycle() $portletDisplay.setTitle($the_title) $theme.wrapPortlet("portlet.vm", $content_include) #end тела ...: Это контейнер для отображаемого содержания HTML-документа. CSS и JavaScript включает в себя Следующая строка кода в и теги элементов используется, чтобы включить все CSS и JavaScript для определения темы и портлетов на каждой конкретной странице портала: $ Theme.include ($ top_head_include) В зависимости от устройства, на котором браузер используется для доступа к странице портала, он будет вызывать к ${PORTAL_ROOT_HOME}/html/common/themes/top_head.jsp или ${PORTAL_ROOT_HOME}/wap/common/themes/top_head.jsp для нормальная тема или беспроводной тему, соответственно. Как часть усилий по настройке производительности, следующая строка кода между и будет включать некоторые CSS и JavaScript коды, которые могут быть загружены после загрузки страницы. Например, Google Analytics и мониторинга коды, включенные после загрузки страницы следующим образом: $theme.include($bottom_include) Опять же, в зависимости от устройства, на котором браузер используется для доступа к странице портала, это включает в себя шаблон называется либо ${PORTAL_ROOT_HOME}/html/common/themes/bottom.jsp или ${PORTAL_ROOT_HOME}/wap/common/themes/bottom.jsp для нормального тему или беспроводной тему, соответственно. Портал страницу DockBar Следующий блок кода используется для генерации DockBar для авторизованных пользователей. #if($is_signed_in) #dockbar() #end На основании разрешений пользователей, функции в этом DockBar может включать Add Application, Manage Page, Go to a site, Sign Out ссылке, и так далее. Следующий скриншот показывает, что отображается на странице портала для пользователя с правами администратора, если это DockBar оказывается в Liferay умолчанию Классическая тема.  Если вы знакомы с предыдущими версиями Liferay Portal, вы могли заметить, что большинство функций в DockBar одинаковые или очень похожи на те функциональные возможности в DockBar в версии 5.x.Новых малых вариант пинг до крайности право на контакт верхнего меню навигации, который имеет опции Add, Manage и Go to. Заголовок Ниже приводится выдержка из /docroot/_diffs/templates/portal_normal.vm файл: … #if ($has_navigation) #parse ("$full_templates_path/navigation.vm") #end Как Вы, возможно, заметили, этот блок программы содержится в пределах элементов HTML5 Логотип организации Каждый сайт портала может иметь свой собственный логотип, который можно настроить в панели управления.Логотип будет отображаться в области портала заголовок через следующий блок кода: $company_name … Если код выполняется в Liferay, часть сгенерированного кода выглядит cледующая часть для управления отображением логотипа в качестве фонового изображения тега привязки: Стиля, примененного к логотипа определен в следующем разделе custom.css файл тему в: #heading .logo { background:url("../images/logo_me.jpg") no-repeat scroll 0 0 transparent; display:block; font-size:0; height:65px; em; width:317px; margin-bottom:2px; } Навигация На основе дизайна вашей темы, вы можете включить горизонтальной и / или вертикального меню для удобства навигации по страницам вашего сайта. Там также может быть несколько уровней меню навигации по любому конкретному пункту меню, потому что Liferay позволяет администратору сайта, чтобы создать ребенку или внуку страниц без ограничений. Меню навигации предоставляются через navigation.vm, как называют в следующий блок кода: … #if ($has_navigation) #parse ("$full_templates_path/navigation.vm") #end Более пристальный взгляд на выставках navigation.vm, что навигационные меню отображаются в виде неупорядоченного маркированного списка с классами CSS контролировать внешний вид каждого меню. Следующий скриншот показывает логотип по умолчанию Liferay и горизонтального меню навигации в теме Liferay Classic:  Содержание Портала Приложение портала предоставляет свои данные в области содержимого, которая через следующий блок кода: #if ($selectable) $theme.include($content_include) #else $portletDisplay.recycle() $portletDisplay.setTitle($the_title) $theme.wrapPortlet("portlet.vm", $content_include) #end Глобальная единая цепочка Начиная с версии 3.5, Liferay Portal предлагает Breadcrumb портлет постоянно отслеживать, насколько глубоко пользователь зашел в навигации сайта. Начиная с версии 6.0, Liferay вводит глобальную единую цепочку, как новый компонент навигации отображается на всех страницах вверху и внизу меню навигации. Этот компонент заменяет старый Breadcrumb портлета и всегда виден на экране, когда по умолчанию Классическая тема применяется. Следующий скриншот показывает глобальную единую цепочку на образце 7 Cogs, Inc сайта.  Portlet хром Портал хром области заголовка портлета. На основании разрешения пользователей, она может включать в себя маленькую иконку для портлета, портлет название, значок ссылки на вид и конфигурации, экспорт / импорт, минимизации икона, максимально значок, а значок близких. Следующий скриншот показывает хром блогов портала на образце 7 Cogs, Inc сайте:  Пользователь с правом доступа может отключить отдельные окна портала хром, сняв флажок Показать границ на странице настройки портлетов. Portlet содержание Содержание приложения портала предоставляются в отдельных портлетов. Это делается через следующий блок кода, для вызова всех окон портала доступно на каждой конкретной странице портала. #if ($selectable) $theme.include($content_include) #else $portletDisplay.recycle() $portletDisplay.setTitle($the_title) $theme.wrapPortlet("portlet.vm", $content_include) #end В дополнение к портлету хрома (портлетов заголовке) области, portlet.vm также призывает следующий атрибут скорости оказать данные внутри каждого портлета: $portlet_content Нижняя сноска Нижняя сноска каждой портальной страницы как правило включает авторское право и приведена в действие сообщениями. Нижняя сноска предоставлена следующим блоком программы в файл portal_normal.vm: Всплывающие окна Всплывающие окна для сообщений Liferay уведомления контролируется portal_pop_up.vm файл, который похож на portal_normal.vm но имеет намного более простые функции. Обновление тему с вашими собственными файлами Теперь вы знаете, как новый скелет тема создается с темой создания сценария и где файлы CSS, изображения, JavaScript, и шаблоны вложенные папки копируются из, когда ant развернуть команда выполняется в Liferay Plugins SDK. Вы также знаете, структуры каждой velosity шаблона в тему. Пора обновить тему с вашими собственными файлами. Изменение конфигурации, чтобы включить режим разработчика Liferay портала является гибкой в настройке системы свойств и свойств портала, установив значение свойства имя пары в system.properties и portal.properties, соответственно. Эти два файлы упакованы в ${PORTAL_ROOT_HOME}/WEB-INF/lib/portal-impl.jar. По умолчанию, некоторые из портала свойства были предварительно для повышения производительности в производстве. Однако эти настройки по умолчанию, не подходят для инженеров при разработке режима. К счастью, Liferay Portal обеспечивает хороший механизм для портала администраторам и разработчикам изменить настройки по умолчанию и включить сервер портала быстрее и удобнее развития плагинов Liferay такие как тема и портлетов. Один из простых способов, чтобы создать более развитие дружественных сервер портала заключается в копировании следующих кодов из portal-developer.properties к portal-ext.properties в ${PORTAL_ROOT_HOME}/WEB-INF/classes каталог. Создание portal-ext.properties файл, если он не существует: theme.css.fast.load=false theme.images.fast.load=false javascript.fast.load=false javascript.log.enabled=true layout.template.cache.enabled=false browser.launcher.url= velocity.engine.resource.manager.cache.enabled=false com.liferay.portal.servlet.filters.cache.CacheFilter=false com.liferay.portal.servlet.filters.themepreview.ThemePreviewFilter=true При таком подходе включить режим разработчика, однако, разработчик будет необходимо изменить portal-ext.properties файл в любое время, когда переключается между развитием и постановка/тестирование окружающей среды. Лучший подход заключается в изменении параметров JVM на сервере разработчика, как показано следующим образом: "-Dexternal-properties=portal-developer.properties" Для более подробной информации о режиме Liferay вики-страницу разработчика, см.: http://www.liferay.com/web/guest/community/wiki/-/wiki/Main/Liferay+Developer+Mode. Как только режим Liferay разработчика была включена, теперь вы можете использовать Firebug плагин Firefox в качестве инструмента отладки в вашей теме развития. Пожалуйста, обратитесь к документации на portal.properties в ${PORTAL_ROOT_HOME}/WEB-INF/lib/portal-impl.jar файл для лучшего понимания того, что эти свойства в виду. Изменение сгенерированных файлов Первый файл, вы можете изменить это ${liferay.plugins.sdk.home}/themes/{your.theme.home}/docroot/WEB-INF/liferay-plugin-package.properties. Вы можете изменить значения по умолчанию для страниц URL на веб вашей организации или личной URL URL, автор собственного имени, и от типа лицензии. Кроме того, значение модуля поэтапно-версии свойство добавляется к имени файла WAR тему. Например: name=Palm-Tree Publications Theme module-group-id=liferay module-incremental-version=1 tags= short-description= change-log= page-url=http://www.palmtreepublications.com author=Frank Yu licenses= Когда тема построена и упакованы, вы увидите файл темы WAR название структуры - Если вы хотите изменить значения по умолчанию из этих записей по каждой теме, полученные от команды создать, вы можете распаковать $ {liferay.plugins.sdk.home} / тем / theme.zip к локальной папке темы, изменить значения по умолчанию в /theme/docroot/WEB-INF/liferay-plugin-package.properties, и вновь почтовый тему папку theme.zip, и перезаписать ${liferay.plugins.sdk.home}/themes/theme.zip. С этого момента все темы генерируется из команды создать тему в этом Плагины SDK будет свой собственный значения по умолчанию. Добавление ваших собственных файлов темы для папок, папки _diffs Как указывалось выше, вы можете запустить муравья развернуть, чтобы построить, упаковки и развертывания темы генерируется из команды тему создать. Тем не менее, упакованные тема по умолчанию файлы с Liferay портал и не то, что вы хотели бы использовать для своего собственного приложения. Для того, чтобы достичь своих собственных стилей вашей темы дизайна, вы должны создать свой собственный CSS, изображений, JavaScript, и даже шаблонов Velocity. В большинстве случаев, к счастью, вам не придется создавать сотни таких файлов с нуля. Вы можете использовать большинство из существующих файлов скопированных с Liferay Portal, а также создавать и изменять только те файлы, необходимые для вашей собственной конструкции. Теоретически, вы можете напрямую изменить или переписать какие-либо файлы в CSS, изображений, JS, и шаблоны подпапки в каталоге DOCROOT тему о том, что автоматически копируются из Liferay Portal. Вы можете запустить муравья развертывания для создания WAR файл, развернуть тему в Liferay Portal, и увидеть изменения, когда тема применяется для сайта или отдельной страницы. Однако, это распространенная ошибка для многих разработчиков тему по нескольким причинам: С сотнями файлов в папке DOCROOT тему, она будет сложно тему разработчикам отслеживать, что было изменено на собственную тему Более того, прямые изменения в CSS, изображений, JS, и шаблоны подпапки будут потеряны, потому что эти подпапки будут полностью удалены, когда ant clean задание выполняется Базу кода вашей темы не было бы в сопровождении К счастью, Liferay Portal обеспечивает намного лучше и в сопровождении механизм тему разработчикам создавать свои собственные файлы или изменять существующие файлы, а в то же время, чтобы иметь возможность использовать большинство из существующих файлов скопированных с Liferay Portal. Внутри вновь создаваемой темы, у вас есть /DOCROOT/_diffs папку. Это _diffs каталог является отправной точкой, где все ваши новые или измененные CSS, изображений, JavaScript, velocity шаблонов файлы должны быть сохранены. Имейте в виду, что вы положили только различия настроенную тему в этой папке _diffs и не копируют оригинальные файлы без изменений Liferay в этой папке. Следуя этой рекомендации, вы будете иметь гораздо более ремонтопригодны базу кода и гораздо более легкой задачей при переносе темы к новой версии в будущем. Создание собственных определений CSS в /DOCROOT/_diffs/CSS/custom.css По крайней мере, вам нужно изменить custom.css файл, чтобы изменить способ ваша тема выглядит. Настоятельно рекомендуем, чтобы все изменения были сделаны к настоящей custom.css, как и все другие файлы CSS используются для обеспечения базовой структуры для вашей темы. Вам не нужно копировать без изменений определения CSS от Liferay портала в этот файл, потому что они будут скопированы автоматически, когда тема построена и упаковывают. Вы можете создать подпапки в папке CSS _diffs и сохранить custom.css в / DOCROOT / _diffs / CSS папке. Создание собственного JavaScript в /DOCROOT/_diffs/JS/main.js Кроме того, вы можете создать main.js файл и добавить все пользовательские коды JavaScript в этот файл и сохранить его в / DOCROOT / _diffs / JS папку. Опять же, как часть передовой практики темы развития, вам не нужно копировать любые оригинальные неизменным коды JavaScript от Liferay портала в эту main.js. Создание собственных изображений в /docroot/_diffs/images папки или подпапки Если вам необходимо перезаписать любой из вне окна изображения, которые копируются из Liferay портала в / вашей темы DOCROOT / папку с изображениями, необходимо для создания или изменения целевого изображения, сохранить его в одноименный файл, а затем положить его соответствующей вложенной папке /docroot/_diffs/images папку. Ваше собственное изображение будет перезаписывать изображение по умолчанию с тем же именем. Вы должны убедиться, что вы полностью протестировать изменение изображений, включая его цвет, размер и так далее в портал или портлета. Если вам нужно добавить некоторые новые образы для своей темы, вы можете сохранить их в файл / DOCROOT / _diffs / фото / пользовательские папки или ее подпапке, как вы пожелаете. Таким образом, вы можете разделить свои собственные изображения из оригинальной вне коробки изображений. Кроме того, можно создать два изображения screenshot.png и thumbnail.png чтобы показать, как страница с текущей темой выглядит. Вы также можете создавать подпапки поисковая и поставить все, связанных с поиском изображений в этой / DOCROOT/_diffs/фото/поисковая подпапку. Как вы можете видеть здесь, все индивидуальные изображения должны быть помещены в / тема в DOCROOT/_diffs/изображений папке или ее подпапках. Все изображения теме может быть доступна в вашей теме через относительный путь или абсолютный путь. Например, вы можете использовать следующий относительный путь в вашей custom.css: background: url(../images/navigation/bullet_selected.png) no-repeat 5px 50%; Вы можете также использовать следующие абсолютный путь в вашей скорости шаблонов, таких как portal_normal.vm:  Где {theme-folder-name} должны быть заменены на вашу тему имя папки, такие как palm-tree-publications-theme. Добавление собственных шаблонов velocity в /docroot/_diffs/templates папку Возможно, вы захотите создать шаблоны вложенную / тема в DOCROOT/_diffs/ папки и добавлять собственные velocity шаблон файлов, таких как init_custom.vm, navigation.vm, portal_normal.vm, portal_pop_up.vm и portlet.vm. Хорошая стратегия состоит в ссылке на эти файлы с одинаковыми именами в /DOCROOT/ папке шаблонов в качестве отправной точки. Обратите внимание, что вы можете использовать JSP-файлы в файлы шаблона в соответствии с настоящим DOCROOT/_diffs/templates. Вы можете использовать JSP в файлах шаблона, чтобы получить больше гибкости или, если вы не знаете velocity хорошо. Однако, вы не будете иметь доступ к скорости переменных, если JSP-файлы используются. Теперь давайте посмотрим на отдельные шаблоны и как Вы могли бы настроить его. init_cutom.vm В этом файле, можно объявить все переменные, используемые в portal_normal.vm. Например: #set ($theme_name = "palm-tree-publications-theme") #set ($the_title = "Palm Tree Publications Theme") #set ($company_name = "Palm Tree Publications Inc.") #set ($community_name = "Palm Tree Publication Reviewers") #set ($any_custom_name = "This is just a sample custom name") Пожалуйста, обратите внимание, что вы можете добавить любой новой декларации переменной velocityю, такие как $any_custom_name выше в этом init_custom.vm файл для использования в тему. Вы также можете переписать значение какой-либо существующей переменной velocityю, такие как $company_name выше, если у вас есть же переменной имя. portal_normal.vm Как указывалось выше, это основной файл в качестве основной рамы для шаблона. Любые новые или существующие переменная определена в файле init_custom.vm можно назвать в этом portal_normal.vm. Вы также можете добавлять новые или обновить существующие HTML-коды, или позвоните по телефону CSS определений в этом файле, чтобы достичь своей собственной конструкции. Например, вы можете захотеть изменить отображения содержимого и / или выглядеть и чувствовать себя в колонтитулах области. Если вам нужно настроить нижний колонтитул, вы можете сделать это, изменив коды между 1 2 |