1

Intent
I need to render portion of hmtl into a page.

Problem
The page is being rendered without styling or layout.

I have a page that I need to be in plain html and not jade. But will still be using jade elsewhere.

I followed along to a similar question and that works to direct to an html page. BUT the styles and layout if not being passed in.

My previous page was cases.jade and started like this

extends layout

block content
  .row
    .twelve.columns
      h1 title

Now my new page is cases.html and starts like this 

<div class="row">
  <div class="twelve columns">
    <h1>Before &amp; After Case Gallery</h1>

and is routed to like this

app.get('/cases', function (req, res)
{
  res.render('cases.html');
});

and has this above it

app.set('views', __dirname + '/views');
app.engine('html', require('ejs').renderFile);
Community
  • 1
  • 1
JGallardo
  • 11,074
  • 10
  • 82
  • 96
  • Why the switch from Jade to HTML? – Šime Vidas Jan 02 '14 at 23:49
  • @ŠimeVidas well this specific page has a lot of nested elements. I am new to jade and the html-to-jade converter has a lot of spacing that I end up having to fix. at this point I just want to get it functional. later I can convert. But I don't want to slow down the delivery date, I can always convert after I have the layout refined. – JGallardo Jan 02 '14 at 23:59

1 Answers1

1

It seems like in your jade file, you're extending the layout page, so you include all your layout info. But in the HTML version you aren't importing any of the layout information.

I see you're using ejs. Check out layouts, to see what to put into your template:

<% include head %>
<h1>Title</h1>
<p>My page</p>
<% include foot %>

Here you'll want to do something like <%include layout %>, with your layout page stuff in layout.html. The include line will basically copy-paste the file's content into that spot.

rtpg
  • 2,419
  • 1
  • 18
  • 31
  • The problem is that layout.jade is supposed to wrap the HTML code, so `<%include layout %>` does not work out-of-the-box. OP would have to copy-paste layout.jade into two files. – Šime Vidas Jan 03 '14 at 00:02
  • So you would recommend perhaps making a `.html` version of the `` and `footer` that lists the same as in my `layout.jade` ? because otherwise would I not have to make a `layout.html` and list that as the template for the "cases" view? – JGallardo Jan 03 '14 at 00:04
  • OK so this did work, you answered in context. I only changed the `<% include includes/head %>` . But my project feels a bit hacky the way that is is laid out now. – JGallardo Jan 03 '14 at 00:34
  • 1
    I'd honnestly recommend you sticking with a stronger templating system like jade. There are lot of templating systems for javascript (even something like mustasche might work). You might have your reasons for this change though. In mustasche, you'd make a "layout" template that would take as a parameter something like "contents", and render the layout that way. – rtpg Jan 03 '14 at 00:57