Including one erb file into another

Chris Allen Lane picture Chris Allen Lane · Apr 19, 2012 · Viewed 28.4k times · Source

I'm writing a command-line tool that will ultimately output an HTML report. The tool is written in Ruby. (I am not using Rails). I'm trying to keep the logic of the application in one set of files, and the HTML templates (the .erb files) in another set.

I'm having a really annoying problem though: I can't successfully include one .erb file into another.

To be specific, I'm trying to do something like this (in pseudo-code):

<html>
<head>
  <style type='text/css'>
    [include a stylesheet here]
    [and another one here]
  </style>
</head>
<body>
  <p>The rest of my document follows...

That example snippet is itself an erb file, which is being invoked from within the application logic.

I'm doing things this way so I can keep my stylesheets out of the main template to make it easier/cleaner to maintain the application. The end product (the report), though, needs to be a single, stand-alone HTML file which has no dependencies, and thus, I want to inline those stylesheets into the document head when the report is generated.

This seems like this should be easy, but I've been banging my head against a wall (and Googling, and RTMF'ing) for the last hour, and I'm not having any luck at all.

How is this supposed to be done? Thanks.

Answer

cydparser picture cydparser · Apr 20, 2012

ERB templates can be nested by evaluating the sub-template from within <%= %> of the main template.

<%= ERB.new(sub_template_content).result(binding) %>

For example:

require "erb"

class Page
  def initialize title, color
    @title = title
    @color = color
  end

  def render path
    content = File.read(File.expand_path(path))
    t = ERB.new(content)
    t.result(binding)
  end
end

page = Page.new("Home", "#CCCCCC")
puts page.render("home.html.erb")

home.html.erb:

<title><%= @title %></title>
<head>
  <style type="text/css">
<%= render "home.css.erb" %>
  </style>
</head>

home.css.erb:

body {
  background-color: <%= @color %>;
}

produces:

<title>Home</title>
<head>
  <style type="text/css">
body {
  background-color: #CCCCCC;
}
  </style>
</head>