Adding and Linking to JS/CSS Assets


In order to link to Javascript and CSS files, you first need to place them inside your assets folder. So, lets say I want to link to example.js and example.css. I am going to put the js file inside the assets/js folder and the css file inside the assets/css folder.

Now that the files are in the right place, we want to link to them from the default.hbs file. The reason we use the default.hbs is because that file is what is loaded on every single page on the site. If you wanted to only load these files on, lets say the tag pages, then you would include this in the tag.hbs file.

Inside your default.hbs file, you are going to add the links just like you normally would with HTML, but instead of using a URL for the source, you are going to use the asset helper:

<link rel="stylesheet" type="text/css" href="{{asset "css/example.css"}}" />

<script src="{{asset "js/example.js"}}"></script>

Since the asset helper will link from wherever you are to the assets folder, you only need to worry about the relation from that folder to whatever you are trying to link to.

Since the asset helper will link from wherever you are to the assets folder, you only need to worry about the relation from that folder to whatever you are trying to link to.