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>

这是一种如何循环遍历我们现在要创建的 frontmatter 内容的方法。 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
---

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

我不太确定您如何想象将其变成模块化设计。我想到的一种方法是拥有一个 parent 页面，并在其中包含针对各种主题（例如商业新闻或政治）的模块化页面。让我们试试吧。

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

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

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

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

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

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

在templates 文件夹中，新建一个名为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 %}，用户只需添加或删除空白页面并设置他想要显示的标题为headline/news。

我发现这种方法比其他任何方法都简单。

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

Grav/Twig - Implement text headlines as part of a modular page

twig

grav