I have a layout in the current version of Middleman (3.0.14). I would like to pulling page specific stylesheets or script if they exist.
In the layout I currently have:
<%= stylesheet_link_tag "global", data.page.stylesheet %>
and in the YAML front matter I have:
stylesheet: homepage
The issue I'm having is that I would like to have the CSS render only if there is a stylesheet tag in the YAML from matter. Currently what happens is if there is no stylesheet tag in the YAML front matter it just renders a blank .css file.
Thanks in advance for any assistance.
Does ...
<%= stylesheet_link_tag "global", (data.page.stylesheet ? data.page.stylesheet : {}) %>
... do the trick for you? As the 'stylesheet' key might be not set correctly within the Front Matter (stylesheet: or stylesheet: "") you could even do some more checks:
<%= stylesheet_link_tag "global", ((data.page.has_key?('stylesheet') && ! data.page.stylesheet.nil? && ! data.page.stylesheet.empty?) ? data.page.stylesheet : {}) %>
Related
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>
<% });%>
In Ruby on Rails, there is a block called <% provide:titleName %> and <% yield:titleName %> that can be used to switch out text when rendering from page to page.
Is there an equivalent method in Sails.js that mimics this?
Yes there is if you use the standard ejs templating
IN the HTML file use:
<%= variablename %> //This will be replaced by the data in variablename
In the Controller method used to serve the view use:
res.view("viewname", {variablename: someValue});
I hope this is what you are looking for, let me know!
I want to have my javascript/coffescript files load only on the pages that use them. So in my application.html.erb file I have the following code in my head
<%= yield :head %>
Then in the specific view that I want to load the javascript I have
<% content_for(:head) do%>
<%= javascript_include_tag 'application' %>
<% end%>
This appears to work initially. When I first go to pages that I do not want javascript in, there are no links to the js files. However, once I've visited the page that has the above code block, the links show up in all subsequent pages I visit (for example the home page). If I then refresh the browser in the home page the links go away again...
This in and of itself isn't really a problem, but I also have this in my application.html.erb head section
<style><%= yield :stylesheets %></style>
and in some layouts, there is css that gets yielded to in there. Here's where it gets really weird. Let's say page A has no js and no additional css, page B has no js but does have additional css, and page C has both js and additional css. Then I do teh following in order:
Visit page A => everything is fine
Visit page B => everything is fine (additional css is loaded)
visit page A again => everything is fine (additional css is not loaded)
visit page C => everything is fine (additional css and js loaded)
visit page A again => NOT GOOD!!! (additional css and js still loaded)
somehow the javascript include tag is also causing my content_for(:stylesheets) stuff to persist even tho i don't want it to. If I do a manual refresh on page A everythign goes back to normal again until I visit page C. I've even tried putting this in my page A view to get rid of the links and still no good
<% content_for(:head) do%>
<% end%>
Any ideas?
With turbolinks enabled, it won't work. What you need to do is either disable turbolinks or put your javascript and css inside the body of your page.
Update your config/initializers/assets.rb
Either add your filename.js file or **/*.js inside
Rails.application.config.assets.precompile += %w( filename.js)
Run RAILS_ENV=production rake assets:precompile depends on your environment. If you are working locally, skip that command as it will precompile on the fly, as per your config.
Restart your app, should work with turbolinks off and yield from head or body.
I used
<% content_for :head do %>
<% end %>
But didn't use <%= content_for :head %> in my relevant layout's head tag which was the problem for me.
More these are equal
<%= content_for :head %>
or
<%= yield :head %>
I'm using EJS with a Node.js web server I'm building. I see many EJS examples that sometimes use <%= when outputting HTML or strings, while other examples (sometimes within the same template) use <%-.
I tried to reference the EJS docs and getting started guide, but both gave no info about the <%- notation. Also, my Google search attempts yielded nothing useful. Thanks!
The version of EJS you're likely using in Node is not the same as the version you see on Google code; in the Node version, <%= escapes the HTML going into the buffer, while <%- does not. source
From http://ejs.co/:
<% 'Scriptlet' tag, for control-flow, no output
<%= Outputs the value into the template (HTML escaped)
<%- Outputs the unescaped value into the template
<%= *param* %> is use for transfer data from view to controller and vice versa
while <%- %> is to include other code
For my project is
With <%= you if would render some variables that holds a string that holds HTML code, it would not render that HTML code but render it as text to avoid cross-site scripting attacks.
With a minus ( <%- ) you can avoid this, and really render the HTML code.
1)Option One: an ejs file is importing a variable called "noob" which holds for example a req.body value.
<p><%= noob %></p>
2)Option two: an ejs file importing a partial template called "myPartial.ejs" which is inside "partials" folder.
<p><%- include("./partials/myPartial") %></p>
3)Option three: an ejs file is using javascript code:
<p>
<% while (i < 10) { %>
myVar += "The number is " + i;
i++;
<% } %>
</p>
I'm using express.js and EJS as template engine.
I don't understand how to use partials, I have seen at the examples but the author used JADE template engine, so I don't know how to apply it with EJS.
I have a simple view named: test.ejs and another .ejs file named part1.ejs
I need to show part1.ejs inside test.ejs.
I tried putting <% partial('part1', {}) %> (into test.ejs) but nothing happen, It does not include that file.
Could someone give me an example?
Thank you!
The correct code in your situation would be:
<%- partial('part1') %>
If you want to include unescaped HTML use <%- and if you want to escape HTML (unlinkely though when including a partial) you can use <%=.
Resources:
Node.js - EJS - including a partial
http://groups.google.com/group/express-js/browse_thread/thread/62d02af36c83b1cf
Its an old thread, but here is how you do it in the newer version of EJS.
<% include part1 %>
given part1.ejs contains the html you wish to include.