Как сделать карусель из разметки Go/Hugo Iteration

Я создаю тему Go/Hugo с помощью Bootstrap 4, и в моем файле шаблона index.html у меня есть приведенный ниже код для перебора опубликованных статей:

    <div class="col-12 col-md-12" id="main">
    
      <div class="row">
    
        {{- range .Paginator.Pages -}}
          {{- if eq .Type "posts"}}
        <div class="col-12 col-md-3 col-lg-3">
          <figure><a href="{{ .Permalink }}"><img src="{{ .Params.banner }}" /></a></figure>
          <p>{{ .Summary }}</p>
        </div>
          {{- end -}}
        {{- end }}
    
      </div>

    </div>

Он еще не совсем готов, но уже позволяет мне использовать обложку, определенную как параметр FrontMatter, для чего-то более творческого, чем блогоподобный стиль. Вот, краткий обзор.

Как вы можете видеть там, также реализована нумерация страниц, поэтому я могу видеть все, что старше последних записей (определено в config.toml и доступно через .Paginator.Pages).

Но я думал избавиться от этой разбивки на страницы и преобразовать этот список в карусель, но я не знаю, смогу ли я сделать это с Хьюго, или если можно подключить и воспроизвести карусель, которая будет работать с существующим Bootstrap. наценка.

Как я мог это сделать?


carousel bootstrap-4 hugo
person Bruno Augusto    schedule 30.05.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Если вы можете сделать это в HTML, то вы можете сделать это и с Hugo, так что да, это возможно. Недолгий поиск в сети показал, что есть десятки карусельных реализаций для Bootstrap, так что просто выберите одну из них.

Например, с помощью карусели для Bootstrap v4 alpha на сайте Bootstrap, вы можете сделать карусель с этим кодом:

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="d-block img-fluid" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="..." alt="Third slide">
    </div>
  </div>
</div>

Предполагая, что вы определили параметры carouselimage и carouselimagealt во вступительной части всех ваших статей, вы можете сгенерировать этот HTML-код с помощью Hugo, выполнив следующие действия:

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    {{ $paginator := .Paginate (where .Data.Pages "Type" "posts") }}
    {{ range $paginator.Pages }}
      <div class="carousel-item active">
        <img class="d-block img-fluid" src="{{ .Data.carouselimage }}" alt="{{ .Data.carouselimagealt }}">
      </div>
    {{ end }}
  </div>
</div>

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

person Jack Taylor    schedule 30.05.2017
comment
Спасибо за ваше время. После публикации вопроса я понял, что в конце концов это просто HTML. Го/Хьюго не должен ни во что вмешиваться. Однако в итоге я использовал bxSlider вместо Bootstrap. У него больше возможностей. А по поводу Type, по крайней мере, пока лучше изучаю постоянные ссылки Хьюго, а пока специально поменял - person Bruno Augusto; 31.05.2017