时间戳

首页 > 解决方案 > 隔离的 EJS 部分文件加载到浏览器，但未在屏幕上呈现

node.js - 隔离的 EJS 部分文件加载到浏览器，但未在屏幕上呈现

问题描述

我正在加载我的网站，控制台中没有错误。我已经建立了一个静态网站（使用一点香草 js 进行导航），并尝试了 ejs，模板化了菜单页面、页眉、页脚和重复使用的图像路径，用于在整个网站中重复的促销。我在这方面取得了成功，并想用庞大的​​博客部分重复这个过程。

最终，我计划将我的博客部分重构为一个可以使用节点的“fs”模块调用博客的模板，但我的卡顿让我不知所措。

问：为什么我的页面没有完成渲染，或者在我的代码的两个隔离区域呈现空白？

使用 NODEjs Express 和 EJS。一切都按预期工作，除了最终的博客和联系表格呈现空白。

我只是用来在他们自己的 ejs 部分文件中隔离博客： <%- include("../partials/blog0.ejs")%> 页面将在“blog3.ejs”和“contact”处停止渲染我的 vanilla js 仍然通过使用 dom 来运行id.style.display="none" effectively

我已经从我的 index.ejs 中解构并取消嵌套我的部分，几乎回到它原来的 index.html。除了 blog3 和联系人之外，一切都呈现。

index.js

const express =require('express');

const ejs = require('ejs');
const app = express();
var http = require('http');
var nodemailer = require("nodemailer");
var sass =require('sass');

app.use(express.static('public'));
app.use(express.static('views'));
app.use(express.static('css'));
app.use(express.static('jsFiles'));
app.use(express.static('partials'));

//routes
app.get('/', function(req, res){
  res.render('pages/index');
  console.log('pages/index hit')
});

app.get('/', function(req, res){
  res.render('partial/header');
    console.log('partial hit')
})

app.set('view engine','ejs');
console.log('static site!! listening on:3005 started at: '+Date())
console.log('find app on: localhost:3005 ')
app.listen(3005);

http.createServer(function(req,res){
res.writeHead(200,{'Content-Type':'text/plain'});
res.end('future api dev here');
}).listen(8080);

索引.ejs

    <body onload="loader()">
    <%- include('../partials/burgerButton.ejs') %>
    <%- include('../partials/menu.ejs') %>
        <%- include('../partials/header.ejs') %>
   <div id="mainContent" class="content">


<!--each blog article. I had them in their own ejs file, but reversed that sonce experiencing my issue-->
  <div id="blogIntro" class="blogBody">
          <h1>Welcome to
              <span class="logoFont"> ValRick Travel's</span>
            featured Blogs</h1>
              

<div class="card">
*blog article*
</div>
</div>

标签： node.jsexpressejs

解决方案

原来我使用香草 JavaScript 的旧方法干扰了显示属性 =“无”。

我在我的 scss 中删除了 id 处理程序，发现 EJS 一直在按照我的编程方式工作......隐藏直到用户调用它。

在从静态香草网站迁移到 express 和 ejs 期间，错误出现在我的 jsFiles 中。

推荐阅读