Я настраиваю файл шаблона HTML в подкаталоге блога Jekyll. В зависимости от размера экрана, я хочу, чтобы страница выставляла элементы по-разному (я решил не использовать в этом случае медиа-запросы CSS).Как установить значение переменной жидкости внутри Javascript
Как я понимаю, 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 и не думаю, что вы можете просто использовать {% assign %} как в JS, так что это кажется подозрительным. Но как будет/нужно делать такое присвоение жидкой переменной в JS?
(screen_size относится только к этому шаблону и никто другой.)
Я боюсь, что Liquid запускается на сервере, и вы смешаете его с js-кодом на стороне клиента. Я боюсь, что это не сработает. Вам нужно найти решение js для ваших макетов, только ! –
Где бы вы использовали 'screen_size'? Назначение жидкости выполняется при рендеринге веб-сайта, поэтому не имеет смысла использовать его в JS. – marcanuy
'screen_size' будет использоваться далее на странице среди HTML в выражении' if', поэтому примерно так: '{% if screen_size ==" small "%}
' и макет страницы ... – orlando21