查找液体中的窗口宽度

Question

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

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

        {% include 'navigation' %}

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

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

提前谢谢你们了！

Answer 1

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

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

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

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