如何在Jekyll中创建展示指定文章的Bootstrap 4轮播组件

步骤1：给需要轮播的文章添加标记 #

在你要展示到轮播的文章的Front Matter块中，添加slider: true标识，示例如下：

---
title: 示例文章标题
date: 2024-01-01
categories: 技术
slider: true
image: /assets/xxx.jpg # 这里填你文章轮播要展示的封面图路径
---

用独立字段比新增分类的方式更灵活，不会和你的正常文章分类逻辑冲突。

步骤2：用Liquid筛选指定文章 #

你只需要先筛选出所有带slider: true标识的文章，后续遍历这个筛选后的集合即可，无需遍历全站所有文章：

{% assign slider_posts = site.posts | where: "slider", true %}

如果你坚持要用slider分类来标记，就把上面的筛选语句换成：

{% assign slider_posts = site.posts | where_exp: "post", "post.categories contains 'slider'" %}

步骤3：改造Bootstrap 4轮播代码 #

把你原本的硬编码Bootstrap轮播代码替换成结合Liquid逻辑的版本即可，完整代码如下：

<!--Carousel Wrapper-->
<div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel">
  {% assign slider_posts = site.posts | where: "slider", true %}
  <!--Indicators-->
  <ol class="carousel-indicators">
    {% for post in slider_posts %}
    <li data-target="#carousel-example-2" data-slide-to="{{ forloop.index0 }}" {% if forloop.first %}class="active"{% endif %}></li>
    {% endfor %}
  </ol>
  <!--/.Indicators-->
  <!--Slides-->
  <div class="carousel-inner" role="listbox">
    {% for post in slider_posts %}
    <div class="carousel-item {% if forloop.first %}active{% endif %}">
      <div class="view">
        <img class="d-block w-100" src="{{ post.image }}" alt="{{ post.title }}">
        <div class="mask rgba-black-light"></div>
      </div>
      <div class="carousel-caption">
        <h3 class="h3-responsive"><a href="{{ post.url }}" style="color: #fff;">{{ post.title }}</a></h3>
        <p>{{ post.excerpt | strip_html | truncate: 50 }}</p>
      </div>
    </div>
    {% endfor %}
  </div>
  <!--/.Slides-->
  <!--Controls-->
  <a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  <!--/.Controls-->
</div>
<!--/.Carousel Wrapper-->

你可以根据需求调整轮播项里的展示内容，比如去掉摘要只保留标题，或者调整蒙版样式等。

如果你要继续用第三方轮播插件 #

只需要把所有{% for post in site.posts %}的遍历对象替换成我们上面筛选出来的slider_posts即可，修改后的完整代码如下：

{% assign letterstring = "a,b,c,d,e,f,g,h,i,j,k,l,m,n" %}
{% assign letters = letterstring | split: ',' %}
{% assign slider_posts = site.posts | where: "slider", true %}

<div class="carousel__holder">
    <div class="carousel">
        {% for post in slider_posts %}
          <input class="carousel__activator" type="radio" name="carousel" id="{{ letters[forloop.index0] }}" {% if forloop.first %}checked="checked"{% endif %} />
        {% endfor %}
        {% for post in slider_posts %}
          {% if forloop.index == forloop.length %}
            {% assign nextindex = 0 %}
          {% else %}
            {% assign nextindex = forloop.index0 | plus: 1 %}
          {% endif %}
          {% assign nextletter = letters[nextindex] %}
          {% if forloop.index0 == 0 %}
            {% assign previndex = forloop.length | minus: 1 %}
          {% else %}
            {% assign previndex = forloop.index0 | minus: 1 %}
          {% endif %}
          {% assign prevletter = letters[previndex] %}
          <div class="carousel__controls">
              <label class="carousel__control carousel__control--backward" for="{{ prevletter }}"></label>
              <label class="carousel__control carousel__control--forward" for="{{ nextletter }}"></label>
          </div>
        {% endfor %}
        <div class="carousel__track">
          <ul>
            {% for post in slider_posts %}
            <li class="carousel__slide" style="background-image: url('{{ post.image }}');"><a href="{{ post.url }}">{{ post.title }}</a></li>
            {% endfor %}
          </ul>
        </div>
        <div class="carousel__indicators">
            {% for post in slider_posts %}
              <label class="carousel__indicator" for="{{ letters[forloop.index0] }}"></label>
            {% endfor %}
        </div>
    </div>
</div>

注意要保证letterstring里的字母数量多于你要展示的轮播文章数量即可。

内容的提问来源于stack exchange，提问作者Radiowire111