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

Question

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

我想做的是: 我的网站有两种不同的导航，一种用于移动版本，另一种用于桌面版本。在 Liquid 中，导航像这样加载到标题中:

        {% include 'navigation' %}

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

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

先谢谢你们了!

Answer 1

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

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

或者长话短说，没有办法从 liquid 访问窗口宽度，所以你在这里打了一场败仗。

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