carousel - 如何使用 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 这样做，也不知道是否可以“即插即用”轮播将使用 Bootstrap 的现有标记。

我怎样才能做到这一点？

Answer 1

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

例如，使用 carousel for 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，您可以通过执行以下操作使用 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”，因此您可能需要检查您需要哪一个。