rubyerbtemplating

Including one erb file into another


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.


Solution

  • 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>