在液体中查找 window 宽度

Question

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

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

        {% include 'navigation' %}

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

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

先谢谢大家了！

Answer 1

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

说它只是在它真正知道 window 宽度是多少之前就加载了 Liquid。（用开发者的话来说，它会在 DOM 准备好之前加载）

或者长话短说，无法从 liquid 访问 window 宽度，所以你在这里打了一场败仗。

考虑使用 Javascript 向特定导航添加 class 以显示它。

Finding window width in liquid