How to create different two head.html using iron-router

Question

I am writing a project in Meteor, there are client side and admin and their JS, CSS files different so I need to create different head.html for them, how can I import to this "head"s elements (script, style etc.) using iron-router?

Answer 1

I will preface this by saying that if you're loading all your CSS and JS in Meteor with e.g.:

<link href="styles.css" rel="stylesheet" />
<script src="script.js"></script>

You're probably doing it wrong. Meteor automatically loads all the CSS and JS you put in the project directory. If you need to dynamically load CSS or JS from external sources, see https://stackoverflow.com/a/14521217/2723753.

---

But assuming you know that, there's not a easy way to do what you're asking. It's probably easiest to create two apps and create packages so that you can share some of the code/assets between the apps.

If you want two distinct iron router layouts/styles within one app, the way I've done it is to use a modified version of the london:body-class package that sets the layout name and route name as classes on the html and body elements.

Then in your css you can refer to e.g.

body.AdminLayout button {
    background-color: blue;
}

body.AdminLayout header {
    background-color: red;
}

I use Stylus for this because I can use variables for colours etc. and because rules can be nested which is a massive time-saver:

variables.import.styl:

$some_color_variable = rgba(r,g,b,a)
$another_color_variable = rgba(r,g,b,a)
$yet_another_color = rgba(r,g,b,a)

admin_layout.styl:

@import 'variables.import'

html.AdminLayout
    font-size 20px

body.AdminLayout
    button
        background-color $some_color_variable

    header
        background-color $another_color_variable

    // etc. etc.

public_layout.styl:

@import 'variables.import'

body.PublicLayout
    button
        background-color $yet_another_color

    // etc. etc.

I'll leave it at that for now, if you clarify what you're trying to achieve I can probably improve this answer...