☰

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

tag-icon • tag-icon css node.js express ejs
.css ファイルを ejs に追加する 質問する

私は、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>

ベストアンサー1

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

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

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

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

それはできる

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

アプリのルートからパブリックフォルダにCSSファイルを置いたと仮定します。テンプレートファイル内のCSSファイルを参照する必要があります。

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

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

フォルダ構造は次のようになります

.
./app.js
./public
    /css
        /style.css

おすすめ記事