如何将Jekyll内容置于多列布局中? [英] How can I put Jekyll content a multiple column layout?
问题描述
如何在Markdown文件中的特定部分周围放置标记?例如将div放在两个列表周围，然后将另一个div放在其余内容周围.
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.
以这个为例:
降价
* Eggs
* Flour
* Sugar
Text goes here
输出
<div class="section1">
<ul>
<li>Eggs</li>
<li>Flour</li>
<li>Sugar</li>
</ul>
<div class="section2">
<p>Text goes here</p>
</div>
推荐答案
我想您想要这样的东西:
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:
<!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)
---
layout: default
---
<div class="ingredients">
<ul>
{% for item in page.ingredients %}
<li>{{item.name}}</li>
{% endfor %}
</ul>
</div>
<div class="preparation">
{{ content }}
</div>
现在您可以创建这样的页面，在其中将成分列表放到YAML的前题中，并将准备工作放在内容中:
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
这将生成以下HTML:
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:
我不确定是否能正常工作，因为我需要用一些粗体来格式化成分表，例如:100ml 水，我不认为我可以在YAML中做到这一点?
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
以及新的布局文件/_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>
生成的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>
这篇关于如何将Jekyll内容置于多列布局中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
