Menu
How can I put markup around specific sections within my markdown file? e.g. put divs around two lists and then another div around the rest of the content.
Using this as an example:
Markdown
* Eggs
* Flour
* Sugar
Text goes here
Output
<div class="section1">
<ul>
<li>Eggs</li>
<li>Flour</li>
<li>Sugar</li>
</ul>
<div class="section2">
<p>Text goes here</p>
</div>
502
I guess you want something like this:
First, a "regular" layout file for the pages where you don't want to show ingredients and preparation:
/_layouts/default.html :<!DOCTYPE html>
<html>
<head>
<title>{{ page.title }}</title>
</head>
<body>
<h1>{{ page.title }}</h1>
{{ content }}
</body>
</html>
Nothing special here, just a very basic layout file.
Then, a second layout file for the pages where you actually want to show recipes:
(I'll call it "recipes", because "ingredients" and "preparation" sounds like you're building a site about cooking)
/_layouts/recipe.html :---
layout: default
---
<div class="ingredients">
<ul>
{% for item in page.ingredients %}
<li>{{item.name}}</li>
{% endfor %}
</ul>
</div>
<div class="preparation">
{{ content }}
</div>
Now you can create pages like this, where you put the list of ingredients into the YAML front-matter and the preparation in the content:
---
layout: recipe
title: Cake recipe
ingredients:
- name: sugar
- name: milk
- name: eggs
---
Here's the "how to prepare the cake" text
This will generate the following HTML:
<!DOCTYPE html>
<html>
<head>
<title>Cake recipe</title>
</head>
<body>
<h1>Cake recipe</h1>
<div class="ingredients">
<ul>
<li>sugar</li>
<li>milk</li>
<li>eggs</li>
</ul>
</div>
<div class="preparation">
Here's the "how to prepare the cake" text
</div>
</body>
</html>
Concerning your question:
I'm not sure though if it will work as I need to format the ingredients list with some bolding, e.g.:100ml water and I don't think I can do this in YAML?
You could separate the ingredient and the amount in the front-matter of the page:
---
layout: recipe
title: Cake recipe
ingredients:
- name: sugar
amount: 1 pound
- name: milk
amount: 100ml
- name: eggs
amount: 3
---
Here's the "how to prepare the cake" text
And the new layout file /_layouts/recipe.html:
---
layout: default
---
<div class="ingredients">
<ul>
{% for item in page.ingredients %}
<li>{{item.amount}} <b>{{item.name}}</b></li>
{% endfor %}
</ul>
</div>
<div class="preparation">
{{ content }}
</div>
The generated HTML:
<!DOCTYPE html>
<html>
<head>
<title>Cake recipe</title>
</head>
<body>
<h1>Cake recipe</h1>
<div class="ingredients">
<ul>
<li>1 pound <b>sugar</b></li>
<li>100ml <b>milk</b></li>
<li>3 <b>eggs</b></li>
</ul>
</div>
<div class="preparation">
Here's the "how to prepare the cake" text
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
