Move some markdown data from one markdown file to different parts in html via my template when build static

#1

Hello, I use middleman for building static web-site from markdown and I have two question.

  1. My web-site blog-like (it is web-site with cooking recipes). Can I put my files.md not in root folder of web-site?
    I need to put my files.md in categorized folders like /dishes /drinks and other. How to do it?

  2. I have my “recipe.md” and when it converts to static I need to move some parts from my “recipe.md” to different parts of my static html. To different div in my template. How to do it? Like erb around html I need to put md chunks around html template

Thank you for answer.

#2

Hi @Ricky,

Yes, to the first question. You can put your files anywhere within the source folder.

Let’s say you had the following structure:

source/
    drinks/
        mead.md

Middleman would build this page to build/drinks/mead.html.

I’m not exactly sure what you’re asking in the second question. There are various tools to allow you to reuse content and wrap layouts – many of which are in the documentation about Templates.

Can you explain with a more concrete example what you’re trying to achieve?

#3

Hello @Aupajo, thank you for helping me. I need to have one file for one recipe: carrot_soup.md (example)
In my web-site I have template with sidebar where I put ingredients. This sidebar is “div” like stucture. I put ingredients section with recepe ingredients from markdown file to this sidebar. You can see example bellow. To content section with “cooking part” I put cooking info from some markdown file. I can’t understand how to work with markdown file for disassemble it and put some piece to section with “ingredient div sidebar” in my template and another to “Coocking content”.
Another problem is that ingredients have some weight. Exmp. carrot = 0.2oz, Onion = 0.1oz. And I can’t to use tags for it.
Is it possible to realise some thing like that? Or I’m on wrong way? Thank you!
My carrot_soup.md:

Very nice carrot soup
============

I'd like soup like this:

### Ingredients ###

      * carrot = 0.2oz
      * onion = 0.1oz

### Cooking ###

Boil some water. And eat it with all Ingredients

And my tempate after building must be something like this:
carrot_soup.html

<!-- some code here -->
<div class="head"">
<h1>Very nice carrot soup</h1>
<p>I'd like soup like this:</p>
</div>
<!-- some code here -->

<div class="sidebar">
<h3>Ingredients:</h3>
<ul>
<li>carrot = 0.2oz</li>
<li>onion = 0.1oz</li>
</ul>
</div>

<div class="Cooking">
<p>Boil some water. And eat it with all Ingredients</p>
</div>
<!-- some code here -->
#4

Oh, I see! There’s a couple of ways you could do that.

One way is to use content_for.

Inside carrot_soup.md.erb (note the added .erb extension):

---
title: Carrot Soup
---

<% content_for :ingredients do %>
  <ul>
    <li>Carrots – 0.2oz</li>
    <li>Onion – 0.1oz</li>
  </ul>
<% end %>

Instructions for the recipe go here.

Inside your layout:

 …
<body>
  <div id="recipe">
    <h1><%= current_page.data.title %></h1>
    
    <%= yield %>

    <div class="sidebar">
      <%= yield_content :ingredients %>
    </div>
  </div>
<body>
…

One restriction with this approach would be that you would have to keep keep everything within content_for in HTML.

Another approach would be to keep the page’s ingredients in the frontmatter. Again, inside carrot_soup.md:

---
title: Carrot Soup
ingredients:
  - "Carrot: 0.2oz"
  - "Onion: 0.1oz"
  - Salt and pepper
---

Instructions go here.

Inside your layout:

…
<body>
  <div id="recipe">
    <h1><%= current_page.data.title %></h1>
    
    <%= yield %>

    <div class="sidebar">
      <ul>
        <% current_page.data.ingredients.each do |ingredient| %>
          <li><%= ingredient %></li>
        <% end %>
      </ul>
    </div>
  </div>
<body>
…

In the frontmatter example above, we’ve turned the list of ingredients into an array, but we could also break it down by ingredient and amount:

---
title: Carrot Soup
ingredients:
  Carrot: 0.2oz
  Onion: 0.1oz
  "Salt and pepper": a pinch
---

<ul>
  <% current_page.data.ingredients.each do |ingredient, amount| %>
    <li>
      <strong><%= ingredient %>:</strong>
      <%= amount %>
    </li>
  <% end %>
</ul>

Hope that helps!

1 Like
#5

@Aupajo thank you very much I think second approach is that I looking for. In this way I still have human readable markdown syntax.
If you do not mind I have third question

  1. When I have do some my recipes.md files, sort through categorized folder structure, I will need to convert all this staff to PDF book with all recipes for clients who need to download them all in PDF format. Do I need to use some extra gem for it? Or middleman have something ready from box? Thank you!

Oh, I was read that I can use MultiMarkdown for it. Is it suit?

#6

That’s an interesting problem.

MultiMarkdown would be appropriate if your recipes were written purely in Markdown – but the YAML frontmatter (between the two ---) is not valid Markdown. You would have to strip out all the frontmatter to be able to run these recipes through any Markdown interpreter.

One solution might be to use one of several PDF libraries that can convert HTML documents into PDFs. I would take a look at wkhtmltopdf in particular, as it will use WebKit’s full rendering engine to generate the files. You may need to specify a print media type for your CSS files. You could run the PDF generation as part of the build.