19

テンプレート用のnode、express、ejsを備えたシンプルなサーバーを作成しようとしています。サーバーがページをポイントしてロードし、includeステートメントを使用して他のコードを生成することもできます。ただし、何らかの理由でスタイルシートが読み込まれません。

app.js

var express = require('express'),
app = express(),
http = require('http'),
server = http.createServer(app),
fs = require('fs');

var PORT = 8080; 

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

app.get('/', function(req, res){
res.render('board.ejs', {
    title: "anything I want",
    taco: "hello world",
    something: "foo bar",
    layout: false
  });
});


app.listen(PORT);
console.log("Server working");

ejsファイルはディレクトリviews/board.ejsにあります

<html>
 <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='../styles/style.css' />
 </head>
 <body >
    <h1> <%= taco %> </h1>
    <p> <%=  something %> </p>
 </body>
</html>

そしてstyle.cssはapp.jsに関連するstyles/style.cssディレクトリにあります

p {
  color:red;
}

私は、ローカルホストがboard.ejsを基準にしたapp.jsを基準に、さらにはstyle.cssを基準にした場所を含め、リンクのhrefについて考えられるすべてのパスを試しましたが、どれも機能していないようです。どんな提案でも大歓迎です。

4

5 に答える 5

50

静的ディレクトリを宣言します。

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

<link rel='stylesheet' href='/style.css' />
于 2012-11-21T06:03:08.637 に答える
12

app.jsで：

 you must first declare static directory 

app.use("/styles",express.static(__dirname + "/styles"));

ejsファイル内：

<link rel='stylesheet' href='/styles/style.css' />
于 2013-06-24T01:51:04.463 に答える
0

最近、私はこれと同じことを扱っていましたが、CSSが機能していませんでした。最後に、私はトリックを取得します。私の静的パスは次のようになりました、

const app = express();
const publicDirectoryPath = path.join(__dirname, '../src/public');
const staticDirectory =  express.static(publicDirectoryPath);
app.use(staticDirectory);

私のフォルダ構造は次のようなものでした

ここに画像の説明を入力してください

秘訣は、エクスプレスアクセスのみが定義された静的パスであるということです。私の場合、CSSはパブリックの外部にあったため、機能していませんでした。突然、CSSフォルダーをパブリックフォルダー内に移動しました。美しく動作します。

上記の例は、1つの静的パスのみを対象としています。複数の静的パスの場合、以下のコードを使用できます

const app = express();
const publicDirectoryPath = path.join(__dirname, '../src/public');
const cssDirectoryPath = path.join(__dirname, '../src/css');
const staticDirectory =  express.static(publicDirectoryPath);
const cssDirectory =  express.static(cssDirectoryPath);


app.use(staticDirectory);
app.use('/css/',cssDirectory);

そして私の一般的なHTMLファイルは

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <link rel="stylesheet"  href="../css/styles.css">
</head>
<body>
<h1>this is index page</h1>
</body>
</html>
于 2019-09-19T09:42:43.450 に答える
0

css、imgなどのアプリケーション依存関係のエントリポイントを設定するには、以下の行をserver.js（または使用されているもの）に追加します。

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

これは、server.jsが存在する現在のディレクトリからcssファイルを取得するように指示します。したがって、htmlファイルでcssの相対パスを定義できます。

于 2020-02-25T02:22:29.190 に答える
0

Express 4では、app.jsファイル内で以下を使用してこれを簡単に設定できます。

app.use('/static', express.static(path.join(__dirname,'pub')));

require定数を作成し、エクスプレスアプリを宣言した後、これをファイルの早い段階に配置します。

パスオブジェクトを使用して静的ディレクトリを宣言することで、すべてのフロントエンドリソースを利用できる場所を確保できます。また、プロジェクト内に表示される物理名（/ pub）の代わりに、サイトの前面で使用できる仮想ディレクトリ名（/ static）も付与されます。

テンプレートでは、頭の中でこのようなことを行うことができます

    <link rel="stylesheet" href="/static/css_bundle.css"/>
于 2021-02-23T23:18:15.243 に答える