0

我一直在关注 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 -->

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

4

1 回答 1

1

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

user/pages/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

---

user/themes/mytheme/templates/my-2-column-page.html.twig
（注意 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 文件中键入专辑详细信息。

于 2016-06-09T01:59:29.027 回答