この時点まで、私たちの代理人は完全に無造作に戻ってきましたが、JavaScriptは含まれていませんでした。
このビデオでは、スタイルシートやJavascriptなどのアセットをどのように含めることができるかを説明します。
また、私はParshall'sとして知られているものを使ってテンプレートをどのように枯渇させることができるかを示します。
だから始めましょう。
私は私たちのアプリを持っている過去2つのビデオのために私が使用しているのと同じアプリを使用しています。
はい、3つの主要ルートがあります。
Cの愛らしいイメージを持つテンプレートとして家をレンダリングするルートルートがあります。そしてスラッシュのものと恋をします。
私たちには、EjayがH1とPalm
それぞれのテンプレートに向かって愛を表現し、あなたが恋に落ちたことを表示し、そして私たちがそのルートに書いたものを表示します。
ステートメントをして、次に小さな段落を下にして、我々はまた、スラッシュポストルートを持っているので、ポストをレンダリングします。
J. テンプレートとして、その内部に
私たちは2つのループを持っています。
さて、いくつかのスタイルを追加したいとしましょう。
あなたが今知っているように、私は紫色が好きです。
私はすべてのボディを紫色にしたいとしましょう。すべての異なるテンプレート上のすべてのテキストの色は紫色でなければなりません。
投稿ページから始めましょう。スタイルタグを入れてスタイルの開閉をしてから、自分のスタイルをここに書いて、それと同じように紫色にして保存します。
これは実際にはスタイルを組み込む理想的な方法ではないことを覚えておいてください。私たちはリファクタリングしてすぐに改良する予定ですが、最初に理由を示しています。
体には紫色がかかっています。
サーバーノードアプリケーションを起動しましょう。
はい、ブラウザに行き、ポストのページでリフレッシュしてみましょう。紫色になっています。
私が別のルートに行くと、私は紫色にならない。
それは、それらが完全に別のテンプレートであり、スタ゗ルタグをポストテンプレートに追加しただけなのです。
だから私がすべての3つのテンプレートですべて紫色にしたいなら、私はEjay私たちと愛の同じスタイルのタグを家で別のスタイルのタグで追加することができます。
はい、私のページをリフレッシュしてサーバーを再起動して保存してください。私はここで紫色のH-1を取得します。もし私がRustyと恋に落ちるなら、そのスタイルタグから紫色のテキストも取得します。
ここには2つの大きな問題があります。
1つは、このコードが3回繰り返されるという問題です。
3つの異なるテンプレートに同じスタイルが必要な場合は、それを達成するためのより良い方法が必要です。
そこには。
そして、私たちはそれに取り組んでいきます。
私たちはスタイルタグを使用するというこの問題に取り組むことから始めます。これは良い考えではありません。
その代わりに、外部スタイルシートを使用し、そのスタイルシートにリンクタグを使用してリンクします。
だから、最初にスタイルシートを持っていないので動作しないリンクタグを書きますが、それを作成します。
だからリンクして、私たちはラウルシェルの同じスタイルシートを提供する必要があります。
そして、これは私たちのスタイルシートの名前である必要があり、我々はそれをDotと呼ぶだけです。
SSこれはPostのEだけです J. テンプレートは今すぐ保存されます。
そしてそれを作成してみましょう。
Ssはaptと同じディレクトリに作成するのを除いて同じです。Jはい、実際には、私たちが書いたすべてのスタイルシートと、必要な他のすべてのアセットを配置する別のディレクトリを作成します。私たちはそれを公開と呼びますが、名前は何でもかまいませんが、一般的ですが、このディレクトリの一般的な名前です。
C
いつ正しい場所にいるかを確認してください。
ディレクトリを公開し、公開ファイルを作成して、ここでファイルの名前を確認して保存すると、これを公開しないでください。
スラッシュアセスメント。
残念ながら、答えは「いいえ」です。
私たちはスタイルシートとjavascriptがパブリックディレクトリの中にあり、パブリックディレクトリを提供してファイル名を使用するだけでリンクすることができるようにSSが表現するようにSSを残しますそれをほんの一瞬で見せてください。
SSファイルを参照してスタイルを追加するパブリックスラッシュアプ​​リを開きましょう。
違うことをしよう。
体や背景をします。
それは恐ろしいことになるだろう。
我々は黄色と色がまだ紫色の背景を行うだろう。
それで、ここで私達はここで終わることができると定義した本当に総体的なスタイルを持っているので、それが動作しているかどうかわかります。
この投稿があれば J.
テンプレートが紫色のテキストではっきりとした黄色い背景で表示されますが、それはすぐには機能しませんが、私はあなた自身でそれを見ることができます。
だからNoad apt。
J. S. 私たちは戻ってページをリフレッシュし、ポストページに行く必要があり、私たちは何も取得しません。
私がここで領事館を開くと、私は研究を読み込めなかったというエラーが出ます。
サーバーは404の状態に応答し、うまくいくことはありませんでした。
そして、この理由はかなり簡単です。
Webアプリケーションを作成し、Expressを使用してWebサーバーを開始すると、Webサーバーが開始するとわからないすべてのファイルが自動的に配信されるだけではありません。
そして、デフォルトでは何も提供しないことです。
viewsディレクトリとは別に。
だから明示する必要があるものが他にも必要な場合は、私のパブリックディレクトリまたは他の取締役に奉仕する必要があります。
私たちはそれをするために急行する必要があり、可能性が高い表現は私たちの行為の中でそれを行うための簡単な方法を提供します。
はい、私は使用するアプリを追加してからカッコで追加します。
EXPRESS静的です。
そして、カッコ内に再び、私たちのディレクトリの名前であるpublicという単語があります。
そして、これは公共のディレクトリの内容を提供するために明示されます。
そして今、私のサーバーを再起動してページをリフレッシュして領事館を閉じると、私たちは黄色の背景と紫色のフォントを取得し、議会で何の誤りもありません。
これらのスタイルシートを他のページに含めるには、このリンクタグをコピーして上に置くだけです。
もちろん、複数のスタイルシートを用意しておきたい場合は、別の名前を付けて、それらが公開ディレクトリにあることを確認してリンクすることもできます。
私たちがParshallに移る前に、コードを少し短くして、それぞれのE.
J. はい、愛されました。
E. J. E.を投稿しました J.
はい、これは本当にマイナーですが、実際にEjayを使用する予定であることを明示することができます。これらを残してそのまま書き込んで進化させると、ファイルがEjazファイルであると自動的に予想されます。
これを行うには、appデータセットビューエンジンを使用して、2番目の引数をEとして渡します。 J.
ちょうどそれのように。
そしてサーバを再起動して保存すると、それらのファイルがEjazファイルであることが期待されます。
リフレッシュすれば
何も変わるべきではありません。
それでも動作します。
そして今、我々は明示的にEjayと言う必要はありません。
それは非常に小さな変化です。
次に私があなたに見せたいことは、もう少し重要なことです。それは、私たちがテンプレートを乾燥させる助けになるでしょう。
今、私たちはこのスタイルシートを持っています。
このスタイルシートへのリンクは、すべてのテンプレートで繰り返されていますが、ボイラープレート全体が私たちが欠けている重要なものがあります。
ここにダクトテープがありません。
Andrewの行方不明者は彼の古いタグと、私たちが頭と頭の内側を期待するすべての規則的な定型文を老化させます。
タイトルが必要なので、アプリにタイトルを付けます。
それをデモアプリと呼んで、体を必要とします。
そして、体の中にこのコンテンツを入れて、それから他のすべてのファイルでまったく同じことをする必要があります。
それは時間の無駄だから、私はそれをやろうとはしません。このコードをコピーして、この単一のリンクタグをコピーする必要がないように、すべての単一のテンプレートに置く必要のない簡単なソリューションがありますそれをすべての単一テンプレートにも置きます。
ParshallとParshallは基本的にはファイルテンプレートで、他のテンプレートに含めることができます。このようなテンプレートが作成されます。
だから、私たちはボイラープレートの上半分をすべて頭に入れます。
これは、特定のサイトで作成するすべてのページでほぼ同じになります。
同じスタイルシートの同じタイトル。
だから、これを独自のテンプレートにするだけです。
そして最後に、ここで独自のテンプレートを作成します。
そして、2人の間には、私たちがどんなテンプレートを使っているのか、現在のページに応じて変化する私たちのコンテンツがあります。
ですから、基本的にこれを独自のテンプレートに変えていくことになります。
これを独自のテンプレートにして、これらのファイルのそれぞれで参照するテンプレートを使用します。
だから私たちは何かを言うだろうそしてこれは有効なコードではありませんが、我々はヘッダーのインクルードのようなものを行い、そして底部はフッターを除いて同じことをするでしょう。
だから私たちはそれらのテンプレートやParshallを作成する必要があり、そのためにはビューの代わりに新しいディレクトリを作成し、そのディレクトリParshall'sを呼び出します。
だから、私たちはディレクトリビューをParshallのようにスラッシュさせるようにします。
そして、Parshallの代わりに2つのファイルを作成し、最初のものはParshallのスラッシュヘッターを使用して、私たちはそれぞれ、そして我々はフッターを除いて全く同じ別の部分を作るでしょう、そしてあなたはこれらをトップとボトムのように呼ぶこともできます最初と2番目にあなたがそれらを呼び出すが、ヘッダーとフッターは間違いなく標準の名前です。
だから、私はそれらの2つのファイルを作って、私はそれらを開いて今度は学校のここで開いてヘッダーを開き、この定型文をコピーしてそれを切り取って、これをヘッダ。
だからこれは私たちがすべてのページの最上部で欲しいものです。そして、フッターの代わりに、私たちが本当に望むのは、テンプレートとクローズチームのタグだけであるテンプレートの一番下です。
ちょうどそれのように。
私たちが他のものを求めていたら。
だからもう少し明白なことをします。
一番下の段落に、商標やウェブサイト上に表示される他のフッターテキストなどを記載しましょう。
私たちはそれをそのまま残します。
そして、我々はフッタを含むすべてのページでこれを見ることが期待されます。
部分的。
OK。
したがって、2つの部分的な処理が行われます。
それらを閉じます。
このように修正してください。
すべて保存してください。
そして今、我々は部分的なものを含めることを望みます。
だから私たちの愛から始めましょう。
私たち一人一人に、そのヘッダーの部分を含めます。
だから、Ejayで新しいタグを使う必要があります。
そして、ちょうどhetterであるファイルの名前とそれはすでにEjazファイルを探しているので、我々はそのEjayを追加する必要はありません。
ヘッダーを含めるだけです。これは実際にはうまくいきません。その理由を表示します。
フッタもここに入れてみましょう。
私がサーバーを起動した場合、ここでスペースを空けてからノードをクリアするようにしてください。
Apogeeはい。
あなたがページをリフレッシュすると、これはラブストーリーJにのみ含まれます。 S. テンプレート。
だから私たちはスラッシュに行く必要があります。
restiと恋に落ちると、エラーが発生します。
そのようなファイル、又はディレクトリはありません。
はいデモスラッシュビュースラッシュヘッター。
E. J. はい。
これは私たちに2つのことを教えてくれます。
1つは、それがEjazファイルであることがわかっています。
ヘッダーを探しています。
はい、それはユーザーディレクトリで直接探しています。
しかし、私たちはParshallのスラッシュの異端のEjayを見下ろして見たいと思っています。
だからここで少し変更する必要があり、ParshallのスラッシュHetterとParshallのスラッシュフッターを言うために変更する必要があります。
しかし、それはまだそれを修正するつもりはありません。
そしてもう一度これをやり直すと何が起こるかをもう一度見せてくれるでしょう。
要素に行くと、フッターが底に表示され、体を持っていることがわかります。
また、タグを閉じるたびにスタイルは適用されません。
それは紫色と黄色でなければならず、単なる白黒です。
頭の中を見るとリンクタグがあり、apcupsdというファイルにリンクしています。
SSしかし、これは動作していません。
そして、ソースタブを見ると、返されたこのRustieファイルがあることがわかります。ヘッダーがあり、メインのコンテンツがあり、フッターもあります。
これは、一つの組み立てられたファイルのようなものです。
それで、私たちは3つのParshall'sまたは2つのParshall's
Plusの内容でこのファイルを作成し、これを送り返します。
そして、このACT-UPには、それが完全に空であるということもあります。
APS-Cが正しく評価されていないことにつながっているということです。
だからちょうど空のファイルとして表示されていて、本当に簡単な修正ですが、ここにスラッシュを追加するだけです。
パスの重要性を示し、パスが正しく設定されていることを確認するという理由で、すべての作業を完了しました。
したがって、ACT-UPの成功とスラッシュを追加した後のスラッシュには違いがあります。
基本的には、あなたが現在いるのと同じディレクトリではなく、ルートディレクトリにあると私たちは見ています。
私はあなたに良いイラストを見せることができます。
今、このRustiテンプレートと同じディレクトリで成功を狙っています。
今すぐスラッシュで保存してサーバーを再起動すると、ここに戻り、今更新します。
見てみましょう。
私たちのスタイルは機能します。
また、私たちがファイルを持っていることに気がついたら、同じディレクトリにないSSのSSを入手しました.SSは適切なスタイルを持っています。つまり、見つけたファイルが見つかったということです。
だからスラッシュは非常にマイナーなようだが、それは実際には重要な詳細だ。
だから私たちのスタイルシートの名前は、パブリックディレクトリ内の何かをスラッシュしてください。
最終的にはスラッシュスタイルシートのように見えますが、ACT-UPは評価を見てからスクリプトのタグをつけて、スクリプトをスラッシュしてmayntをスローします。
はい。
そして、私たちはパブリックディレクトリのスクリプトディレクトリとスタイルシートディレクトリの中に持っていきます。
今のところ、1つのスタイルシートしか持っていないので、このままにしておきます。
すぐに完成して、部分ファイルを他のファイルにも追加しましょう。
だから私たちの家では、私たち一人一人が払うことになり、一番下には膨らみがあり、それをフッターに変えて保存し、それを掲示します。
はい。
同じこと。
ヘッダーとフッターが必要です。
それをすべてのファイルでも取り除く。
Parshallのスラッシュフッター。
そして、それは私たちのために良いはずです。
サーバーをここで再起動してみましょう。これは同じように見えます。
右の道に行くとスタイルも手に入り、スラッシュポストに行くとそこにもスタイルがあります。
大丈夫。
だから、これをすべて要約しましょう。
私たちが最初にしたことの1つは、パブリックディレクトリを作成し、その内部にスタイルシートを追加することでした。そのためには、エクスプレスにパブリックディレクトリを提供するように指示する必要がありました。
その後、私たちがそれをした後、私たちは、特に明記しない限り、すべてのテンプレートがyesになることを明示するような小さな変更を行いました。
したがって、すべてのテンプレート名の後にそれぞれYesを書く必要はありません。
そして、大きな変化はParshall'sを導入したことでした。
そこで私たちはParshallという名前のディレクトリを作成しました。
Parshallのレイアウトはとても一般的です。
そして、2つのファイルやヘッダーとフッターがありましたが、その全体のポイントは、私たちのコードを一掃して、すべての単一のテンプレートにこれを追加する必要はありませんでした。
代わりに私たちのテンプレートに行くと、私たちがしなければならないのは、Parshallのスラッシュヘッターを書いているだけです。すべてのページにナビゲーションバーがあれば、ヘッダーとフッターに限定されません。
私たちは、古いパシュールのスラッシュ・ネフを含むという別の部分を持つことができました。
だから私たちができることとできないことには何のルールもありません。
しかし、最も一般的なのはヘッダーとフッターです。
それだけです