Theme Asset Path

One issue front end developers sometimes run into when working with Mura is how to account for relative paths to files and images. For example, if the layout template has the following line of code:

<link rel="stylesheet" href="../css/myStyles.css">

What would happen when the a file is being served on the front end? The URL would look something like http://www.yourDomain.com.

So, to the browser, the CSS file would look like it's located here:

http://www.yourDomain.com/css/myStyles.css

But your CSS is actually located at:

http://www.yourDomain.com/{SiteID}/includes/themes/{ThemeName}/css/myStyles.css

Your first thought might be to simply hard code the absolute path to your file. If you do that, what happens if someone else wants to use your theme? If the SiteID is different from what you hard coded, then the path will break. So don't do it this way! Mura has a template variable that will take care of generating the dynamic path to your theme for you.

#$.siteConfig('themeAssetPath')#

This little snippet of code is a front end developer's best friend. It dynamically generates the entire path down to your theme for you, even if Mura is installed in a subdirectory of wwwroot. 

Here's a full example of how you could use this:

<link rel="stylesheet" href="#$.siteConfig('themeAssetPath')#/css/myStyles.css">