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>

不知何故，在小于769px的屏幕上，变量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获取数据到服务器端代码的问题相同，但时间间隔更大。

这不可能。

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

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

1 个答案: