CSS file is not linking via <% include file.ejs %> - node.js

I have a file header.ejs that contains a head tag with all script & link tags and a navbar.
Another file footer.ejs contains some divs and the closing tag i.e. /html.
I am trying to add these to other ejs files using : <%include file.ejs %>.
While this works on one file campground.ejs, the css doesn't seem to be linked on another entry.ejs.
The header/footer are in project/views/partials and the campground/entry are in project/views. The stylesheet is in project/resources; project being the root folder of the work.
Both files(campgrounds/entry) follow the same structure:
<%include partials/header%>
<div>
---some code---
</div>
<%include partials/footer%>
The stylesheet is linked to the header perfectly, which works as expected in the campground.ejs. But there is no styling in the entry.ejs, while the bootstrap(linked in header.ejs) works just fine.

Related

I can't include an ejs partial in my pages and I'm not sure why

So I'm having some trouble with my ejs templates. Below is how my file structure. In the file pages/index.ejs, I am importing the partials partials/ga.ejs. It works wonderfully. However, if I added the same partials code into another page.. such as pages/blog.ejs, it doesn't work anymore.
It's like I can't import a partial in more than once.
Below is the file structure:
EDIT; sorry, I forgot to include how I'm including it. So in the pages/index.ejs file:
<% if (showGoogleAnalytics) { %>
<% include ../partials/ga %>
<% } %>

header.ejs and footer.ejs not functioning properly

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.

Can you post your code to here?
You can try this:
<%- include('filepath/header.ejs') %>

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">.

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 :)

Including a partial within existing partial - Express and EJS

I am using partials in my views but am wondering if it is possible to include another partial within an existing partial. It seems not at present but cannot find any information on if this is possible at present.
My current setup looks like this
views
partials
home
section1
file.ejs
partial.ejs
home.ejs
So within my home.ejs file I can include my partial.ejs partial
<% include partials/partial %>
But within my partial.ejs I can't seem to include another partial
<% include home/section1/file %>
Has anyone done this ?
Thanks

Express js and serving static files for views

I have severals views in my project let's say: "view1", "view2", "view3".
View engine is "ejs". For those views I have different scripts/css files. I have also partials like: header.ejs and footer.ejs, that I am including on the top of view(header) and bottom(footer):
As it is in the picture view1.ejs is using two stylesheets(styleA,styleB) and scripts(scriptA,scriptB).
When I am going to use another view with those static files everything is ok because I am including header.ejs and footer.ejs inside view.
But since I am using different stylesheets and scripts for another view, and I don't want to include "styleA" and "styleB" I have a problem. I just want to keep the same partials header and footer but with another links inside.
Is there any "Assets Manager" or another solution to manage all those links?
When I want to use header.ejs in over 20pages things getting complicate, because without solution of my problem, I need to include all links/styles and some of them are not necessary.

In express, you can pass styles and scripts as arrays to render your ejs template :
app.get('/', function (req, res) {
res.render('index', { styles: ['styleA.css', 'styleB.css'], scripts: ['scriptA.js', 'scriptB.js']});
});
Now update your ejs template. First the styles part :
<% styles.forEach(function(sty){ %>
<link href="<%- sty %>" rel="stylesheet">
<% });%>
Then, the scripts part :
<% scripts.forEach(function(scr){ %>
<script src="<%- scr %>"></script>
<% });%>

Node js Data from the ckeditor is showing with HTML tags in the ejs file

I'm facing a issue with the ckeditor in my nodejs code when I input data using ckeditor the data is submitted with the HTML tags in the database(phpmyadmin) from there when I'm trying to fetch the data in the ejs file I have tried the strip tags and sanitizer but nothing worked.

Have you tried the tag <%- %> instead of <%= %>?
<%- escapes HTML by default (therefore your br tag is changed to it's escaped equivalent).

Resources