我想为页面导航创建一个小的侧面导航。该站点包含多个图像,一个在另一个之上,导航位于每一个图像内,并链接到个人 ID。
我正在将 jekyll 与液体模板引擎一起使用。为了不对每个元素进行硬编码,我创建了一个 for 循环,它获取单独的 .yml 文件的数据。
它应该是这样的:
我的问题是它不适用于第一个元素。在第一个导航元素内,应该选择第一个圆圈。但它不是:
这是代码:
{% for element in site.data.elements %}
{% capture number %}{{ forloop.length }}{% endcapture %}
<section id="spezial-{{forloop.index}}" {% assign imgIndex = {{forloop.index0}} %} class="spezial-img" style="background-image:url('{{ element.bild }}');">
<div class="container spezial-container">
<div class="sub-navi">
<ul>
{% for y in (1..number) %}
{% if imgIndex == naviIndex %}
<li><a href="#spezial-{{forloop.index}}" {% assign naviIndex = {{forloop.index}} %} {{ naviIndex }} class="active" ><i class="fa fa-dot-circle-o"></i></a></li>
{% else %}
<li><a href="#spezial-{{forloop.index}}" {% assign …Run Code Online (Sandbox Code Playgroud)