时间戳

首页 > 解决方案 > 在液体中查找窗口宽度

shopify - 在液体中查找窗口宽度

问题描述

我正在寻找一种方法来使用 if 语句，包括直接在 Liquid 中的视口宽度，而不是在 CSS 中。

我想要做的是：我的网站有两种不同的导航，一种用于移动版，另一种用于桌面版。在 Liquid 中，导航被加载到标题中，如下所示：

        {% include 'navigation' %}

所以我希望我能做这样的事情：

    {%- if width > 1000 -%}
        {% include 'navigation' %}
    {%- else -%}
        {% include 'navigation-mobile' %}
    {%- endif -%}

提前谢谢你们！

标签： shopifyliquid

解决方案

Liquid 是一个后端框架，这意味着它无法访问文档和窗口对象或任何前端的东西。

简单地说，在它真正知道窗口宽度是多少之前，它会加载液体。（用开发人员的话来说，它在 DOM 准备好之前加载）

或者长话短说，没有办法从液体中访问窗口宽度，所以你在这里打了一场失败的战斗。

考虑使用 Javascript 将类添加到特定导航以显示它。

推荐阅读