EJS Scripts and Stylesheets sections

Question

I'm new to node, express, and EJS, coming from ASP.NET MVC. In Razor, there is a feature called "sections" that allows me to specify a placeholder in my layout file for things like scripts and stylesheets, and reference them later in my individual views when those views need particular scripts and stylesheets. That way, all the stylesheets stay at the top, and all the scripts stay at the bottom. Is there a similar feature in EJS?

Answer 1

Posting as answer at your suggestion.

EJS is a fairly 'bare metal' implementation although it does have partials, I don't think it would cleanly give you what you want as it's not really modeled on a 'layout' concept. You might want to consider looking at Jade as a template engine. It is the default template engine for Express, which you will probably be using shortly if you aren't already.

Personally, I have found I really like Jade in general. It is much easier on my eyes simply because it is so terse/concise.

Resources:

• Jade on Github
• Jade-lang.com
• CSS Deck Jade Tutorial - Syntax
• CSS Deck Jade Tutorial - Logic

The use of the block syntax is what I think you want for what you describe, and I don't think it is well documented in those resources, but here's an example:

layout.jade

doctype html
html
  head
    title #{title} / #{version}
    link(rel='stylesheet', href='/css/site.css')
    script(src='/js/mygenericscript.js')
    block head

    body(class='foo')
        // the line below could be written as '#maincontent.bodyclass'
        div(id='maincontent', class='bodyclass')
          block content

template.jade

extends layout

block head
  // here I am including a page-specific script & stylesheet in the head section
  script(src='/js/mypagescript.js')
  link(rel='stylesheet', href='/css/crazypage.css')

block content
  div(class='page-specific-class')
    //etc, etc

Answer 2

I wish there was a viable ejs solution, but based on @barry-johnson's answer it looks like there is not. What is nice (from my perspective) about ejs is how you can still write normal html in your code, but I struggle to see the benefit in yet another abstraction with jade.

This is a big concern, must have for me, and if ejs cannot do the trick well, then ejs does not look to be worth it.

Going with @barry-johnson's comment to look for an alternative, maybe a truly viable option is nunjucks. It seems to be an active project, has over a thousand stars on github, and the block option seems to be the answer, although I have not tried anything out yet. (Maybe somebody who already has can confirm.)

http://mozilla.github.io/nunjucks/templating.html#block

block

block defines a section on the template and identifies it with a name. This is used by template inheritance. Base templates can specify blocks and child templates can override them with new content. See Template Inheritance.

{% block css %}
<link rel="stylesheet" href="app.css" />
{% endblock }

Nunjucks uses {{ }} syntax in parts, which should be a concern if you are also using AngularJS. However, as was pointed out to me on github, you can get around this issue by customizing the nunjucks syntax, which I believe is preferable to changing Angular's binding syntax.

https://mozilla.github.io/nunjucks/api.html#customizing-syntax