不閱讀 CSS - Express ejs 布局

Question

我正在使用 express ejs 布局，但只有 mainPage 可以讀取 css 其他頁面不讀取它（css，html 讀取它）。

另一個問題，如果我想使用另一種布局（例如：layout2.ejs），我將如何處理特定頁面。

樹：

項目
- 上市
- js
- css
- style.css
- 路線
- index.js
- 用戶.js
- 意見
- 布局.ejs
- mainPage.ejs
- 登錄.ejs
...
- 應用程序.js

如果您需要知道，我正在使用particles.js。

應用程序.js

const express = require('express');
const expL = require('express-ejs-layouts');

const app = express(); //Create a Web Application


//EJS
app.use(expL);
app.set('view engine', 'ejs')

//Routes
app.use('/', require('./routes/index'));
app.use('/users', require('./routes/users'));


app.listen(3000, ()=> console.log('Listening at 3000'));
app.use(express.static('public'))

index.js

const express = require('express');
const router = express.Router();

router.get('/',(req, res) => {
    res.render('mainPage',{title: 'Groupy'}); (THIS ONE WORK AND READ THE CSS)
});

module.exports = router;

用戶.js

const express = require('express');
const router = express.Router();

//Login Page
router.get('/login',function(req, res) { 
    res.render('login',{title: 'Groupy Login'}); (DON'T READ CSS)
});

//Register Page
router.get('/register',function(req, res) {
    res.render('register',{title: 'Groupy Register'}); (DON'T READ CSS)
});

module.exports = router;

布局.ejs

<html>
<head>
    <script type="text/javascript" src="code.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    </script>

    <title><%= title %></title>

</head>
<body>
    <div id="particles-js"> </div>
    <script src="js/particles.min.js"></script>
    <script src="js/app.js"></script>
    <h2>teste</h2>
    <%- body %> 
</body>

主頁面.ejs

<h1 id="title">Groupy</h1>
    <div id="firstBox">
        <div id="SignIn"><a href="/users/register">Register </a><div id="login"><a href="/users/login">Login</a></div>
        </div>
    </div>
    <br>
   <div id="mainBox"></div>

登錄.ejs

<h1 id="title">Groupy Login</h1>

登錄結果（無 CSS）：
睾丸
群聊登錄

Answer 1

您可以嘗試以下 app.use 而不是app.use(express.static('public'))

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

你也應該導入路徑模塊

const path = require('path');

Answer 2

錯誤是 css 和 javascript (particles.js) 的路徑

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

<script src="/js/particles.min.js"></script>   
<script src="/js/app.js"></script>

不閱讀 CSS - Express ejs 布局

問題描述

如果您需要知道，我正在使用particles.js。

2 個解決方案

解決方案1
0 2020-05-29 21:15:15

解決方案2
0 已采納 2020-06-09 23:14:16

不閱讀 CSS - Express ejs 布局

問題描述

如果您需要知道，我正在使用particles.js。

2 個解決方案

解決方案1 0 2020-05-29 21:15:15

解決方案2 0 已采納 2020-06-09 23:14:16

解決方案1
0 2020-05-29 21:15:15

解決方案2
0 已采納 2020-06-09 23:14:16