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，一个潜行高峰。

正如您所看到的那样，Pagination也已实现，因此我可以看到最后一个条目（在config.toml中定义并通过.Paginator.Pages访问）的旧版本。

但是我正在考虑摆脱这个分页，并在旋转木马上改变这个列表，但是如果我能够与雨果这样做，我也不会，如果它可以和＃34一起使用插头n＆＃39;玩＆＃34;一个可以使用Bootstrap现有标记的轮播。

我怎么能做到这一点？

Answer 1

如果你可以用HTML做，那么你可以用Hugo来做，所以答案是肯定的，这是可能的。通过网上的简短搜索，似乎有几十个Bootstrap的轮播实现，所以只需选择其中一个。

例如，使用Bootstrap网站上的this question，您可以使用以下代码制作轮播：

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

此外，我已在此处输入您的网页类型＆＃34;帖子＆＃34;正如你在问题中所做的那样，但通常在雨果中它是＆＃34; post＆＃34;，所以你可能想要检查你需要哪一个。

如何使用Go / Hugo迭代标记制作旋转木马

1 个答案: