Express & Jade, templates adding code to the layout
I'm playing around with an Express site with Node.JS
I have a layout file which, let's say, looks like this:
html
title foo
body!= body
From what I have been able to understand, the output of the template is inserted into a variable called body and that's added to the layout there on the 3rd line. However, if I wanted a template to add, for example, a <meta> tag in the <head> element, how would I do that?
I did see the explanation of extending templates and using blocks, but I'm not sure how that ties it to using layouts. The templates themselves shouldn't be extending the layout, right? Or, does t开发者_Go百科emplate inheritance remove the need for layouts at all? I would suspect not, but I'm not sure.
Also, since I'm here, how do you specify a different layout to be used, or for no layout to be used at all. Currently, the views are being rendered like this:
res.render('templateName', { myTemplateVars : 'foo' });
What you are asking for was released 3 days ago.
http://tjholowaychuk.com/post/10695801204/jade-stylus-0-16-0-released
I have personally been using it for a few weeks and love the recent additions. The block statement allows you to specify default content and any extension template can override a named block.
Basically, blocks override, includes append and extends chooses your parent template.
Try dust template engine.
It is far more interesting and designer friendly.
In dust you can write base.html:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>kiss.js example</title>
<link rel="stylesheet" href="/css/css1.css" />
<link rel="stylesheet" href="/css/css2.css" />
<script type="text/javascript" src="/js/js1.js"></script>
<script type="text/javascript" src="/js/js2.js"></script>
{+head/}
</head>
<body>
<div style="height: 100%">
<div id="header">
<h1>kiss.js example - {+header}{/header}</h1>
{+header_buttons}{/header_buttons}
</div>
<div id="content">
{+content}{/content}
</div>
<div id="footer">
<table>
<tr>
<td>
</td>
<td style="width: 100%; text-align: center;">made with kiss.js</td>
<td>{+footer_buttons}{/footer_buttons}</td>
</tr>
</table>
</div>
</div>
</body>
and view.html:
{>base.html/}
{<content}
<h2>name: {name}</h2>
<h3>{foo}</h3>
{#numbers}
<div>{.}</div>
{/numbers}
{/content}
加载中,请稍侯......
精彩评论