0

Im wondering how one would display common html header information in an Express application. Im trying to have a common menu or header displayed on my web app across all pages but cant figure out how to do this without copy and pasting the html into every html file on my server. I believe this can be done with routes. my app is structured like so:

/ web root
   - server.js // main web server
   /public
     - css, 3rd party js files, images
   /routes
     - index.js includes renders to seperate pages
   /views
     - jade and html files.
Improve this question

1 Answer 1

Reset to default
1

If you are using Jade then you actually won't do this with a route, instead you'll use Layouts. If you used the express-cli tool to generate your project then you'll notice the views/homepage.jade file uses the layout.jade file to do what you're expecting.

If you want a more complex example, here's a demo project I made that's based on Bootstrap: https://github.com/newz2000/template-test-jade

In either case, the idea is you have a file that uses a syntax like this:

extends layout

block content
    your page's content here

Then your layout.jade file will have a line like this:

block content

When you res.render() the first file, it will first render layout and take the block content from the layout.jade file and replace it with the contents of your page.

Two other things to consider:

  1. Handlebars.js is a more HTML-like templating language that supports layouts and partials, so you can utilize that to your goal. There are a couple steps to get it working, but it's not hard. I've documented it here: http://www.bearfruit.org/2014/01/20/node-js-showdown-handlebars-compared/

  2. Just use plain static HTML files. Yeah, you lose the ability to have Node.js manage the common headers, but you get plain ol' HTML. You can drop an index.html into your public folder and then make sure there is no route that conflicts with it and it will be served as your homepage.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

ugh jade, i really prefer HTML but i guess i can learn jade. Is this the only way to do this? Do you know if you can use jade and HTML?
Jade and HTML don't play well together, but you can easily switch to a different view engine that does. One downside is that, when it comes to supporting partials and layouts, Jade is one of the best integrated. However, Handlebars.js does support it, I wrote a blog post about it here: bearfruit.org/2014/01/20/node-js-showdown-handlebars-compared and the only non-HTML tags you'd need is the {} tags to utilize the layouts and/or partials. This is common for single-page apps that use Backbone or Angular.
Another option you have it to put a plain .html file into your public folder. If you create index.html and then don't include a view for the homepage, it will serve the static file properly. If this works for you, I'll update my answer to mention this. This will not give you reusable bits for the header though.
cool, thanks newz. Can you add the html option to your answer? i might just end up using jade. I just dont like the syntax haha
Certainly. I too don't care for the syntax, but if you want an optimistic perspective, the one benefit is the syntax is very clean and concise. When it's all done it's a bit amazing to see how compact and readable the files are. ;-)
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.