EJSのレイアウト「evelo」メソッドとは何ですか？

StackOverflow https://stackoverflow.com/questions/3943188

  •  30-09-2019
  •  | 
  •  

質問

Node.js + Express + EJSから始めたばかりです。要求されたEJSファイルをレイアウトファイルに引く方法はどこにも見つかりません。

私はそれを完全に知っています yield ここでは正しいことではありません。

例えば

layout.ejs

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

index.ejs

<p>Hi</p>
役に立ちましたか？

解決

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

<%- body %>

他のヒント

ここでリグを手伝うことができると思います。私はあなたにいくつかの説明をします。

レイアウト。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）です。 「部分的な」コマンドを使用すると、Sourcodeのスニペットをロードできます。私の試験では、「Topic.ejs」は、すべてのページにとどまるはずの画像と色の私のトピック設計です（静的だと言えます）。
のsourcode topic.ejs: ：（本当にHTMLタグで、DIVで始まり、1つで終わります：p）

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

これで、すべてのページが私のトピックを実装しました。EJS（最初のsourcodeに従う場合は、表示できます）：
"<％ - partial（ 'topic.ejs'）％>"。
これは、ちょっとレイアウト！すべてのページがこの部分のコードを実装しています、それを手に入れましたか？！ -良い。

しかし、」<％-body％>「-command？理解するのは簡単です。App.jsは、<％-body％>が正確に何をするかを気にします。しかし、どうすればよいか、後で説明します。
ご存知のとおり、HTML-PAGEの最初のページには「index.html」という名前が付けられています。ここで、index.htmlも取得して、それをコンパイルする必要があります」index.ejs"。「topic.ejs」と同じ手順を使用します。Sourcodeを次のような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」である必要があります。ブラウザのアドレスバーに入力します。あなたのサイトを表示する必要があります。今これを試してみてください：

localhost：port/xyz

以前に示されているapp.get-methodeでは、app.js： "/xyz" -pathの後ろにあるapp.jsを明示します。しかし、それは正確に何を意味しますか？
これは、ブラウザのアドレスバーに「locallhost：port/xyzを入力し、primal index.htmlサイトのコンテンツを入力できるようになりましたが、表示されるのはレイアウトの生成されたコンテンツです。

背後にあるロジック：（レイアウトを見てみると、もう一度）
<％-body％>コマンドを使用すると、sourcodeのスニペットだけをレイアウトにロードします。これを行うだけです：サイトを実行した後、右クリックしてソースコードを表示します。通常のhtml-sourcecodeである必要があります。実際には、レイアウトのsourcode.ejsであり、コードのスニペットをいくつか取りました。

すべて1つ：
layout.ejsに<％-body％>コマンドを使用すると、コードのスニペットにロードできます。 <％-body％> = "index.ejs"、 "contact.ejs"など。 .ejsファイルごとに、app.jsをその「get」-methodeに拡張する必要があります（例は次のとおりです）。より多くのサイトがある場合（もちろん、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-files：onclick = "window.location.replace（ 'contact.html'）"のリンクを変更することを忘れないでください。たとえば、onclick = "window.location.replace（ 'contact'）"に変更されます。

onclick = "window.location.replace（ 'contact.html'） "onclick =" window.location.replace（'になりますコンタクト')"

ファイルではなく、URL名にリンクするだけです。 app.jsはあなたのために今これを処理します:)

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top