Express & Jade，模板添加代码到布局答案

【问题标题】：Express & Jade, templates adding code to the layoutExpress & Jade，模板添加代码到布局
【发布时间】：2011-09-29 14:51:43
【问题描述】：

我正在用 Node.JS 玩一个 Express 站点

我有一个布局文件，比方说，它看起来像这样：

html
    title foo
body!= body

据我所知，模板的输出被插入到一个名为body 的变量中，并被添加到第三行的布局中。但是，如果我想要一个模板在<head> 元素中添加一个<meta> 标签，我该怎么做呢？

我确实看到了关于扩展模板和使用块的说明，但我不确定这与使用布局有何关联。模板本身不应该扩展布局，对吧？或者，模板继承是否完全不需要布局？我怀疑不是，但我不确定。

另外，既然我在这里，您如何指定要使用的不同布局，或者根本不使用任何布局。目前，视图呈现如下：

res.render('templateName', { myTemplateVars : 'foo' });

【问题讨论】：

标签： javascript node.js express pug

【解决方案1】：

您要求的内容已于 3 天前发布。

http://tjholowaychuk.com/post/10695801204/jade-stylus-0-16-0-released

我个人已经使用了几个星期，并且喜欢最近添加的内容。 block 语句允许您指定默认内容，并且任何扩展模板都可以覆盖命名块。

基本上，块覆盖、包含附加和扩展选择您的父模板。

【讨论】：

好的，所以在我的例子中，布局应该有block meta，然后里面什么都没有，然后模板可以写block meta并添加它想要的任何标签？
是的，块语句可以在没有嵌套内容的情况下声明，充当内容占位符。继承模板也可以声明没有内容的块，但要注意破坏父块。
Grr... 错误的输入键 :) 因此，添加元块并在继承模板中定义元块并在该模板的块中添加您想要的任何标签。此外，删除 body 变量并使其成为在您的子模板中被覆盖的块。希望对您有所帮助。

【解决方案2】：

试试dust模板引擎。
它更有趣，对设计师更友好。
在尘土中，您可以编写 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>
                        &nbsp;&nbsp;
                    </td>
                    <td style="width: 100%; text-align: center;">made with kiss.js</td>
                    <td>{+footer_buttons}{/footer_buttons}</td>
                </tr>
            </table>
        </div>
    </div>
</body>

和view.html：

{>base.html/}
{<content}
    <h2>name: {name}</h2>
    <h3>{foo}</h3>
    {#numbers}
        <div>{.}</div>
    {/numbers}
{/content}

【讨论】：

你能粘贴你如何配置 app.js 以使用灰尘模板吗？