Liquid是由Shopify创建并用Ruby编写的开源模板语言。它是Shopify主题的支柱，用于在店面上加载动态内容。自2006年以来，Liquid已在Shopify中投入生产，现在已被许多其他托管Web应用程序使用。
我想在基于 Jekyll 的网站中一次按顺序显示多个图像。但是，我只能使用以下代码显示列表的第一张图像。 </desc> <question vote="1"> <p>我想在基于 Jekyll 的网站中一次按顺序显示多个图像。但是，我只能使用以下代码显示列表的第一张图像。</p> <pre><code><script> function showNextImage() { var totalImages = {{ site.image_urls | size }}; var currentIndex = {{ current_image_index }}; if (currentIndex < totalImages - 1) { currentIndex++; } else { currentIndex = 0; } document.querySelector('img').src = '{{ site.image_urls[current_index] }}'; document.getElementById('current_image_index').value = currentIndex; return currentIndex; } </script> {% assign current_image_index = 0 %} {% if site.image_urls.size > 0 %} <img src="{{ site.image_urls[current_image_index] }}" alt="Image" width="100%"> <button onclick="showNextImage()">Next</button> <input type="hidden" id="current_image_index" value="{{ current_image_index }}"> {% endif %} </code></pre> <p>我已将图像存储在 _config.yml 中，如下</p> <pre><code>image_urls: - /images/pic1.jpeg - /images/pic2.jpg - /images/pic3.jpg </code></pre> <p>代码的 <strong>Next</strong> 按钮似乎不起作用。 如果您能帮助我检测上述代码中的错误，我将不胜感激。</p> </question> <answer tick="false" vote="0"> <p>Liquid 是 Jekyll 使用的模板引擎，它在将代码发送到浏览器之前在服务器上处理代码。当页面在浏览器中加载时，Liquid 不会再次执行，并且值<pre><code>{{ site.image_urls[current_index] }}</code></pre>无法通过 JavaScript 动态更新。</p> <p>JavaScript 需要能够完全在客户端处理动态部分。</p> <ol> <li>创建一个包含所有图像 URL 的 JavaScript 数组<pre><code>imageUrls</code></pre>。</li> <li>更改函数以使用 JavaScript 数组循环浏览图像。</li> </ol> <pre><code><script> var imageUrls = [ {% for image_url in site.image_urls %} "{{ image_url }}", {% endfor %} ]; function showNextImage() { var totalImages = imageUrls.length; var currentIndex = parseInt(document.getElementById('current_image_index').value, 10); if (currentIndex < totalImages - 1) { currentIndex++; } else { currentIndex = 0; } document.querySelector('img').src = imageUrls[currentIndex]; document.getElementById('current_image_index').value = currentIndex; } </script> {% assign current_image_index = 0 %} {% if site.image_urls.size > 0 %} <img src="{{ site.image_urls.first }}" alt="Image" width="100%"> <button onclick="showNextImage()">Next</button> <input type="hidden" id="current_image_index" value="{{ current_image_index }}"> {% endif %} </code></pre> </answer> </body></html>
Jekyll：按标题哈希按字母顺序对页面进行排序，仅当存在时才用另一个哈希替换
我的 YAML 始终有页面的标题哈希。 --- 标题：为什么绿茶和红茶应该混合。 --- YAML 有时对某些页面具有标题覆盖哈希。 --- 标题：为什么选择绿茶和红茶
使用 Liquid (Shopify) 从店面的内容/文件文件夹中输入图像
我是 Shopify Liquid 编码语言的初学者。 我在管理员的内容/文件文件夹中有一个图像，名为：“free-returns-grey-box”。 这是一个 PNG 文件。 我看过液体d...
当从 Explore 中传递过滤器时（如下例所示），无论出于何种原因，我们都无法让它在查询条件中提供双单引号。 在视图内的查询中有
Wavesurfer.js 波形未显示在 Shopify 自定义设置中
Stockoverflow 社区您好， 我在将 WaveSurfer.js 集成到 Shopify 商店的自定义页面部分时遇到问题。尽管成功实施了该部分，但波形
如何在浏览器控制台中看到console.log。在 mini-cart.liquid 中我做了： console.log({{request.origin}}) 但在控制台中看不到它。
如何在 Shopify Liquid 模板中正确显示 ACF 元字段中的 JSON 数组值？
我在我的测试网站（我用于网站开发）上使用 ACF 插件来添加为产品选择服装尺寸的功能。但是，我目前无法显示这些数据，即使......
在黎明（版本5.0.0）主题Shopify的收藏页面中，有内置的功能来查看产品总数。 我想显示当前产品有多少，当更多
在收藏页面，过滤器中的尺寸选项显示混乱，大致是这样的： M 号 XS 码 L 号 S号 我需要这样组织它： XS 码 S号 M 号 L 号 还有...
在注册表单中添加生日输入，显示在网页上，并在shopify上的客户管理中使用此数据进行过滤
我想通过在 Shopify 网站上添加生日输入来自定义注册表单，而无需任何应用程序。 然后在我的网页上显示生日数据。 然后可以重新设置生日月份的过滤功能...
Dotliquid 未明确识别 json 正文中给定的 null 值
我正在使用 Dotliquid 进行 JSON 转换。我想检查一个字段的值是否为空。例如， { “行”：空， “值”：“字符串” } ...
我想创建一个自定义表单供用户注册，因为我需要客户的生日。 所以我需要用户输入他的生日作为必填字段，并且我需要检查用户是否...
我开始将我的博客从 WordPress 迁移到 Shopify。我正在尝试使用博客标签将帖子分成类别。 问题是标签的元标题是自动生成的，并且元
使 JavaScript 函数可用于 Nunjucks 模板
使用 Eleventy 构建网站时，如何为我的 Nunjucks 模板提供 JavaScript 函数？ 假设我在 _includes 文件夹中有一个 Nunjucks 布局文件 my_layout.njk： 使用 Eleventy 构建网站时，如何为我的 Nunjucks 模板提供 JavaScript 函数？ 假设我在文件夹my_layout.njk中有一个Nunjucks布局文件_includes: <!doctype html> {% set targetItem = findItemById(items, itemId) %} <p>The value of the item with id {{ itemId }} is {{ targetItem.val }}.</p> 被调用的函数findItemById(items, id)在项目根文件夹的配置文件.eleventy.js中定义。我正在使用方法 addJavaScriptFunction()，如 Eleventy 的文档中有关 添加 JS 函数中所述。 module.exports = function(eleventyConfig) { eleventyConfig.addJavaScriptFunction("findItemById", function(items, id) { return items.find(item => item.id === id); }); }; 要处理的项目数组存储在文件夹items.json中的文件_data中： [ { "id": "a", "val": "foo" }, { "id": "b", "val": "bar" } ] 最后，我在项目的根文件夹中有一个液体模板文件item_b.liquid，用于使用 items 数组中的数据构建静态 html 页面。在构建网站时，我知道一个项目的 id 并且需要获取它的值。 --- layout: my_layout.njk itemId: b --- “_site”文件夹中所需的输出将是一个包含内容的 html 文件item_b/index.html <!doctype html> <p>The value of item with id b is bar.</p> 但是，Eleventy 找不到该函数findItemById。运行时 npx @11ty/eleventy 我收到错误消息： [11ty] Problem writing Eleventy templates: (more in DEBUG output) [11ty] 1. Having trouble writing to "_site/item_b/index.html" from "./item_b.liquid" (via EleventyTemplateError) [11ty] 2. (./_includes/my_layout.njk) [Line 1, Column 32] [11ty] Error: Unable to call `findItemById`, which is undefined or falsey (via Template render error) 我在 Fedora 38 Linux 上使用 Eleventy 版本 2.0.1。 据我所知，addJavaScriptFunction 不是 Eleventy 中的东西。但您可以创建一个过滤器来完成您想要的任务。假设 items 是一个数组，您可以创建一个过滤器，并在 Nunjucks 中调用它，如下所示： {% 设置 targetItem = 项目 | findItemById(itemId) %} 请参阅此页面了解更多信息： https://www.11ty.dev/docs/filters/ 此外，他们的 Discord 服务器上有大量 Eleventy 帮助，并且该网站上有 1,000 多篇关于 Eleventy 的博客文章。这里有一个专门关于过滤器的部分： https://11tybundle.dev/categories/filters/
Liquid Template - 如何将 JSON 对象作为字符串映射到输出字段
我是在逻辑应用程序中创建液体贴图的新手，在将 JSON 对象作为字符串映射到 JSON 输出上的字段时遇到一些问题。 我有这个输入，我想将每个对象映射为条...
Eleventy 网站构建器：使 JavaScript 功能可用于 Nunjucks 模板
使用 Eleventy 构建网站时，如何为我的 Nunjucks 模板提供 JavaScript 函数？ 假设我在 _includes 文件夹中有一个 Nunjucks 布局文件 my_layout.njk： 使用 Eleventy 构建网站时，如何为我的 Nunjucks 模板提供 JavaScript 函数？ 假设我在文件夹my_layout.njk中有一个Nunjucks布局文件_includes: <!doctype html> {% set targetItem = findItemById(items, itemId) %} <p>The value of the item with id {{ itemId }} is {{ targetItem.val }}.</p> 被调用的函数findItemById(items, id)在项目根文件夹的配置文件.eleventy.js中定义： module.exports = function(eleventyConfig) { eleventyConfig.addJavaScriptFunction("findItemById", function(items, id) { return items.find(item => item.id === id); }); }; 要处理的项目数组存储在文件夹items.json中的文件_data中： [ { "id": "a", "val": "foo" }, { "id": "b", "val": "bar" } ] 最后，我在项目的根文件夹中有一个液体模板文件item_b.liquid，用于使用 items 数组中的数据构建静态 html 页面。在构建网站时，我知道一个项目的 id 并且需要获取它的值。 --- layout: my_layout.njk itemId: b --- “_site”文件夹中所需的输出将是一个包含内容的 html 文件item_b/index.html <!doctype html> <p>The value of item with id b is bar.</p> 但是，Eleventy 找不到该函数findItemById。运行时 npx @11ty/eleventy 我收到错误消息： [11ty] Problem writing Eleventy templates: (more in DEBUG output) [11ty] 1. Having trouble writing to "_site/item_b/index.html" from "./item_b.liquid" (via EleventyTemplateError) [11ty] 2. (./_includes/my_layout.njk) [Line 1, Column 32] [11ty] Error: Unable to call `findItemById`, which is undefined or falsey (via Template render error) 我在 Fedora 38 Linux 上使用 Eleventy 版本 2.0.1。 据我所知，addJavaScriptFunction 不是 Eleventy 中的东西。但您可以创建一个过滤器来完成您想要的任务。假设 items 是一个数组，您可以创建一个过滤器，并在 Nunjucks 中调用它，如下所示： {% 设置 targetItem = 项目 | findItemById(itemId) %} 请参阅此页面了解更多信息： https://www.11ty.dev/docs/filters/ 此外，他们的 Discord 服务器上有大量 Eleventy 帮助，并且该网站上有 1,000 多篇关于 Eleventy 的博客文章。这里有一个专门关于过滤器的部分： https://11tybundle.dev/categories/filters/
我想随机化 Dawn Shopify 主题中特色系列中的订单产品。我看到相关产品的stakoverflow上有类似的解决方案：How to randomize related products...
如何在shopify上将javascript值分配给liquid？
我从javascript代码中获取了html单选按钮的值，我想将该值分配给shopify Liquid代码的变量，我可以这样做吗？ {{
我正在使用 Jekyll 和 Github 页面，使用 bundle exec jekyllserve 在本地进行测试。到目前为止，其他一切都运行良好。 我的帖子位于根目录下的 /_posts 文件夹中，并且输出正确......
我需要从集合中的元字段（内容类型：集合列表）获取图像列表。我正在使用这个逻辑，但它不起作用...... 代码片段 {% 分配 top_collections = 集合。