时间戳

首页 > 解决方案 > ejs 包含和部分的问题

javascript - ejs 包含和部分的问题

问题描述

我正在尝试使用 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 中，由于某些原因，css 无法正常工作，即使包含与 mainPage 完全相同。我试图查看问题是否出在 app.js 中的某些配置中，但我仍然无法解决。

标签： javascriptcssnode.jsexpressejs

解决方案

推荐阅读