jekyll - 如何将 Jekyll 内容置于多列布局中？-6ren

jekyll - 如何将 Jekyll 内容置于多列布局中？

转载作者：行者123 更新时间：2023-12-04 14:58:08

25

4

如何在 Markdown 文件中的特定部分周围放置标记？例如在两个列表周围放置 div，然后在其余内容周围放置另一个 div。

以此为例:

Markdown

* 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>

这里没什么特别的，只是一个非常基本的布局文件。

然后，您实际要显示食谱的页面的第二个布局文件:
(我将其称为“食谱”，因为“配料”和“准备”听起来像是您正在建立一个关于 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>

现在您可以创建这样的页面，您可以在其中将成分列表放入 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>

编辑:

关于你的问题:

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?

您可以在页面的首页分开成分和数量:

---
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 - 如何将 Jekyll 内容置于多列布局中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26045817/

25

4

0

文章推荐： Ansible with_dict 模板使用

文章推荐： streambuf - boost streambuf消耗和提交，它是什么

.net - 置于 GAC 中的程序集是否获得完全信任？
我一直听到关于这个话题的相互矛盾的事实。什么是正确的？最佳答案你一直听到相互矛盾的观点，因为这是一个非常困惑的话题，即使在高级工程师中也是如此。简而言之，简单地将程序集放置在 GAC 中确实会隐含
python - 将 shlex 置于 Debug模式
我想看看 shlex对于我正在尝试构建的东西来说是一个不错的选择，所以我想我会把它放在 debug mode 中玩弄它。只有 shlex 的构造函数有这个 weird thing it does :
azure - 如何将“拒绝分配”置于 Azure 订阅或资源组级别？
我想在订阅上设置拒绝规则，以便可以使用自定义角色覆盖贡献者访问权限(但有一些异常(exception)情况)。我在 MS 门户 ( https://learn.microsoft.com/en-us
artifactory - 将 Artifactory 置于 SSL 之后
我在我的 centos 上手动安装了 Artifactory(V 2.6)，并将它与自己的独立码头容器一起使用。我使用 artifactoryctl start 启动它，现在我可以使用 http://
android - 以编程方式将 TextView 置于 TableRow 上
我试图将 TextView 置于表格行内，该 TextView 本身位于表格布局内，但我想我错过了一些东西，因为 TextView 没有居中:s 这是我的方法: private void insert
c - 是否有必要将 return 置于 void 递归中？
如果问题已经问过，请随意将此帖子作为重复，我还没有找到与此相同的帖子据我所知，没有必要return在 void 功能，例如: void ex () {printf ("Hi\n");} 但是，如果
java - 将 JMenuItem 置于 JPopupMenu 中心
我想要做的是将 JMenuItem 元素置于 JPopupMenu 的中心。这就是它们目前的样子我希望它们位于中间而不是左侧。这是我的代码的一些部分 JButton lvlBtn = ne
java - 将 myJTextField 置于 JComboBox 旁边
我想创建一个包含许多 JComboBox 的调色板。像这样: for(int x=0; x(new String[] { "First Option", "Second Option", "Third
ios - 如何将 UIButton 置于 TabBar 的前面？
我有一个 TabBar，我想在上面添加 UIButton，但它位于 tabBar 的后面: 图片( http://i.stack.imgur.com/RxGXb.png ) 如何将其置于前面并覆盖 T
ios - 将 UIActivityViewIndicator 置于 UITableViewCell 的中心？
如何以编程方式将 UIActivityViewIndicator 置于 UITableViewCell 中？最佳答案在 UITableViewController 的自定义子类中尝试类似的操作:
php - 将 PHP 置于 Javascript 中
我似乎无法让 PHP 在 Javascript 标记内回显: places.push(new google.maps.LatLng("")); 我做错了什么？最佳答案你试过不加引号吗？ place
Swift:无法将 ImageView 置于 ScrollView 中心
我正在尝试将 X 和 Y 轴中心的 imageView 显示到 scrollView 上，当我运行应用程序时，它很好地适合设备的宽度。我还想平移和缩放imageView。我已经尝试了几乎所有已发布在
JavaFX 将 VBox 置于 GridPane 内居中
非常感谢您对我的问题提供帮助。我正在使用 JavaFX 和 NetBeans IDE。我正在为桌面客户端制作一个非常简单的启动窗口。该窗口当前看起来像这个图像。当前外观: 想要的外观(用油漆编辑)
android - 如何在不使用嵌套布局的情况下将 CheckBox 置于 EditText 下方的中心？
在下面的屏幕截图中，复选框没有在上面的编辑文本下方居中。我怎样才能使复选框居中，使其在编辑文本的正下方居中？我用来生成上述 UI 的布局是: 布局 XML 事情，我已经尝试过 Check
java - 尝试将 JLabel 置于 Paint 上方
一直在尝试创建一个基本上具有背景的程序(使用 Paint() 绘制)，然后在其上方放置一个带有图像的标签。继续获取 Paint 下面的 JLabel... 有什么想法吗？提前非常感谢。 publi
android - 如何将 FAB 置于 Scrollview 标签之外？
我在 ScrollView 布局内部的 React Native 项目中使用 FAB。正如预期的那样，FAB 位于 ScrollView 的末尾。如何将它始终放在 ScrollView 的顶部？下
java - 在线性布局中将 TextView 置于 ImageView 正下方
尽管文本长度大小不同，但我试图将文本直接对齐在每个图标下方。在这张截图中，我希望一切都以这一行为中心: 我曾尝试使用线性和相对布局来获得我想要的内容，但没有成功。这段代码是我现在拥有的，也是最接近我想
java - 将 JPanel 置于 Controller 之上
我的应用程序运行良好，但我需要通过 SaveFormController 获取 SaveForm。我需要更改 ApplicationMainFormController 中的 ButtonFuncti
ios - 将 UIImageView 置于 UIScrollView 中居中
我试图将 UIImageView 置于 ScrollView 的中心。这是我尝试过的代码，但没有结果。 UIImageView *iv = [[UIImageView alloc] initWithI
ios - 将 UIImageView 置于 MKMapView 的中心
我有一个包含 MKMapView 和 UIImageView 的 View 。 MKMapView 通过在其自动对齐上设置的约束来定位。对于 ImageView ，我想以编程方式将图像的中心定位在 I

首页

博学

6Ren·AI

商城

jekyll - 如何将 Jekyll 内容置于多列布局中？