引导程序中的 Grav CMS 自定义页面模板:将不同的内容放入行和列中

Question

我一直在关注 Grav 文档 （https://learn.getgrav.org/cookbook/general-recipes#render-content-in-columns） 来弄清楚如何做到这一点，但运气不佳。我的页面内容是 default.md 的，但我无法弄清楚如何将图像和内容放入单独的列和行中。

我已经包含了我在HTML和CSS中创建的内容的屏幕截图。基本上我想将图像放入行的左列，将详细信息放入右列。看这里： https://i.stack.imgur.com/rqegC.jpg

但是，当我编辑页面模板时，我似乎只有一个"变量"（如果这是正确的词）控制所有内容。请参阅我的 base.html.twig 代码：

<div class="container">
        <div class="row">
            <div class="col-md-4">
                {% block content %} {# thumbnail image goes here #}
                {% endblock %}
            </div> <!-- COLUMN END -->
            <div class="col-md-8">
                {% block content %} {# album details go here #}
                {% endblock %}
            </div> <!-- COLUMN END -->
        </div> <!-- ROW END -->

如何指定一个内容块特定于图像，而另一个内容块特定于相册详细信息？

Answer 1

{% block content %} 是显示 .md 文件中的数据时唯一可用的块。若要在文档中显示的两列或多列中呈现数据（文本或图像），必须在 .md 文件中拆分它们（带 ---），然后使用 .html.twig 模板中{% for %}的 twig 函数来显示它们。

用户/页面/我的 2 列 page.md
（注意---前的额外行）

---
title: ' 2 Columns Page'
---
Column one is for the image thumb
![the thumbnail](../my-2-column-page/thumbnail.jpg) 
---
Here goes all the album details content. 
Phasellus id eleifend risus. In dui tellus, dignissim id 
viverra non, convallis sed ante. Suspendisse
---

user/themes/mytheme/templates/my-2-column-page.html.twig
（注意树枝函数 {% for %} ）

{% extends 'partials/base.html.twig' %}
{% block content %}
    {% set colsize = [4, 8] %}
    <div class="container">
        <div class="row">
           {% for key, column in page.content|split('<hr />') %}
               <div class="col-md-{{ colsize[key] }}">
                  {{ column }}
               </div>  
           {% endfor %}
        </div>
    </div>
{% endblock %}

或。。。

另一种方法（更简单）是将 .html.twig 模板定义为正常（没有"for"迭代）并直接调用图像：

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <img src="{{ page.media['thumbnail.jpg'].url }}" />
        </div>
        <div class="col-md-8">
            {{ page.content }}
        </div>
    </div>
</div>
{% endblock %}

图像文件名必须与页面文件夹中复制的文件匹配（user/pages/my-2-column-page/thumbnail.jpg），只需在 .md 文件中键入相册详细信息即可。