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.
Related
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 :)
I am making a static website using Wintersmith alongside the wintersmith-stylus and wintersmith-jade plugins.
I want to add a specific CSS file in a help page. The help page is based off the "layout" template. When I try to use a block to insert the stylesheet into the html head, I receive the following error:
Line ##: Unexpected identifier
layout.jade
doctype html
html
head
block head
link(rel="stylesheet" href="/styles/layout.css")
body
...
help.jade
---
template: layout.jade
---
//- Error inducing code
extends ./layout.jade
block head
link(rel="stylesheet" type="text/css" href="../styles/help.css")
//- end of error inducing code
...
Even if I move the extends and block head lines on top of the metadata block containing template: layout.jade, I still receive the same error. Removing extends ./layout.jade results in the error lines position moving from 40 to 5 in my case.
My guess is the error is caused by the wintersmith-jade plugin, but even if that's the case I'm lost for how I would go about fixing it.
Since I wanted to use both Stylus and Jade (with Jade for both content and templates), I ended up moving over to Harp. Harp not only has Stylus and Jade "built-in", but it's also slightly simpler than Wintersmith.
It's quite a workaround, but I'd say it's actually an upgrade at the same time.
I'm not using wintersmith-jade, but it looks like that plugin shouldn't affect the regular templates in /templates (which is what I think you're referring to).
Looking at templates/article.jade, it looks like you should use just extends layout instead of extends ./layout.jade.
The default templates also do not have the metadata block, but maybe that's necessary for the plugin you're using.
I am starting to learn Sails (0.9.7, node 0.10.16) and running through the sailscasts episodes. I am also trying to use jade as I do so. Where I am stuck now is that sails is not finding views/layout.jade. I backed out all the jade stuff and redid with ejs and sails is not finding views/layout.ejs.
As a last resort, I cloned activtyoverlord (the sailscasts app) and when I sails lift activityoverlord does not find its views/layout.ejs.
Any suggests as to what I might be doing wrong?
I'm not a jade user, however, I think you need to put extends ../layout at the top of your index.jade file to use layout.jade.
Also, I think both the layout.jade and index.jade have tabs and spaces (I don't think you can use both). I took out the tabs and added spaces in your layout.ejs file.
I created a project from scratch, changed engine to jade in config/views.js but left layout to the default value.
Also, I used these tags in layout.jade:
// SCRIPTS
// SCRIPTS END
and
// STYLES
// STYLE END
Grunt then puts the appropriate paths for javascript and styles in your layout file. I couldn't get index.jade into the layout.jade but I don't know enough about jade to determine what's wrong.
Here's a link to the repo I made: https://github.com/irlnathan/sails-answers-jade
Is there a way to have a main script that act like a "global" script for all pages of a site while still have specific page script when using requiere.js.
This would be called on all pages
<script data-main="resources/js/main" src="resources/js/libs/require.js"></script>
and on other page i would like to add other dependencies without having to create a different main.js script.
Is there any way to do so ?
EDIT: Just found a way that seems to be working pretty well so far:
<script> require.config({ deps : ['register'] }) </script>
Any other ideas?
You can implement a global main and a page main scripts, something like this (the data-start is not part of the requirejs, is hand-made as described on the link below):
<script data-main="globalmain.js" data-start="page/main" src="require.js"/>
More details here: How to use RequireJS build profile + r.js in a multi-page project
If you don't know what jade is.
I am having problem with the template inheritance system.My file structure is like so
/views/
|-- layout.jade
/products/
|-- index.jade
|-- product.jade
/static/
/stylesheets/
|-- style.css
The problems is that when loading the product page which receives an id as param (localhost:3000/product/:id if not for the /id it would load just fine), although the layout still extends correctly it does not load the stylesheet properly (the path is broken). I am doing half of it right though, in the index page of products the stylesheet loads just fine.
Layout.jade
head
link(rel='stylesheet', href='stylesheets/style.css')
It's probably the relative path in your href. Digging around the express documentation, I'm finding that the most popular approach is to reference the stylesheet from the base of the site like this (notice the / preceding stylesheets):
link(rel='stylesheet','/stylesheets/style.css')
This has the benefit of being easy, and working across routes of multiple depths (/about, /about/me, etc). However, it has the negative of not supporting app directory depth. For example, if you wanted to host your app at: http://yourserver/yourapps/yourapp this would be a problem. I don't know if you care about this or not, most of the examples for express certainly don't :-)
However, if you want to do this the right way, there is one example on the express github site: blog. https://github.com/visionmedia/express/tree/master/examples/blog
The approach here is to use a middleware component to grab the base url, and stuff it in the locals passed down to the layout view. Here's what your HTML would look like:
!!! 5
html
head
title Blog
link(rel='stylesheet', href=base + '/style.css')
body
#container!= body
The important parts to check out if you require this approach are middleware/locals.js, app.js where the middleware component is wired up, and layout.jade where the base href is used.
Happy Coding!