如何在markdown文件中的特定部分放置标记？例如,将div放在两个列表周围,然后将另一个div放在其余内容周围.
以此为例:
降价
* 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>
我想你想要这样的东西:
首先,您不希望显示成分和准备的页面的"常规"布局文件:
/_layouts/default.html :<!DOCTYPE html>
<html>
<head>
<title>{{ page.title }}</title>
</head>
<body>
<h1>{{ page.title }}</h1>
{{ content }}
</body>
</html>
这里没什么特别的,只是一个非常基本的布局文件.
然后,你真正想要显示食谱的页面的第二个布局文件:(
我称之为"食谱",因为"成分"和"准备"听起来像你正在建立一个关于烹饪的网站)
/_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>
现在您可以创建这样的页面,您可以在其中将成分列表放入YAML前端内容和内容中的准备:
---
layout: recipe
title: Cake recipe
ingredients:
- name: sugar
- name: milk
- name: eggs
---
Here's the "how to prepare the cake" text
这将生成以下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>
关于你的问题:
我不确定它是否会起作用,因为我需要用一些粗体格式化成分列表,例如:100ml 水,我不认为我可以在YAML中做到这一点？
您可以将页面前面的成分和数量分开:
---
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>
| 归档时间： |
|
| 查看次数： |
1829 次 |
| 最近记录： |