2

我正在使用 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 参数的封面图像，用于比博客风格更具创意的东西。在这里，一个潜行高峰。

正如你所看到的那样，分页也实现了，所以我可以看到最后一个条目（在 中定义config.toml并通过 访问.Paginator.Pages）更旧的内容。

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

我怎么能做到这一点？

4

1 回答 1

3

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

例如，使用Bootstrap 站点上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>

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

于 2017-05-30T23:47:18.663 回答