40

私はejsを使用してnode.js（express）に取り組んでおり、.cssファイルを含めることができません.html-cssデュオと同じことを別々に試してみましたが、うまくいきました...どうすれば同じものを含めることができますか私の .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>
4

6 に答える 6

152

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

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

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

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

それはによって行うことができます

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

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

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

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

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

.
./app.js
./public
    /css
        /style.css
于 2013-09-05T10:25:33.810 に答える
0

ご覧のとおり、express.jsでEJSを使用しています

  • まず、EJS を追加するより良い方法があります。

     app.set("view engine", "ejs");

    そのためには、ファイル構造は次のようにする必要があります

     .
 ./app.js
 ./view
     /index.ejs

  • また、EJS ファイルに CSS を追加するには、CSS、JS、画像などの静的ファイルを提供できる「パブリック」フォルダー (または他の名前、名前は関係ありません) を使用する必要があります。

    それにアクセスするには、次を使用できます

     app.use(express.static("public"));  //better and newer way than first answer

    そしてあなたのEJSファイルです。あなたのCSSをリンクすることができます

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

    ここでは、CSS ファイルを public フォルダー内の CSS フォルダーに配置すると想定しています。

    したがって、ファイル構造は次のようになります

     .
 ./app.js
 ./public
     /css
         /style.css
 ./view
     /index.ejs
于 2021-08-06T18:58:52.453 に答える