ejs 包含和部分的问题答案

【问题标题】：problems with ejs includes and partialsejs 包含和部分的问题
【发布时间】：2021-04-28 04:31:33
【问题描述】：

我正在尝试使用 ejs 进行动态包含，但我的 css 仅在主页 (mainPage.ejs) 上有效，而在登录页面 (loginPage.ejs) 上无效。我的文件夹组织如下：

app.js 下面

require('dotenv').config();
const express = require('express');
const app = express();
const path = require('path');
const mongoose = require('mongoose');
const helmet = require('helmet');
const routes = require('./src/routes/routes');

mongoose.connect(process.env.DATABASE_KEY, {useNewUrlParser: true, useUnifiedTopology: true})
    .then(() => {
        console.log('Connected to the database');
        app.emit('ready');
    })
    .catch((err) => console.log(err));

//app.use(helmet());
app.use(express.urlencoded({ extended: true}));
app.use(express.json());

app.set('views', './src/views');
app.use(express.static('public'));
app.set('view engine', 'ejs');

app.use(routes);

app.on('ready', () => {
    app.listen(3000);
})

这是我的头.ejs

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
            integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
        <link rel="stylesheet" href="css/style.css"/>
        <title>Home</title>
    </head>
    
    <body>

loginPage.ejs

<%- include('./includes/head')%>
<div class="test">
    don´t work
</div>
<%- include('includes/footer')%>

正如我所说，css 仅在 mainPage.ejs 上工作，其中包含的导入如下：

<%- include('./includes/head')%>
  ...html
<%- include('includes/footer')%>

在 loginPage.ejs 中，由于某些原因，css 无法正常工作，即使包含与 mainPage 完全相同。我试着看看是不是app.js中的一些配置有问题，但还是解决不了。

【问题讨论】：

包含代码，不要使用截图
请在loginPage.ejs 中显示包含head.ejs 的相关行（作为代码，而不是屏幕截图）。这应该与数据库或服务器设置无关。只是你自己的风格没有出现，还是引导？如果只是您自己的，请尝试在css/style.css 之前放置一个/ 以使其成为绝对网址
谢谢你，我的朋友，把 / 放在 css/style.css 工作之前。

标签： javascript css node.js express ejs

【解决方案1】：

我最近遇到了类似的问题。如果有人还在为此苦苦挣扎。我就是这样解决的：

将视图和 css 放在一个文件夹中。在您的情况下，您可以将 src 文件夹放在 public 文件夹中。
然后在 app.js 中更改 -> app.set('views', './src/views'); -> app.set('views', './public/src/views');
分别调整应用中的 css 和其他路径。

【讨论】：