问题
I use Liferay 6.1 and I created my theme (sample-theme
) and I want add jQuery
.
How can I do that?
Why I have folders: sample-theme
and liferay-work
and both have folders: css, js, templates?
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>
And I don't see any changes, Why? How can I add jQuery? Not only to a single portlet but for all.
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>
And still it is wrong. Maybe folder _diffs should be in another places? What should be a structure of maven project?
回答1:
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
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")
Or
<script src="$javascript_folder/jquery-1.8.2.min.js"></script>
Note: portal_pop_up.vm
is for applying your javascript changes to AUI dialog pop-ups, if you are using them
Some more explanation as to how things work:
$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>
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/
.
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
.
Hope this helps.
回答2:
Add
<script src="$themeDisplay.getPathThemeRoot()js/jquery-1.8.2.min.js" type="text/javascript">
in portal_normal.vm
after adding the file to sample-theme/docroot/_diff/js folder
You can also use a CDN directly
<script src="<jquery url in CDN>" type="text/javascript">
回答3:
You should add jquery-1.8.2.min.js to the folder docroot/_diffs/js in your theme. Then in docroot/_diffs/templates/portal_normal.vm you should add the following line to the <head /> section:
<script src="$javascript_folder/jquery-1.8.2.min.js"></script>
I think, it should work.
回答4:
This should be helpful for you
<script src="<%=request.getContextPath()%>/js/jquery-1.8.2.min.js" ></script>
回答5:
diffs is only required when there is ant project, for MAVEN you do not need diffs
request.getContextPath is useful when u want to do it in portlets & Not themes.
you can use "$javascript_folder to access anything inside js folder
来源:https://stackoverflow.com/questions/12936061/including-jquery-and-other-js-files-in-liferay-theme