如何在 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>

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

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

（screen_size 仅适用于此模板和 none 其他模板。）

Answer 1

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

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

这做不到。

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

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

How to set the value of a liquid variable inside of Javascript

html

javascript

css

liquid

jekyll