In Middleman that uses layout files, how can we append a js file for a specific html file during compile time?

#1

I have a layout file that appends the jQuery CDN at the bottom for all .html.haml files. The layout file adds the jQuery CDN after all the html elements have been rendered.

One of my .html.haml files will have an additional js file that uses jQuery; however, it needs to see the jQuery CDN loaded first.

How can I tell Middleman that during compile time, append the js file for this specific .html.haml file only?

Here’s my layout file:

!!! 5
%html{lang: 'en'}
  %head
  %body{class: current_page.data.body_class || 'page'}
    = yield
    // jQuery
    = javascript_include_tag  "//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"
    //I need to insert my js file here, but only for a specific HTML file.

P.S. Also, I need to place the jQuery at the bottom of the file to make rendering more efficient, so I can’t place it in the head.

#2

You can include conditional statements in the layout file, that are evaluating a flag set in the frontmatter section of the page. For example my template includes (sorry, ERB instead of HAML):

<% if current_page.data.index_options == "no_follow" %>
  <meta name="robots" content="noindex, nofollow" />
<% else %>
  <meta name="robots" content="index, follow" />
<% end %>

And the page starts with:

---
title: MySite – 404 – page not found
index_options: no_follow
---
<div id="main">
…

If you don’t want to set the flag in every page then use boolean value only, so missing (unset) flag will not trigger error. As an example, my general template for new projects includes optional partial loading fonts, if project uses Google Fonts or Fontkit. This is triggered with optional flag set in the project’s config YAML file.

<%= partial "project_fonts" if data.project_config.project_fonts %>

Another proposition: read the docs on content_for? and yield_content.

#3

SUH-WEET!

Thanks! I combined both of your solutions and ended up using this one line of code:

= javascript_include_tag "my_jsFile" if (current_page.data.index_options == "target_html")

Good thing you provided both solutions that worked for you. Otherwise, I wouldn’t have been able to make it work.

#4

Do you need to set something in the config.rb for this as well order for it to work?
I have done the same method but the file is not included.

layout:

= javascript_include_tag "/vendor/leaflet/leaflet.js" if (current_page.data.index_options == "yes")

template file

---
index_options: yes
---

Any help would be appreciated…

#5

@maikel, apologies for the really late reply. I prolly missed the notification email for this.

Anyway, the syntax you wrote should be fine. And you should not need to do anything with config.rb. good luck!

#6

@ayjaymid Thank you, I had it working the next day. I have no idea what went wrong before.

#7

A more generic solution that I found today is the following:

Template file:

---
append_js:
  - projects.js
  - gallery.js
---

Layout:

  <%= javascript_include_tag "base.js", "bootstrap-includes.js", "main.js" %>
  <% current_page.data.append_js.each do |jsfile|%>
    <%= javascript_include_tag jsfile %>
  <% end if current_page.data.append_js %>
1 Like