Page specific css and javascript

Experience Manager (PaaS/OnPrem)
1

Hi OneHippo Community,

I have few confusion regarding including css and JavaScript including font etc on specific page(Say i want to include on News details page but not on News list page).

I have tried to solve above with hst:headContribution and also with normal <link … /> and <script …/> tag but no luck, as its add all those and to base layout page on top of whats already there on baseLayout page.

So Here are few of my doubts:

  • How is hst:HeadContribution different from normal <link …/> and <script…/> tag apart from using <@hst.webfile to resolve the link

  • Say I have two page NewsList.ftl which shows all news article and other is newsDetail page which is displayed once someone clicks the news on NewsList page. Could you please help me to add separate css and javascript on respective pages i.e certain javascript or css should only load on News List page but not on NewsDetail page and Vice-versa.

  • I want to load certain font only for certain Locale but not for all, how can I achieve this. Say for example I want to load Roboto Font only when some ones locale is Engligh but not French and vice-versa etc.

2

Yes you should use headcontribution tags in your news page. You can use webfile or other links, and you can surround it with if statements.