How to include CSS & JS files in Web Content source?

[SARITHA VASUDEV，修改在11 年前。]

Hi All,

I have a query regarding Web Content . Can we include CSS or JS file in the WebContent HTML Source Code ? If yes, where to keep the files & how to give the reference?

NOTE : Without referring from themes ?

Also, can I give reference from any existing application in my webapps folder of liferay istallation?

Thanks in advance.

[Pavel Savinov，修改在11 年前。]

Hi.

Of course you can include any external CSS and JS files in your web content, like this:

JS:

<script src="http://www.somehost.com/js/script.js"></script>

CSS:

<link rel="stylesheet" href="http://www.somehost.com/css/style.css" type="text/css">

Or you mean including CSS and JS from the other portlets?

[SARITHA VASUDEV，修改在11 年前。]

Thanks for the reply , Pavel.

My question is , is this the best way to refer CSS/JS in Web Content ?

I have around 15 files (CSS & JS). And this application of mine will get deployed in 4 environments/hosts. So as per your answer, I have to create 4 files(HTML to update in Web Content) with CSS/JS pointing to the respective hosts. Could you please suggest, is there any other better way to refer CSS / JS files in Web Content rather than hard coding?

[Pavel Savinov，修改在11 年前。]

Hm..You can create some templates with all required combinations of JS/CSS. And then create a web content with those templates, but in fact it will be very similiar...

[Gaurav Jain，修改在11 年前。]

you may keep all the css/js files in your document library (so downlaod external files and upload to Document and media to some specific location); and then you may now use these urls of your document media of these files into web-content.

Alternatively you may copy these files to your theme, and then you an use your theme path in web-content for these files.

[SARITHA VASUDEV，修改在11 年前。]

Thanks both for the reply.. :-)

[Anonymous Anonymous，修改在9 年前。]

What if we have css and js files in our document and media under a folder exapmle:folder1

is this works fine?

<script type="text/javascript" src="$jquery_min_js.getData()"> script>
<script type="text/javascript" src="$external_js.getData()"> script>