1

Good Day! I am making an app and in it I have various routes. I am using node.js. I have created a "partials" directory with header.ejs and footer.ejs files that contain all the header and footer info such as bootstrap, custom css etc. Now, this header file works fine, it is also linked correctly, I have tested it by changing the background color to complete red and this color then applies to all the pages that contain <% include header.ejs %> and <% include footer.ejs %>. In my project, the problem is that the bootstrap and other custom css only work for the root route. For example this is the main directory (Project), this directory contains (Project/app.js, Project/package.json, Project/views, Project/public, and so on...). Project/views contains ejs files for all the routes. For example toyota.ejs file for route "/cars/toyota", honda.ejs file for route "/cars/honda" and so on. All these ejs files are stored in Project/views folder. In the main directory, along with app.js, there is a landing page called "landing.ejs" for route "/cars". The header and footer work absolutely fine for the route "/cars" which renders "landing.ejs" but when I go to different routes such as "/cars/toyota", which will render "toyota.ejs" from views folder, the header and footer stop working, only certain features work such as bootstrap button or certain custom styles. What I mean is that header.ejs and footer.ejs only works for root route, which is "/", and the main cars route "/cars", which shows all car manufacturing companies. The problems arises only when I try try to use routes that render files from the "Project/views" folder. header.ejs and footer.ejs properties does not get applied to the files contained in the nested folder, which is called "views". Linking is working fine because I have tried changing background colors.

Haseeb
  • 87
  • 1
  • 13
  • welcome to SO. You need to properly format your question and share the minimum and relevant code for better reception here – Hemadri Dasari Oct 04 '18 at 19:21
  • https://stackoverflow.com/questions/5813771/in-ejs-template-engine-how-do-i-include-a-footer Please refer to this question @haseeb – Achintha Isuru Dec 09 '19 at 19:07

3 Answers3

0

Can you post your code to here?

You can try this:

<%- include('filepath/header.ejs') %>
Robert.T
  • 81
  • 2
  • Okay this is what I changed it to <%- include (‘/alm/views/partials/header.ejs %> and same for footer with footer.ejs but I got an error in return which is :- Error: Could not find the include file “('/alm/views/partials/header.ejs')”. The file path I copied is correct. Still having a problem. – Haseeb Oct 04 '18 at 19:06
  • Use relative path. If your app folder were 'alm' you should use <%- include ('views/partials/header.ejs') %> – Robert.T Oct 04 '18 at 19:32
  • I tried. Same error. I just want to bring this to your attention that my previous include statement also works ONLY if I change my routes a little bit. This website is a cars website. First I have the root route, which is “/“. It renders “landing.ejs” from views. Second route is “/cars”, which displays all brands of cars. My header and footer work fine for both these routes and remember the landing.ejs file is in the root directory along with app.js, it is not in views with other ejs files. – Haseeb Oct 04 '18 at 19:50
  • Thirdly, I have “/cars/toyota”, which will render toyota.ejs from views. This is where the problem starts. I have many routes like these, “/cars/honda/detail” and “/cars/bmw/inspection” and such. This is where I fact this header and footer problem. Now if I edit these routes and change then into the following then it works perfectly fine, I do not need to change my header and footer tags, changes are, “/toyota” not “/cars/toyota” or “/details” not “/cars/honda/details” or “/inspection” not “/cars/bmw/inspection” I hope you get my point. Royally confused. – Haseeb Oct 04 '18 at 19:55
  • @Robert.T I don't think your solution works, I think you will find more answers and solutions from this question (https://stackoverflow.com/questions/5813771/in-ejs-template-engine-how-do-i-include-a-footer) – Achintha Isuru Dec 09 '19 at 19:07
0

In your header.ejs file, put a "/" before your css filename in href. For example, replace:

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

with:

<link rel="stylesheet" type="text/css" href="/car.css">.
Deep Roshan
  • 1
0

I got a similar error but my code worked two ways, either by using

<%- include("partials/header"); -%>

or by,

<%- include partials/footer.ejs-%>

also, take care of the spaces in between.

In this example, I am considering that the partials folder in the same directory, update path as per the requirements.

Happy Coding :)

geeky01adarsh
  • 312
  • 3
  • 14