我正在使用Grav CMS创建模块化网页;但是,我很难根据内容的生成方式自定义布局。
我已经按照文档找到Grav主站点,之后我将对我的站点进行建模。
我的文件夹结构基本上是:
pages
01.home
_section1
_section2
在每个部分文件夹中,我都有.md文件。每个部分都被视为“主页”的子页面。
我已经创建了模板文件modular.html.twig,其中我有以下代码:
{% extends 'partials/base.html.twig' %}
{% block content %}
{% for child in page.children() %}
{{ child.content() }}
{% endfor %}
{% endblock %}
此代码遍历子页面以将内容加载到主页上。在我的模板中,我只是使用{{ content }}
我最终得到的是一个包含垂直堆叠内容和重复html的页面, as such
我想要做的是唯一地定义每个子页面(部分),以便我可以在我的html as such中以不同方式操纵内容。
我考虑过为每个部分创建单独的模板文件,但我的大部分内容都是嵌套的。
例如我有类似的东西:
<div class="row">
<div class="section-1">
<h1>{{ content }}</h1> <!--Needs to be unique-->
</div>
<div class="section-2">
<h1>{{ content }}</h1> <!--Needs to be unique-->
</div>
</div>
是否有可能完成我正在尝试使用此框架的内容?如果是这样,我该怎么办呢?
谢谢
答案 0 :(得分:0)
我认为有很多方法可以做到这一点。对我来说,我使用页面标题来设置每个部分的CSS类。
我的部分md文件可能如下所示(例如mysection.md)
---
title: Section 1
section_class: section-1
---
This is the content of section 1.
这是我的modular.html.twig:
{% extends 'partials/base.html.twig' %}
{% block content %}
<div class="row">
{% for child in page.children() %}
<div class="{{ child.header.section_class }}">
{{ child.content() }}
</div>
{% endfor %}
</div>
{% endblock %}
在mysection.html.twig中,我打印了该部分的内容
<h1>{{ page.content }}</h1>
我希望这会有所帮助。