Using Frontmatter with Dynamic Pages

#1

Hello, all.

I have spent ample time researching this without finding a solution that worked. I would love it if someone could help me figure this out.

I’m trying to use Dynamic Pages in my setup, but need to include dynamic Frontmatter with this. But I can’t use Frontmatter in the template file, so I was thinking I could use a YAML data file instead? I tried various approaches, but none were successful. The dynamic pages load just fine, but every one of them will use the same Frontmatter unless I can pull in dynamic data instead.

My config includes:

["england", "france"].each do |team|
  proxy "/teams/#{team}/index.html", "/teams/team.html", :locals => { :team_name => team }, :ignore => true
end

And my directory structure in this section looks like this:

teams
¬ index.html.erb
¬ team.html.erb

I began a YAML data file that includes:

england:
  title: "Teams/England"
  description: "England"
  headline: "England"
  addclass: "england cols"
france:
  title: "Teams/France"
  description: "France"
  headline: "France"
  addclass: "france cols"

When I use the aforementioned data in the template file as Frontmatter, it works just fine:

---
title: Teams/France
description: France
headline: France
addclass: france cols
---

One example of how I am using the data:

<%= current_page.data.addclass %>

My questions are as follows:

  1. How can I use a YAML data file to serve unique data to each Dynamic Page?
  2. Can I use the final URI segment (/teams/england/, /teams/england/, etc.) to define which data set to use?
  3. Can I do this without impacting other non-dynamic-pages (/matches/, /groups/, etc.) on the site?

Thank you so very much in advance.

#3

Hey Mark,

I had to figure this out pretty recently and not a dev by trade. Hopefully my pain can be your gain!

Step 1 is to setup a proxy in the config file as you’ve already done, with a few adjustments.

This assumes the following:

  • The name of your yaml file is teams.yml and that you’ve added another field that’s called slug which will be your URL component.
  • The template teams.html.erb for these pages exists in the src/templates/ directory. If you want to keep it in the src/teams folder instead you can do that, just adjust the URL accordingly. If you plan on having multiple sets of dynamic pages like this, it’s good to keep that templates directory agnostic. Don’t use the existing layouts directory, however, as middleman will throw errors (I stumbled on this for a long time).
  • You have directory indexes turned on in your config.rb file activate :directory_indexes
  • The proxy config section in your config.rb file comes after the activation of directory indexes

I’d also recommend restructuring your YAML file to look more like:

- name: England
  slug: england
  description: blah blah
  headline: blah blah
- name: France
  slug: france
  description: blah blah
  headline: blah blah

Change config file to:

data.teams.each do |team|
  proxy "/team/#{team.slug}/index.html", "/templates/team.html",
  locals: { team: team },
  ignore: true
end

The locals line is what passes the data from the yaml file into the template.

Now, in your template instead of using current_page.data.{key} you should use team.{key}. So instead of <%= current_page.data.addclass %> you would have <%= team.addclass %>.

You can repeat this pattern for other data files / templates that you have. Hope that helps / works!

#4

Hey, Phil.

Thanks for weighing in. In fact, the solution you have outlined here is precisely what I used. My YAML file looks a little different, but it’s basically the same setup. I probably should have posted my solution here for posterity.

In any case, I do appreciate your following up, even a few months later. Also, you can see the results here:

Cheers.

#5

No worries! Glad the community is active enough to help folks like us out. Site looks great! Nice work!

1 Like