如何使用 Go/Hugo 迭代标记制作轮播

Question

我正在用 Bootstrap 4 创建一个 Go/Hugo 主题，在我的 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 参数，用于比博客风格更有创意的东西。 Here，偷偷摸摸。

如您所见，分页也已实现，因此我可以看到最后一个条目中较早的条目（在 config.toml 中定义并通过 .Paginator.Pages 访问）。

但我正在考虑摆脱这个分页并在轮播中转换这个列表，但我不知道我是否能够使用 Hugo 这样做，也不知道是否可以“即插即用”a可以使用 Bootstrap 的现有标记的轮播。

我怎样才能做到这一点？

Answer 1

如果你能在 HTML 中做到，那么你也可以用 Hugo 做到，所以答案是肯定的，这是可能的。在网上简单搜索一下，Bootstrap 的轮播实施似乎有几十种，因此只需选择其中一种即可。

例如，对于 Bootstrap 站点上的 carousel for Bootstrap v4 alpha，您可以使用以下代码制作轮播：

<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，您可以通过执行以下操作使用 Hugo 生成此 HTML：

<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>

此外，我已将您的页面类型设置为“posts”，就像您在问题中所做的那样，但通常在 Hugo 中它是“post”，因此您可能需要检查一下你需要哪个。

如何使用 Go/Hugo 迭代标记制作轮播

How to make a Carousel out of Go/Hugo Iteration Markup

carousel

hugo

bootstrap-4