如何用JavaScript修改Liquid中assign定义的index变量

你无法直接通过JavaScript修改Liquid变量，二者的运行环境和执行时机完全不重叠：

• Liquid是服务端模板语言，所有Liquid代码（包括{% assign index = 0 %}变量赋值、{{ index }}变量渲染）都会在页面从服务器发送到用户浏览器之前，被完全编译成静态HTML文本。等浏览器加载页面并执行JavaScript时，源码里已经不存在任何Liquid语法，自然也不存在可以被修改的Liquid变量。

你只需要在前端层面维护动态的索引值，同步更新页面上的展示内容即可，不需要修改Liquid变量本身：

1. 调整Liquid模板代码，给展示index值的元素加上唯一标识，方便JavaScript定位操作：

{% assign index = 0 %}
<!-- 给显示索引的标签加专属id，后续JS直接操作这个节点 -->
<span id="splide-index-display">{{ index }}</span>

2. 修改Splide对应的JavaScript逻辑，在滑块切换时同步更新页面上的显示内容：

import Splide from '@splidejs/splide';
document.addEventListener( 'DOMContentLoaded', function () {
  // 提前获取展示索引的DOM节点
  const indexShowNode = document.getElementById('splide-index-display');
  const splide =  new Splide('.splide', {
    type   : 'loop',
    perPage: 4,
    perMove: 1,
  } ).mount();

  // 初始化时先同步一次初始索引，避免首屏显示和实际滑块位置不匹配
  indexShowNode.textContent = splide.index;

  splide.on( 'move', function () {
    console.log(splide.index)
    // 滑块移动时直接更新DOM节点的展示内容
    indexShowNode.textContent = splide.index;
  } );
});

如果后续其他前端逻辑需要用到这个索引值，不需要回溯Liquid变量，直接读取Splide实例上的splide.index属性，或者从展示节点上读取解析后的值即可。所有前端交互产生的动态状态，直接在JavaScript层维护就可以，不需要和服务端渲染阶段的Liquid变量做绑定。

内容的提问来源于stack exchange，提问作者Nguyễn Điệp