All geek questions in one place

How to place Jekyll content in multiple columns?

How can I put markup around certain sections in my markdown file? for example, place divs around two lists, and then another div around the rest of the content.

Using this as an example:

markdowns

* 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>
+6
source share
1 answer

I think you want something like this:

Firstly, a “regular” layout file for pages on which you do not 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 simple layout file.

Then, the second layout file for the pages where you really want to show the recipes:
(I will call it “recipes” because the “ingredients” and “preparation” sound like you are building a cooking site)

/_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 such pages where you put the list of ingredients in front of YAML and prepare in content:

 --- layout: recipe title: Cake recipe ingredients: - name: sugar - name: milk - name: eggs --- Here the "how to prepare the cake" text

This will produce 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 the "how to prepare the cake" text </div> </body> </html>

EDIT:

Regarding your question:

I am not sure though if this will work, since I need to format the list of ingredients with a dare, for example: 100ml water , and I don’t think I can do this in YAML?

You can separate the ingredient and the amount on the front side of the page:

 --- layout: recipe title: Cake recipe ingredients: - name: sugar amount: 1 pound - name: milk amount: 100ml - name: eggs amount: 3 --- Here 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>

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 the "how to prepare the cake" text </div> </body> </html>
+5
source

Source: https://habr.com/ru/post/975848/

More articles:


All Articles