Adding custom javascript via the theme

[Murali Mohan，修改在13 年前。]

Hi,
I'm developing a new theme on 6.0.4.

I wanted to add a bunch of javascript files to my pages.

1) Created a custom theme
2) in my-theme/docroot/_diffs/js folder, added the files
(Acutally, I tried the folder names js and javascript
See document : https://www.liferay.com/community/wiki/-/wiki/Main/Create+Liferay+Themes+for+6.0.x )
3) Deployed the theme.

Found out that the the javascript is picked up only if the folder is named 'js' and the javascript
is inside a file called main.js (Not javascript.js or anything else)

I wanted some more flexibility, ie to include a bunch of javascript files and some third party css

I could achieve it by including

<script src="$javascript_folder/a.js" type="text/javascript"></script>
<script src="$javascript_folder/test/b.js" type="text/javascript"></script>
<link href="$javascript_folder/resources/css/style.css" rel="stylesheet"> 

in portal_normal.vm.

Is this recommended, or do you see any problem in doing so?

[Maarten van Heiningen，修改在13 年前。]

Hi Murali,

You can put your custom javascript sources in the folder /docroot/js/custom.js

The velocity variable $javascript_folder is set to look in the /js folder Not in the /_diffs/js/.

in the portal_normal.vm you include the javascript link to your file like this:
<script type="text/javascript" src="$javascript_folder/custom.js" charset="utf-8"></script>

For custom stylesheets you can put them in the /css folder (Not in the /_difss/css/)

In the portal_normal.vm you link to the css file like this:
<link type="text/css" rel="stylesheet" src="$css_folder/your_custom.css"></link>

Or

In the main.css you include your css file like this:
@import url(base.css);
@import url(application.css);
@import url(layout.css);
@import url(dockbar.css);
@import url(navigation.css);
@import url(portlet.css);
@import url(forms.css);
@import url(extras.css);
@import url(custom.css);
@import url(your_custom.css);


Good luck
Maarten

[J T，修改在12 年前。]

Any idea on how we would customize .js files that are included in the liferay installation, such as navigation.js?

[Maarten van Heiningen，修改在12 年前。]

Hi JT

You can find these files inside the /webappsROOT/html/js/liferay/ foider.
The only thing is do you really need them to be different? As changing these files will be doable but if you ever migrate or upgrade, you can get some strange things happening.

My suggestion and advice is just stick to the main.js in your own theme and if needed create your own navigation scripts in there.

[J T，修改在12 年前。]

Thanks for the reply
I understand the risks, but what if we want to tweak the functionality that comes out of the box with liferay ..I wanted to alter just the code for the _addPage function in under /webappsROOT/html/js/liferay/navigation.js. Could I simply redefine that function in main.js..say thru Liferay.Navigation._addPage=function() {custom code} and all references to the other functions in the modules remain the same...is this way to customize functions that come out of the box in LR6?

I'm really after getting some direction on this larger issue:
http://www.liferay.com/community/forums/-/message_boards/message/10997862

thanks

[J T，修改在12 年前。]

Any updates to how we customize out-of-box .js files in LR6? Or even a way we could have LR load the -debug versions of .js files. I noticed some properties in portal .properties, in the javascript section but altering them did not load the debug version...how do AUI developers debug in firebug?

[Jacques Traore，修改在10 年前。]

That works for me.
Thanks a lot.

[Traolly Xiong，修改在10 年前。]

Hello ,
Is there any way make the js/css/images folder path relative? It seems to absolute.

Thoughts?

Thanks.

TRX