ejs 包含和部分的问题

Question

我正在尝试使用 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>

登录页面.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中，尽管包含内容与mainPage完全相同，但由于某种原因，CSS无法正常工作。我尝试查看问题是否出在 app.js 中的某些配置中，但仍然无法解决。

Answer 1

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

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

Answer 2

尝试将登录页面变成 ejs 页眉，将注册页面变成页脚：

<%- include("headerfile") %>
<!-- Your view-specific code goes here -->
<%- include("footerfile") %>

确保在 JavaScript 中提供静态文件（.css、.js），如下所示： app.use(express.static('public')); // 链接到您的静态文件（如 CSS 和 JS）

然后，在 header.ejs 部分中，您可以像这样链接样式：

<head>
<link rel="stylesheet" href="/css/styles.css">
<title>Portfolio</title>
</head>

-和-

不要忘记路线：

app.get("/header", (req, res) => {
res.render("header"); // Render about.ejs
});

ejs 包含和部分的问题

问题描述投票：0回答：2

2个回答

最新问题

ejs 包含和部分的问题

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2