Включение jQuery и других файлов JS в тему Liferay

Я использую Liferay 6.1, создал свою тему (sample-theme) и хочу добавить jQuery. Как я могу это сделать?

Почему у меня есть папки: sample-theme и liferay-work, и в обеих есть папки: css, js, templates?

Я создал папку _diffs и подпапку js, скопировал туда jQuery и добавил portal_normal.vm:

<script src="/html/js/jquery/jquery-1.8.2.min.js"></script>

И я не вижу изменений, почему? Как я могу добавить jQuery? Не только для одного портлета, но и для всех.

У меня нет папки docroot. Я использую Maven, а в src / main / webapp я создал папку _diffs и внутри папки js , туда я добавляю jquery.js и в _diffs созданную папку шаблонов вставляю d:

<script src="$javascript_folder/jquery-1.8.2.min.js"></script>

И все же это неправильно. Может быть, папка _diffs должна быть в других местах? Какой должна быть структура проекта maven?


jquery liferay liferay-theme liferay-6
person witek010    schedule 17.10.2012    source источник
comment
Для сборки с использованием maven это может вам помочь: liferaysolution.com/2012 /09/maven-build-with-liferay.html   -  person Rasabihari Kumar    schedule 14.01.2013

Ответы (5)


arrow_upward
8
arrow_downward

Вы можете добавить все свои файлы javascript в папку js вашей темы, например:

образец-тема / docroot / _diffs / js / jquery-1.8.2.min.js

А затем, чтобы сделать его доступным для всех, вы можете написать любую из следующих строк в разделе <head> файлов шаблонов portal_normal.vm и portal_pop_up.vm, находящихся в каталоге sample-theme/docroot/_diffs/templates/:

#js ("$javascript_folder/jquery-1.8.2.min.js")

Or

<script src="$javascript_folder/jquery-1.8.2.min.js"></script>

Примечание: portal_pop_up.vm предназначен для применения ваших изменений JavaScript во всплывающих окнах диалогового окна AUI, если вы их используете

Еще одно объяснение того, как все работает:

$javascript_folder - это переменная скорости, присутствующая в файлах шаблона темы, которая указывает на путь хранения javascript (по умолчанию: ${root-path}/js), который может быть определен в liferay-look-and-feel.xml следующим образом:

<theme id="sample" name="Sample">
    <root-path>/html</root-path> <!-- optional -->
    <javascript-path>${root-path}/js/jQuery</javascript-path> <!-- So path becomes: sample-theme/html/js/jQuery -->
</theme>

Вы также можете настроить ${root-path} точно так же, как <javascript-path>, указав его в liferay-look-and-feel.xml как <root-path>, как показано. Значение по умолчанию ${root-path} - /, то есть относится к каталогу sample-theme/.

Обычно папки css, js, templates и images обновляются с изменениями, которые вы вносите в соответствующую папку _diffs (_diffs/css, _diffs/js и т. Д.), Когда вы создаете тему. Вот почему переменные скорости, такие как $javascript_folder & $css_folder, указывают на sample-theme/js & sample-theme/css соответственно вместо sample-theme/_diffs/js или sample-theme/_diffs/css.

Надеюсь это поможет.

person Prakash K    schedule 18.10.2012

arrow_upward
3
arrow_downward

Добавьте
<script src="$themeDisplay.getPathThemeRoot()js/jquery-1.8.2.min.js" type="text/javascript"> в portal_normal.vm

после добавления файла в папку sample-theme / docroot / _diff / js
Вы также можете использовать CDN напрямую
<script src="<jquery url in CDN>" type="text/javascript">

person Adel    schedule 14.01.2013

arrow_upward
1
arrow_downward

Вам следует добавить jquery-1.8.2.min.js в папку docroot / _diffs / js вашей темы. Затем в docroot / _diffs / templates / portal_normal.vm вы должны добавить следующую строку в раздел ‹head /›:

<script src="$javascript_folder/jquery-1.8.2.min.js"></script>

Думаю, должно работать.

person Artem Shafranov    schedule 17.10.2012

arrow_upward
0
arrow_downward

Это должно быть вам полезно

 <script src="<%=request.getContextPath()%>/js/jquery-1.8.2.min.js" ></script>
person Mari Selvan    schedule 01.02.2017

arrow_upward
0
arrow_downward

  1. diffs требуется только при наличии проекта ant, для MAVEN вам не нужны diff

  2. request.getContextPath полезен, когда вы хотите сделать это в портлетах, а не в темах.

  3. вы можете использовать "$ javascript_folder" для доступа ко всему внутри папки js

person Parth Ghiya    schedule 02.02.2017