Liquid 是服务端渲染模板语言，无法直接访问浏览器 DOM，因此不能通过 document.getElementById() 等方式读取 HTML 元素内容并赋值给 Liquid 变量。所有 Liquid 变量必须在页面渲染前由服务器提供。
liquid 是服务端渲染模板语言，无法直接访问浏览器 dom，因此不能通过 `document.getelementbyid()` 等方式读取 html 元素内容并赋值给 liquid 变量。所有 liquid 变量必须在页面渲染前由服务器提供。
在 Shopify 或其他基于 Liquid 的平台中，你可能会看到类似这样的 HTML：
<span id="product_wished_id">12345</span>
并希望用 Liquid 实现类似逻辑：
{% assign myvalue = ??? %}
{% if myvalue == "12345" %}
<p>该商品已被心愿单添加。</p>
{% endif %}这是不可行的 —— 因为 {% assign %} 在页面发送到浏览器之前就已执行完毕，而 中的值是在 HTML 渲染后才存在于客户端 DOM 中。Liquid 无权、也无法“回读”自身生成的 HTML 内容。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
✅ 正确做法：将数据提前注入 Liquid 上下文
确保所需值（如 product_wished_id）作为 Liquid 对象属性或全局变量，在渲染时即可使用：
<!-- 假设 product.wished_id 已由后端传入 -->
{% assign myvalue = product.wished_id %}
{% if myvalue != blank %}
<span id="product_wished_id">{{ myvalue }}</span>
{% if myvalue == "12345" %}
<p>该商品已被心愿单添加。</p>
{% endif %}
{% endif %}✅ 替代方案：用 JavaScript 处理客户端逻辑
若 ID 是动态生成（如通过 AJAX 加载），或需响应用户交互，则必须使用 JavaScript：
<span id="product_wished_id">12345</span>
<script>
const wishedId = document.getElementById('product_wished_id').textContent.trim();
if (wishedId === '12345') {
console.log('匹配成功');
// 可进一步触发 API 调用、显示提示等
}
</script>⚠️ 注意事项：
- 不要尝试用 {{ content_for_header }} 或 {{ content_for_layout }} “绕过”限制——这些仍是服务端注入点，无法桥接运行时 DOM；
- Liquid 的 if/unless 仅适用于已知的上下文变量（如 product, cart, settings, 自定义 assign 或 capture 值）；
- 若需根据前端状态控制 Liquid 渲染逻辑（如权限、A/B 测试分组），应通过 URL 参数、Cookie（配合服务端解析）或 Headless 方式预请求数据。
? 总结：Liquid ≠ JavaScript。把数据准备好再渲染，而非渲染后再抓取——这是服务端模板的核心原则。
