Using files in themes

The preceding sections show how to set up CSS and JavaScript that will apear directly within the head of the page.

It is more normal, and good practice, to put all but trivial amounts of CSS and JavaScript into separate files.

Metrici provides three different ways for serving CSS and JavaScript as files:

  • Create the file directly within Metrici using the Content File type (library.file.ContentFileType). This is a really good option during development when you want to try out different styles and scripts. However, it is relatively inefficient, and should not be used for significant production workloads.

    For CSS, the LESS File type (library.style.LESSFileType) is basically the same as a content file, but allows you to write CSS using LESS syntax.

  • Upload the file using the standard File type (library.file.UserFileType).

  • Upload a set of files as a ZIP file using the standard File, and then access the individual files within the ZIP file using the resources access method.

    This is the most efficient and most versatile way of serving files.

The differences between retrieving files as nodes and the resources method are described in Files, but in summary:

  • If you have a normal file or content file with reference my.file.reference.1 and extension ext, access it as

    ${rootPath}my/file/reference.1.ext
  • If you have a file called foo.ext in resource zip file my.file.reference.1, access it as

    ${rootPath}resources/my.file.reference.1/foo.ext

The version numbers are optional. If omitted, the user will retrieve the latest version.

Rather than put node references as literals in your content, you can add the file nodes to the Bindings section of the Resource definitions, and the use the following placeholders:

  • ${link:binding} – the file path of the node, including file extension, for use with content files and normal files, e.g. "my/file/reference.1.ext".
  • ${ref:binding} – the reference of the node, for use with resources, e.g. "my.file.reference.1".