- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想为页面导航创建一个小的侧面导航。
该站点包含多个图像,一个在另一个之上,导航位于每一个图像内,并链接到个人 ID。
我正在将 jekyll 与液体模板引擎一起使用。为了不对每个元素进行硬编码,我创建了一个 for 循环,它获取单独的 .yml 文件的数据。
它应该是这样的:
Image
我的问题是它不适用于第一个元素。在第一个导航元素内,应该选择第一个圆圈。但它不是:
Image
这是代码:
{% 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 naviIndex = {{forloop.index}} %}><i class="fa fa-circle-o"></i></a></li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
</section>
{% endfor %}
最佳答案
您正在比较两个工作方式不同的计数器。
{% assign imgIndex = {{forloop.index0}}
array.size-1
{% assign naviIndex = {{forloop.index}}
array.size
imgIndex == naviIndex
0 == 1 -> false
imgIndex
元素,例如,事件类将设置在第一个
naviIndex
元素,但这是错误的。所有以下元素都是一样的。
{% for element in site.data.elements %}
{% capture number %}{{ forloop.length }}{% endcapture %}
{% assign imgIndex = {{forloop.index}} %}
<section id="spezial-{{imgIndex}}" class="spezial-img" style="background-image:url('{{ element.bild }}');">
<div class="container spezial-container">
<div class="sub-navi">
<ul>
{% for naviIndex in (1..number) %}
{% if imgIndex == naviIndex %}
<li><a href="#spezial-{{forloop.index}}" %} {{ naviIndex }} class="active" ><i class="fa fa-dot-circle-o"></i></a></li>
{% else %}
<li><a href="#spezial-{{forloop.index}}" {% assign naviIndex = {{forloop.index}} %}><i class="fa fa-circle-o"></i></a></li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
</section>
{% endfor %}
关于html - Jekyll 和 Liquid for 循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30886691/
我的理解是 Liquid 将 Ruby 哈希转换为用于标签的数组。例如,当使用 Jekyll 时: {% for category in site.categories %} {{ categ
如何使用两个参数编写/调用自定义液体标签? 上下文:Jekyll 2.1.1 我有一些页面显示为选项卡集。我的页面前端可以为某些页面定义额外的选项卡,如下所示: --- blah: blah extr
谁能指出支持的 Jekyll Liquid 标签的最终列表? 我知道来自 https://github.com/mojombo/jekyll/wiki/liquid-extensions 的 {{ c
我已经用液体编写了一个自定义标签,我想将一个变量传递给它。 Liquid 标签会将任何参数转换为字符串。 例如: {% nav page /some/url.html %} 其中 page 是一个变量
我正在尝试为我的帖子下方的导航链接做一个循环。这是进入posts.html的_layout 我无法获得不显示帖子是最后一个还是第一个的链接。任何帮助都是极好的。 {% 用于 site.posts 中的
如何在 Liquid 中跳出循环,主要是 for 循环?我试过 {% break %} ,但失败并显示保存文件时出错:未知标签“中断”。 我正在尝试实现以下目标: var variants = [];
有谁知道 Azure 在逻辑应用程序的 Liquid 连接器中使用什么风格的 Liquid 模板引擎?我们的印象是它是 DotLiquid,但事实似乎并非如此。 有液体连接器的源代码吗? 最佳答案 它
我有以下液体标记: {{ 'image.jpg' | theme_image_tag }} 它的渲染效果如下: 如何向其中添加类或任何选项?我希望它呈现如下: 我使用 Locomotive CMS
当我在 Windows 10 上运行命令 bundle exec jekyllserve --trace 时,出现以下错误: Liquid Exception: Liquid syntax error
当我在 Windows 10 上运行命令 bundle exec jekyllserve --trace 时,出现以下错误: Liquid Exception: Liquid syntax error
我正在尝试将 JS 文件合并到一个文件中,但是我需要使用 js 文件中的 if 语句设置条件。 我已经创建了 file.js.liquid 但它似乎不起作用;例如,我添加了一个测试: {% if te
我最近按照本教程中的以下步骤概述将 Liquid Fire 添加到我的 Ember CLI 0.2.3 项目中:http://www.programwitherik.com/doing-animati
我有一个jekyll网站,并且有一个类别(称为photo),我想为页面创建一个单独的布局,该页面仅列出photo类别中的帖子。我还想将photo类别的帖子保留在主索引页面之外。 最佳答案 所有类别都可
我正在 Jekyll 中编写一个网站,它使用 Liquid。 我希望页面的正面内容看起来像这样: --- title: Designing algorithms that scale horizont
我在 for 循环中提取元数据值,需要将它们显示在逗号分隔列表中。 代码(为便于阅读而添加的空格): {% if asset.metadata['field01'] %}{{asset.metadat
我正在使用 Shopify 并想连接到客户标签,但它们区分大小写。因此 {% if customer.tags contains "wholesale"%} 与 {% if customer.tags
我正在为我的商店开发一个新的 Shopify 模板。我正在尝试将标题中的字符数和描述中的字符数相加。从 200 中减去这个总数,并在我的截断中使用结果。 (这是因为我想在每个框中获得相同数量的字符)
在一个简单的 Jekyll 站点中,我有一个如下所示的菜单: Home Page 1 Page 2 Page 3 当我输出 page.url在这个块之前或之后,它总
我接到了一个小任务,为 Shopify 上制作的主题添加功能。我擅长 PHP,但 shopify 使用 .liquid 文件。 我想知道它是如何像这个代码片段一样工作的 {{% if payment.
我正尝试在 Shopify 和 less 中使用很棒的字体。我将 less 文件编译成 css 并添加了以下图标。 .icon-caret-down:before { content: "\f0d
我是一名优秀的程序员,十分优秀!