Referencing JS/CSS and Image Files

Steffen Burzlaff
Last update: Jan 18, 2018

You can use static resources in your Viewport templates. Before using CSS and Javascript libraries, you have to include them in the <head> section of your Velocity template. To do so, you can use the '$theme.baseUrl' variable, which will be automatically resolved to the path of your template directory when the page is loaded. How to upload the files is covered in the getting started guide.

CDN stands for Content Delivery Network. They help you let your users download a library like jQuery way faster, by providing the file from a server close to them. If you do not want to depend on external resources, you can always download the file yourself and put it online on your own viewport.

Order of includes

Note

If you use jQuery plugins, it is important to reference jQuery before you include further plugins.

It is recommended to put styles at the top of the source code (within the <head> element) and scripts at the end (within the <body>) of the source. If you have many scripts and styles, this helps improve page performance.

Using Confluence Macros and components

Sometimes, a macro requires an extra script to work. Most of the macros work by implementing $page.resources in your template within the <head> element:

<head>
$page.resources.js
$page.resources.css
</head>

While most features will work with these two lines, additional resources have to be implemented for advanced Confluence features like dialogs.

How to see what resources you need

On each of the documented pages of the components, you can see whether it is already included in the AUI Core. (With the code snippet above, you include the AUI Core)

For these that are not in the AUI Core, you have to include them with their Web resource key: