web-dev-qa-db-ja.com

.cssファイルをejsに追加する

ejsを使用してnode.js（express）で作業していて、.cssファイルを含めることができないim。私の.ejsファイル。私のapp.jsはこうなります：

var express = require('express');
var app = express();

app.set('views', __dirname + '/views');


app.get('/', function(req, res){
  res.render('index.ejs', {
        title: 'My Site',
    nav: ['Home','About','Contact'] 
  });
});

app.get('/home', function(req, res){
  res.render('index.ejs', {
        title: 'My Site',
    nav: ['Home','About','Contact'] 
  });
});

app.get('/about', function(req, res){
  res.render('about.ejs', {
    title: 'About',
     nav: ['Home','About','Contact']
  });
});

app.get('/contact', function(req, res){
  res.render('contact.ejs', {
    title: 'Contact',
     nav: ['Home','About','Contact']
  });
});


app.listen(3000);

およびindex.ejsファイル：

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">

</head>
<body>
<div>
    <h1> <%= title %> </h1>
    <ul>
<% for (var i=0; i<nav.length;i++) {%>

<li><a href="/<%=nav[i]%>"> <%=nav[i]%> </a></li>
   &nbsp;  
<% } %>
   </ul>
</div>

<br>
<h3>Node.js</h3>
<p class='just'>Express is agnostic as to which templating language you use. Templating languages can be a hot topic of debate.Here Iam going to use Jade.</p>
<p class ='just'>Again Express is agnostic to what you use to generate your CSS-you can use Vanilla CSS but for this example I'm using Stylus.
</p>
<footer>
Running on node with express and ejs
</footer>
</home>
</html>

style.cssファイル：

<style type="text/css">
body { background-color: #D8D8D8;color: #444;}
h1 {font-weight: bold;text-align: center;}
header { padding: 50px 10px; color: #fff; font-size :15px; text-align:right;}
 p { margin-bottom :20px;  margin-left: 20px;}
 footer {text-decoration: overline; margin-top: 300px}
 div { width:100%; background:#99CC00;position:static; top:0;left:0;}
 .just
 {
    text-align: center; 

 }
a:link {color:#FF0000;}    /* unvisited link */
a:visited {color:#0B614B;} /* visited link */
a:hover {color:#B4045F;}   /* mouse over link */
a:active {color:#0000FF;}

  ul { list-style-type:none; margin:0; padding:0;text-align: right; }
li { display:inline; }
</style>
cssnode.jsexpressejs
17
user-S

問題は実際にはejsに固有のものではありません。

ここで注意すべき2つのこと

  1. style.cssは外部cssファイルです。そのため、そのファイル内にスタイルタグは必要ありません。 CSSのみを含める必要があります。

  2. エクスプレスアプリでは、静的ファイルを提供する公開ディレクトリを指定する必要があります。 css/js/imageのように

それができる

app.use(express.static(__dirname + '/public'));

アプリのルートからパブリックフォルダーにcssファイルを配置すると仮定します。次のように、tamplateファイルのcssファイルを参照する必要があります

<link href="/css/style.css" rel="stylesheet" type="text/css">

ここでは、パブリックフォルダー内のcssフォルダーにcssファイルを配置したと仮定します。

したがって、フォルダ構造は

.
./app.js
./public
    /css
        /style.css
88
mithunsatheesh

これを使用できます

     var fs = require('fs');
     var myCss = {
         style : fs.readFileSync('./style.css','utf8');
     };

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

これをテンプレートに入れます

   <%- myCss.style %>

style.cssをビルドするだけです

  <style>
    body { 
     background-color: #D8D8D8;
     color: #444;
   }
  </style>

これをいくつかのカスタムcssで試します。わたしにはできる

7
John Papa

エクスプレスアプリで静的なCSSファイルを提供するには（つまり、cssスタイルファイルを使用して、エクスプレスアプリでejs "テンプレート"ファイルをスタイルします）。実行する必要がある簡単な3つのステップを次に示します。

  1. 「styles.css」というcssファイルを「assets」というフォルダーに配置し、assetフォルダーを「public」というフォルダーに配置します。したがって、cssファイルへの相対パスは「/public/assets/styles.css」である必要があります

  2. 各ejsファイルの先頭で、次のコードに示すように、_<link href=… />_を使用してcssファイルを呼び出すだけです（通常のhtmlファイルで行うように）。以下のコードをコピーして、ejsファイル_<head>_セクションに直接貼り付けてください。

    _<link href= "/public/assets/styles.css" rel="stylesheet" type="text/css" />
_

  3. Server.jsファイルでは、app.use()ミドルウェアを使用する必要があります。ミドルウェアは、要求と応答の操作の間で実行される操作またはコードを指す用語にすぎないことに注意してください。メソッドをミドルウェアに配置することにより、そのメソッドは、要求メソッドと応答メソッドの間で自動的にeverytimeと呼ばれます。 app.use()ミドルウェアで静的ファイル（cssファイルなど）を提供するために、express.static()と呼ばれるexpressが提供する関数/メソッドが既にあります。最後に、プログラムが応答し、静的フォルダーからファイルを提供する要求ルートも指定する必要がありますeverytimeミドルウェアが呼び出されます。あなたはパブリックフォルダにCSSファイルを配置するので。 server.jsファイルに、次のコードがあることを確認してください。

    _// using app.use to serve up static CSS files in public/assets/ folder when /public link is called in ejs files
// app.use("/route", express.static("foldername"));
app.use('/public', express.static('public'));
_

これらの簡単な3つのステップを実行した後、res.render('ejsfile')メソッドでapp.get()を呼び出すたびに、CSSスタイルが呼び出されていることが自動的にわかります。ブラウザでルートにアクセスしてテストできます。

3
Kean Amaral