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 :)
Related
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.
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
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>
<% });%>
I have made a Hexo blog. I can't however find out where to add the favicon. I have tried adding it to different folders but it isn't being found.
Does anyone know where it should be added or if there is anything else I need to update.
It depends on theme you're using, check theme documentation and source.
Some themes, like apollo are supports favicon config parameter (theme_config.favicon parameter in_config.yml).
If theme does not support a custom favicon, then just add file source/favicon.ico and it will be requested by browser automatically.
I use Landscape, the default theme at time of writing.
blog\blog\node_modules\hexo\node_modules\hexo-cli\assets\themes\landscape\_config.yml
At the bottom of the file, you'll find a section titled Miscellaneous.
# Miscellaneous
google_analytics:
favicon: blog\themes\landscape\source\css\images\favicon.ico
twitter:
google_plus:
fb_admins:
fb_app_id:
Windows can be directionally-challenged when it comes to slashes, so try the opposite direction if you use PC. This took some fudging on my part, and I was able to use an .ico file as well as a .png.
If you're still in need of a placeholder image, I've used Favicon.cc and had great results.
you can add the favicon.ico in the source floder, and add a line in the blog/_config.yml
favicon: favicon.ico
so, you know the source is the root path
I think all the other answers are so confused.
Now just three steps to add a favicon to your hexo-blog website, and I take next theme as example:
First, download your favorite imagename.ico image file from network or you make one by yourself.
Second, rename the imagename.ico file to favicon.ico, then move it to that folder: blog/themes/next(the theme folder you are using now)/source/images/.
Finally, modify the code in file blog/themes/next/_config.yml at that line to the same as below:
# Put your favicon.ico into `hexo-site/source/` directory.
favicon: images/favicon.ico
Done!
Konstantin Pavlov is right.
for example, I use hexo-theme-next theme.
I change code in themes/next/_config.yml.
# Put your favicon.ico into `hexo-site/source/` directory.
favicon: images/favicon.ico
I put my favicon.ico in themes/next/source/images/favicon.ico
well Done.
Add this to the head part of the html code...
<head>
<title>Test Page</title>
<link rel="icon" type="image/png" href="http://www.w3.org/Icons/w3c_home">
</head>
For more on this have a look at the W3C site : How To FavIcon
It's also good to inspect the page source by looking at the console as it will report if there were any issue retrieving the icon.
Update:
I also posted this question to the Jade GitHub repository. I'm dropping it here too, for future (circular) reference:
https://github.com/jadejs/jade/issues/1943
Original post:
In a default node + express + jade application, I'm trying to build some common reusable components (menu, footer...) that I can include in some pages. I got stuck while trying to add references to .css or .js files from a block or an included file.
I want to do this because I don't want to include all the styles and scripts if I don't need them.
The folder structure is something like this:
Root
public
javascripts
main.js
menu.js
stylesheets
main.css
menu.css
views
shared
layout.jade
menu.jade
footer.jade
index.jade
The layout.jade file:
doctype html
html
head
title= title
link(rel="stylesheet", href="stylesheets/main.css")
script(src="javascripts/main.js")
body
block content
The index.jade file:
extends shared/layout
block content
h1= title
p Welcome to #{title}
In menu.jade there is some code that needs the menu.css and menu.js files.
Now I need a way to add those files to the <head> of the page only when I use the menu.jade file.
I started using Jade a few hours ago so it's very possible that I missed something in the documentation.
Thank you!
You could do this with jQuery in your menu.js like so:
$("head link[rel='stylesheet']").last().after("<link rel='stylesheet' href='stylesheets/menu.css' type='text/css'>");
I would caution you about this practice however. One alternative would be to have a build step that concatenates all of your CSS files together and serves all of your style in a single css file. LESS and cssmin are good options here, and they have nice modules to automate this for you in grunt or gulp, whichever you're using.
You did mention that you didn't want to include all styles if you don't need them, but I would suggest that having a web browser download many small css files is going to be slower than having it download one big one, especially if you serve those files via a webserver like nginx that employs gzip, or if you serve your static files through a CDN like CloudFront.