Express & Jade, шаблоны добавления кода в макет - PullRequest
Новая
       27

Express & Jade, шаблоны добавления кода в макет

2 голосов
/ 29 сентября 2011

Я играю на сайте Express с Node.JS

У меня есть файл макета, который, скажем, выглядит так: 

html
    title foo
body!= body

Из того, что я смог понять, выходные данные шаблона вставляются в переменную с именем body, которая добавляется в макет в третьей строке. Однако, если бы я хотел, чтобы шаблон добавил, например, тег <meta> в элемент <head>, как бы я это сделал?

Я видел объяснение расширения шаблонов и использования блоков, но я не уверен, как это связано с использованием макетов. Сами шаблоны не должны расширять макет, верно? Или же наследование шаблонов вообще устраняет необходимость в макетах? Я подозреваю, что нет, но я не уверен.

Кроме того, поскольку я здесь, как вы указываете другой макет, который будет использоваться, или если макет вообще не будет использоваться. В настоящее время представления отображаются следующим образом: 

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

Ответы [ 2 ]

3 голосов
/ 29 сентября 2011

То, что вы просите, было выпущено 3 дня назад.

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

Я лично пользуюсь им уже несколько недель и люблю последние дополнения. Оператор block позволяет указать содержимое по умолчанию, и любой шаблон расширения может переопределить именованный блок.

В основном блоки переопределяют, включают в себя append и extends, выбирают ваш родительский шаблон.

1 голос
/ 29 сентября 2011

Попробуйте Пыль Шаблонный движок.
Это гораздо интереснее и дружелюбнее по дизайну.
В пыли вы можете написать 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: 

</p>

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