5

node.js、express、ejs を使い始めたばかりです。そして、layout.ejs ファイルに苦労しています。私がやろうとしているのは、複数のコンテンツ プレースホルダーがある .net でできることと似たようなことです。ビューでは、さまざまなプレースホルダーに入る複数のブロックを使用できます。

このようなもの：

<!DOCTYPE html>
<html>
    <head>
         <title><%- title %></title>
    </head>
    <body>
        <%- body %>
    </body>
</html>

ビューはどのように表示されますか?

4

2 に答える 2

6

特定のレイアウト ファイルに対して、次を含む my_body.ejs ファイルを作成できます。

<% title = 'My Page – My Site' %>
<p>The body content could go there</p>

これは以下をレンダリングします:

<!DOCTYPE html>
<html>
    <head>
         <title>My Page – My Site</title>
    </head>
    <body>
         <p>The body content could go there</p>
    </body>
</html>

より複雑なヘッダーの場合、パーシャルを使用することもできます:

my_body.ejs:

<% header = partial('_header.ejs') %>
<p>The body content could go there</p>

_header.ejs:

<h1>My Page Title</h1>

レイアウト.ejs:

<!DOCTYPE html>
<html>
    <head>
         <title>My Page – My Site</title>
    </head>
    <body>
         <div id="header"><%- header %></div>
         <div id="content"><%- body %></div>
    </body>
</html>
于 2011-03-17T21:47:53.890 に答える
1

それ以外の

<!DOCTYPE html>
<html>
    <head>
         <title>My Page – My Site</title>
    </head>
    <body>
         <div id="header"><%- header %></div>
         <div id="content"><%- body %></div>
    </body>
</html>

あなたが使用できる

<!DOCTYPE html>
<head>
<title><%= title%></title>
</head    
<html>
    <%- partial('header.ejs') %>

    <%- body %>
</html>

このコードは、layout.ejs

の <%- body %> タグを " app.js " で get-method として定義する必要があります。

app.get('/index', function(req, res){
    res.render('index.ejs', { title: 'My Site'});
});

これで、index.html("index.ejs") を "localhost:PORT/index"(デフォルト ポート: 3000) (ブラウザのアドレス バーに入力) でルーティングできます。"app.js" は、 index.ejs を実行し、コード全体を生成します。 <%- partial('header.ejs') %>

を 使用すると、コードのスニペットを読み込むことができます。ヘッダーは通常、すべてのサイトにロードする必要があります (ヘッダーはこのように静的です)。 次に、すべての.ejs-filesを変更する必要がありますが、layout.ejs. これの意味は：

index.ejs ファイルには、html タグのみが含まれています。ただし、タイトルや Doctype などはありません...「本文」のすべてのタグ (<"body"> から </"/body"> まで) だけです。

= あなたの index.ejs ファイル:

<div>
...
</div>
于 2012-06-04T12:29:13.827 に答える