26

node.js + Express + ejs から始めたばかりです。要求された ejs ファイルをレイアウト ファイルに取り込む方法がどこにも見つかりません。

私はそれyieldがここで正しいことではないことをよく知っています。

例えば

レイアウト.ejs

<html>
<head><title>EJS Layout</title></head>
<body>
    <%= yield %>
</body>
</html>

index.ejs

<p>Hi</p>
4

2 に答える 2

42

最後に、エクスプレス アプリのソース コードをいくつか見つけました。

<%- body %>
于 2010-10-15T14:35:55.323 に答える
13

私はここであなたを助けることができると思います。私はあなたにいくつかの説明をします。

layout.ejs は、コードのスニペットから構築された HTML サイトに必要なレイアウトです :)。

私のlayout.ejsは次のようになります:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <title><%- title %></title>
    <link rel="stylesheet" type="text/css" href="stylesheets/style.css">
</head>

<body>
    <!-- total container -->
    <header>

        <%- partial('topic.ejs') %>

        <%- body %>
     </header>
</body>
</html>

コードの説明をします。「ヘッダー」タグは、すべてのコンテンツを含むラッパー (800x600) です。「partial」コマンドを使用すると、ソースコードのスニペットをロードできます。私の例では、「topic.ejs」は、すべてのページにとどまる必要がある画像と色を使用したトピック デザインです (静的であると言えます)。
topic.ejs のソースコード: (これは実際には単なる html タグであり、div で始まり、:P で終わります)

<!-- frame of topic -->
<div id="topic">
    ...
</div> <!-- end of "topic" -->

これで、すべてのページに topic.ejs が実装されました (最初のソースコードをたどると、それがわかります):
"<%- partial('topic.ejs') %>".
これは、次のことを意味します。すべてのページにこの部分的なコードが実装されていますね! -良い。

しかし、" <%- body %> " コマンドはどうでしょうか? も分かりやすいです。app.js は <%- body %> が正確に何をするかを気にします。しかし、それがどのように機能するかは、後で説明します。
ご存じのとおり、HTML ページの最初のページの名前は「index.html」です。ここで、 index.html も取得して " index.ejs " にコンパイルする必要があります。「topic.ejs」と同様の手順で行います。ソースコードを次のような html タグに減らします。

<!-- frame of MetaContent -->
<div id="metacontent">
    ...
</div> <!-- end of "MetaContent" -->


ここから、私のapp.jsを見てください:

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

説明: xyz はランダムな名前です。自分で選択してください。この名前が今あなたの URL です。わからない？以下の例を見てください。app.js を実行してサーバーを起動すると、サーバーは特定のポート (デフォルトは 3000 だと思います) で実行されます。index.html の通常の URL は "localhost:3000/index.html" です。ブラウザのアドレスバーに入力してください。あなたのサイトが表示されるはずです。これを試してください：

ローカルホスト:PORT/xyz

前に示した app.get-methode では、app.js を明示的に指定します。「/xyz」パスの後ろに「index.ejs」ファイルがあります。しかし、それは正確には何を意味するのでしょうか?
つまり、ブラウザのアドレス バーに「locallhost:PORT/xyz」と入力すると、primal index.html サイトのコンテンツが表示されますが、表示されるのは、生成された layout.ejs のコンテンツです

。背後にあるロジック: (layout.ejs をもう一度見てみると)
With the <%- body %> command you load into your layout just a snippet of sourcecode. Just do this: サイトを実行した後、右クリックして、ソースコードを表示させてください. これは通常の HTML ソースコードである必要があります. 実際には, あなたのコードのいくつかのスニペットを取った, あなたの layout.ejs のソースコードです.

オールインワン:
layout.ejs で <%- body %> コマンドを使用すると、コードのスニペットを読み込むことができます。<%- body %> = "index.ejs"、"contact.ejs" など。すべての .ejs ファイルについて、app.js をその "get" メソッドに拡張する必要があります (例は次のとおりです)。複数のサイトがある場合 (もちろん、サイトが 1 つだけではありません)、新しいサイトのコードのスニペットを .ejs ファイルに入れる必要があります (例: contact.html => contact.ejs)。app.js ファイルを次のように拡張する必要もあります。

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

また

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


そして、.ejs ファイルのリンクを変更することを忘れないでください: onclick="window.location.replace('contact.html')" は、app.get-methode で選択した名前になります。たとえば、onclick="window.location.replace('contact')" に変更します。

onclick="window.location.replace(' contact.html ' )" は onclick="window.location.replace(' contact ')"になります

ファイルではなく、URL 名にリンクするだけです。App.js がこれを処理します :)

于 2012-05-31T12:00:46.057 に答える