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

Я начну с самого простого решения, которое позволит достичь вашей цели. Сначала я буду рассматривать это как обычную страницу, а не как модульную страницу.

В вашем пользовательском файле давайте определим новый шаблон в вашем текущем шаблоне. Антиматерия по умолчанию, так что я буду работать с этим. Создайте файл news.html.twig в папке user - templates - antimatter и вставьте следующий блок кода.

{#  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 хранятся в папке пользовательских страниц. Имя папки указывает, среди прочего, на относительный адрес страницы, номер только для целей заказа и на данный момент не имеет значения, файл уценки внутри указывает, какой шаблон использовать.

Давайте создадим на страницах папку с именем 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, и вы можете получить его атрибуты.

Я не совсем уверен, как бы вы представили, как превратить это в модульную конструкцию. Один из способов, который приходит на ум, - это иметь родительскую страницу, а внутри нее иметь модульные страницы для различных тем, таких как деловые новости или политика. Давайте попробуем это.

Начнем с родительского шаблона, назовем его newscontainer.html.twig. В нем мы должны указать, что grav должен извлечь все свои модульные потомки и выполнить итерацию. Грав называет этих детей коллекцией страниц. Мы просто хотим выплюнуть их содержание.

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

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

Теперь в папке 02.news измените имя файла уценки на 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, который мы сделали ранее, и изменить содержимое по своему желанию. Он должен отображаться правильно, если вы идете на whatpage.com/ новости

В итоге структура страниц выглядит так

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

Answer 2

В качестве дополнительного комментария к ответу Дэна, вот что я наконец-то сделал:

Определен частичный шаблон ветки

<!-- 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 %} и пользователю просто нужно добавить или удалить пустые страницы и установить заголовок, который он хочет отображать в качестве заголовка / новостей.

Я обнаружил, что такой подход был проще, чем любой другой.