Question

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

我已经包含了我在HTML和CSS中创建的截图。基本上我想将一个图像放入一行的左列，并将细节放入右列。见这里：http://imgur.com/HuTSGw5

当我编辑页面模板时，我似乎只有一个“变量”（如果这是正确的词）控制所有内容。请参阅我的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文件（使用---），然后在您的文件中使用twig函数{% for %}。用于显示它们的html.twig模板。

用户/页/ my-2-column-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 ---

用户/主题/ mytheme的/模板/我-2-列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模板定义为正常（没有＆＃34;用于＆＃34;迭代）并直接调用图像：

{% 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文件中键入相册详细信息。

Bootstrap中的Grav CMS自定义页面模板：将不同的内容放入行和列中

1 个答案:

或......