javascript - 如何在 Javascript 中设置液体变量的值

Question

我在 Jekyll 博客的 _layout 子目录中自定义一个 HTML 模板文件。根据屏幕大小，我希望页面以不同方式布置元素(在这种情况下我决定不使用 CSS 媒体查询)。

据我所知，Liquid 不支持检测屏幕尺寸，因此我想为此使用 JS。在 HTML 模板的顶部，我想插入以下代码:

<script>
    if (window.matchMedia("(max-width: 768px)").matches) {
        {% assign screen_size = "small" %}
    } else if (window.matchMedia("(min-width: 769px)").matches){
        {% assign screen_size = "large" %}
    }
</script>

不知何故，在小于 769 像素的屏幕上，变量 screen_size 仍然被设置为 large。毫无疑问，JS 代码可以正确检测屏幕尺寸，但似乎 screen_size 只是被分配给条件语句中的最后一个值。

我是 Liquid 的新手，我认为你不能像在 JS 中那样使用 {% assign %}，所以这看起来很可疑。但是如何/应该如何在 JS 中进行这样的 Liquid 变量赋值？

(screen_size 仅适用于此模板，不适用于其他模板。)

Answer 1

参见 What is the difference between client-side and server-side programming?然后考虑当您使用 Jekyll 生成静态站点时，Liquid 使用的值是在您将页面上传到网络服务器之前确定的。

您遇到与从客户端 JS 到服务器端代码获取数据相同的问题，但时间间隔更大。

这是不可能的。

我建议您改变对媒体查询的看法，改为编写标准的响应式网站。