在Liferay Theme中包括jQuery和其他JS文件 [英] Including jQuery and other JS files in Liferay Theme
问题描述
我使用Liferay 6.1,并创建了主题(sample-theme
),我想添加jQuery
.
我该怎么办?
I use Liferay 6.1 and I created my theme (sample-theme
) and I want add jQuery
.
How can I do that?
为什么我有文件夹:sample-theme
和liferay-work
都都有文件夹:css,js,模板?
Why I have folders: sample-theme
and liferay-work
and both have folders: css, js, templates?
我创建了文件夹_diffs
和子文件夹js
,并复制了jQuery并添加了portal_normal.vm
:
I created folder _diffs
and subfolder js
and there copy jQuery and add in portal_normal.vm
:
<script src="/html/js/jquery/jquery-1.8.2.min.js"></script>
我看不到任何变化,为什么?如何添加jQuery?不仅对单个portlet,而且对所有portlet.
And I don't see any changes, Why? How can I add jQuery? Not only to a single portlet but for all.
我没有文件夹 docroot ,我正在使用Maven,并在 src/main/webapp 中创建了文件夹 _diffs 和内部文件夹 js ,我在其中添加 jquery.js 并在 _diffs 创建的模板文件夹中并粘贴:
I don't have folder docroot I am use Maven and in src/main/webapp I created folder _diffs and inside folder js, there I add jquery.js and in _diffs created templates folder an d paste:
<script src="$javascript_folder/jquery-1.8.2.min.js"></script>
仍然是错误的.也许文件夹_diffs应该在另一个地方? Maven项目的结构应该是什么?
And still it is wrong. Maybe folder _diffs should be in another places? What should be a structure of maven project?
推荐答案
您可以将所有JavaScript文件添加到主题中的js
文件夹中,例如:
You can add all your javascript files to the js
folder in your theme like:
sample-theme/docroot/_diffs/js/jquery-1.8.2.min.js
sample-theme/docroot/_diffs/js/jquery-1.8.2.min.js
然后将其提供给所有人,您可以在目录sample-theme/docroot/_diffs/templates/
中存在的模板文件portal_normal.vm
和portal_pop_up.vm
的<head>
部分中写以下任何行:
And then to make it available for everybody you can write any of the following lines in the <head>
section of the template files portal_normal.vm
and portal_pop_up.vm
present in the directory sample-theme/docroot/_diffs/templates/
:
#js ("$javascript_folder/jquery-1.8.2.min.js")
或
<script src="$javascript_folder/jquery-1.8.2.min.js"></script>
注意:portal_pop_up.vm
用于将您的javascript更改应用于AUI对话框弹出窗口
Note: portal_pop_up.vm
is for applying your javascript changes to AUI dialog pop-ups, if you are using them
$javascript_folder
是主题模板文件中存在的速度变量,它指向javascript存储路径(默认为:${root-path}/js
),该路径可以在liferay-look-and-feel.xml
中定义,如下所示:
$javascript_folder
is a velocity variable present in the theme's template files which points to the javascript storage path (default is: ${root-path}/js
) which can be defined in the liferay-look-and-feel.xml
like this:
<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>
您也可以像<javascript-path>
一样自定义${root-path}
,方法是在liferay-look-and-feel.xml
中将其指定为<root-path>
,如图所示. ${root-path}
的默认值为/
,即它引用目录sample-theme/
.
You can also customize ${root-path}
just like <javascript-path>
by specifying it in liferay-look-and-feel.xml
as <root-path>
as shown. The default value of ${root-path}
is /
i.e. it refers to the directory 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
.
Basically the folders css
, js
, templates
& images
are the ones which gets updated with the changes you make in the corresponding _diffs
folder (_diffs/css
, _diffs/js
etc) when you build the theme. So that is the reason the velocity variables like $javascript_folder
& $css_folder
point to sample-theme/js
& sample-theme/css
respectively instead of sample-theme/_diffs/js
or sample-theme/_diffs/css
.
希望这会有所帮助.
这篇关于在Liferay Theme中包括jQuery和其他JS文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!