Grav/Twig - 将文本标题实现为模块化页面的一部分

Question

我想实现一个新闻标题横幅。

标题横幅的 HTML 代码如下：

  <!-- hot news start -->
  <div class="col-sm-16 hot-news hidden-xs">
    <div class="row">
      <div class="col-sm-15"> <span class="ion-ios7-timer icon-news pull-left"></span>
        <ul id="js-news" class="js-hidden">
          <li class="news-item"><a href="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor</a></li>
          <li class="news-item"><a href="">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium</a></li>
          <li class="news-item"><a href="">Donec quam felis, ultricies nec, pellentesque eu</a></li>
          <li class="news-item"><a href="">Nulla consequat massa quis enim. Donec pede justo, fringilla</a></li>
          <li class="news-item"><a href=""> Donec pede justo, fringilla vel, aliquet nec, vulputate eget ultricies nec, pellentesque</a></li>
          <li class="news-item"><a href="">In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo</a></li>
          <li class="news-item"><a href="">Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis </a></li>
        </ul>
      </div>
      <div class="col-sm-1 shuffle text-right"><a href="#"><span class="ion-shuffle"></span></a></div>
    </div>
  </div>
  <!-- hot news end --> 

我想做这个，以便它可以在模块化页面中使用。这个想法是用户可以只输入类似这样的内容：

news:  
    text: Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    url: foo.com/lorem
news:
    text: Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
    url: foo.com/sedut
...

整个块都会被渲染。我想知道如何在 Grav/Twig 中实现它。如果有人回答，请记住，我对 Grav 比较陌生，所以详细的回答比简洁的回答更受欢迎。

Answer 1

我将从最简单的解决方案开始，以实现您的目标。 首先，我会将其视为常规页面，而不是模块化页面。

在您的用户文件中，让我们在当前模板中定义一个新模板。反物质是默认的，所以我将使用这个。在 user - templates - antimatter 文件夹中创建 news.html.twig 并粘贴到以下代码块中。

{#  user/templates/antimatter/news.html.twig #}

<div class="col-sm-16 hot-news hidden-xs">
 <div class="row">
  <div class="col-sm-15"> <span class="ion-ios7-timer icon-news pull-left"></span>
    <ul id="js-news" class="js-hidden">
    {% for news in page.header.news %}
        <li class="news-item"><a href="{{news.url}}">{{news.text}}</a></li>
    {% endfor %}
    </ul>
  </div>
  <div class="col-sm-1 shuffle text-right"><a href="#"><span class="ion-shuffle"></span></a></div>
</div>

这是一种遍历我们现在将创建的前端内容的树枝方式。 Grav 中的所有页面都存储在 user - pages 文件夹中。文件夹名称指定了页面的相对地址，数字仅用于排序目的，暂时无关紧要，里面的markdown文件指定使用哪个模板。

让我们在页面中创建一个名为 02.news 的文件夹和一个名为 news.md 的文件。因此，它将使用我们之前创建的新闻模板。将其粘贴到 news.md 中

<!-- user/pages/02.news/news.md -->

---
news: 
-
    text: Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    url: foo.com/lorem
-
    text: Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    url: foo.com/lorem
-
    text: Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    url: foo.com/lorem
---

这样做我们创建了一个新闻数组，每个条目都有文本和网址。现在您可以通过 page.header.news 访问它，并且可以检索它的属性。

我不太确定您会如何将其变成模块化设计。想到的一种方法是有一个父页面，并且在其中有用于各种主题的模块化页面，例如商业新闻或政治。让我们试试吧。

从父模板开始，我们称它为 newscontainer.html.twig。在其中我们需要指定 grav 应该检索它的所有模块化子项并迭代。 Grav 称这些孩子为页面的集合。我们只想吐出他们的内容。

{# user/templates/antimatter/newscontainer.html.twig #}

{% for module in page.collection() %}
    {{module.content}}
{% endfor %}

现在在 02.news 文件夹中，将 markdown 文件名更改为 newscontainer，以便它使用我们的新模板。现在它作为所有新闻的父容器。在里面，指定它应该加载到它的 page.collection 中所有它的模块化子项。该限制意味着最多将加载 20 个模块化页面。

<!-- user/pages/02.news/newscontainer.md -->

---
title: News
content:
   items: '@self.modular'
   limit: 20
---

在模板文件夹中，创建一个名为 modular 的新文件夹，并将我们之前制作的 news.html.twig 模板移动到其中。模块化页面在此文件夹中查找模板。

差不多了。最后，在 02.news 文件夹中，我们现在可以创建模块化页面。您可以通过创建以 _ 而不是数字开头的新文件夹来做到这一点，例如创建 _politics 和 _business。您现在可以将我们之前制作的 news.md 复制到每个文件中，并根据需要更改内容。如果您访问whateverpage.com/news

，它应该会正确显示

最终页面结构是这样的

pages
  01.Home
      default.md
  02.News
      newscontainer.md
      _business
          news.md
      _politics
          news.md

Answer 2

作为对 Dan 回答的补充评论，这是我最终所做的：

定义了部分树枝模板

<!-- hot news start -->
<div class="col-sm-16 hot-news hidden-xs">
    <div class="row">
            <div class="col-sm-15"> <span class="ion-ios7-timer icon-news pull-left"></span>
                    <ul id="js-news" class="js-hidden">
                            {% set items = page.find('/ticker').children %}
                            {% for item in items %}
                                    <li class="news-item"><a href="{{ item.url }}">{{ item.title }} </a></li>
                            {% endfor %}
                    </ul>
            </div>
            <div class="col-sm-1 shuffle text-right"><a href="#"><span class="ion-shuffle"></span></a></div>
    </div>
</div>
<!-- hot news end -->

在/ticker 文件夹下填充了只有标题的空白页面（不可见）。

模板可以在任何地方使用{% include %}，用户只需要添加或删除空白页面并将他想要显示的标题设置为标题/新闻。

我发现这种方法比任何其他方法都容易。