ejs için

eklenir .css dosyası ejs ile node.js (ekspres) üzerinde çalışıp bir .css dosyası ekleyemiyorum. Aynı şeyi ayrı ayrı bir html-css duo olarak denedi ve iyi çalıştı. .. aynı benim .ejs dosyasında aynı içerebilir.ejs için

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);

ve index.ejs dosyası:: My app.js böylece gider

<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 dosyası:

<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>

kaynak

2013-09-05 user-S

CSS dosyanızdaki stil etiketlerini kullanmamalısınız ve css ve diğer varlıklarınıza hizmet veren express içeren rotalar oluşturmanız gerekebilir. –

Senin sorunun Ejs aslında özgü değildir.

2 şey harici css dosyası burada

style.css nota. Yani bu dosya içinde stil etiketlerine ihtiyacın yok. Sadece css içermelidir.

Ekspres uygulamanızda, statik dosyaları sunmakta olduğunuz genel dizinden söz etmeniz gerekir. css/js/görüntü gibi

Eğer uygulama kök ortak klasör içinde css dosyalarını koymak varsayarak

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

yapılabilir. şimdi ben size kamu klasörünün içindeki css klasöründeki css dosyasını koyduk varsayalım İşte
<link href="/css/style.css" rel="stylesheet" type="text/css">

gibi, tamplate dosyalarında css dosyalarına bakın gerekiyor.

Yani klasör yapısı olacağını

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

kaynak

2013-09-05 10:25:33 mithunsatheesh

-1

app.use(express.static(__dirname + '/public'));<link href="/css/style.css" rel="stylesheet" type="text/css">

Yani klasör yapısı olmalıdır:

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

kaynak

2017-07-20 13:34:54 Riyan

Şablon

bu koymak bu

 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 
     }); 
    });

kullanabilirsiniz

<%- myCss.style %>

sadece style.css

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

inşa Bazı özel css için bu deneyin. Benim için çalışır

kaynak

2017-10-07 10:54:58

cevap

İlgili konular