如何在特定text.md文件中添加css类

Question

我正在使用Grav模块化页面来构建站点，但是找不到如何针对特定的模块来添加css类。

我已经找到了这个https://learn.getgrav.org/16/content/media，但看不出有没有办法做到这一点。

我试图实现的是为页面中的每个模块化div提供不同的背景。

Answer 1

在模板中:所有模块的共享类

正如一个模块所暗示的那样，为了显示它，要在父模板的Twig模板中浏览paren‘its页面集合，可以在其中添加任何HTML和CSS。

例如，以下是遍历集合的一种方式：

{% for module in page.collection %}
    <section class="module">
        {{ module.content }}
    </section>
{% endfor %}

在模板中:特定类

您可以通过使用Twig变量来自定义CSS类。最安全的方法是使用页面的slug，其中已经有转义字符：

{% for module in page.collection %}
    <section class="module_{{module.slug}}">
        {{ module.content }}
    </section>
{% endfor %}

在降价中

您可以使用现有的选项来定义CSS：

classes: module1

然后通过使用header()函数在Twig中使用它：

{% for module in page.collection %}
    <section class="module_{{module.header.classes}}">
        {{ module.content }}
    </section>
{% endfor %}

以特定模块为目标

现在，要针对Twig中的特定模块，您必须导入一个页面。

下面是访问其他页面或子页面内容的一般方法：

{% set imported_page = page.find("/route/to/the/page") %}

然后，您可以使用header()和content()函数来访问该导入页面的首页和内容：

    <section class="module_{{imported_page.header.classes}}">
        {{ imported_page.content }}
    </section>