如何使用JS字符串插值插入Shopify section？报错‘非有效section类型’

问题根因 #

你混淆了服务端Liquid渲染和客户端JavaScript执行的生命周期：

• Liquid是Shopify的服务端模板语言，所有Liquid标签会在页面发送到用户浏览器之前就完成解析渲染
• JavaScript运行在用户的浏览器端，执行时机远晚于服务端Liquid渲染流程
  你在JS模板字符串里拼接的{% section %}标签，对于服务端来说就是没有被解析的普通字符串，最终会把包含${blogName}变量占位符的字面量直接当做section名去解析，自然会报section类型无效的错误。

解决方案 #

方案1：预渲染所有候选Section+CSS控制显示 #

适合博客、标签数量不多的场景，性能最好：

1. 先在你的Liquid模板中预渲染所有可能的博客标签hero section，默认隐藏，添加标识属性：

<div id="blog-hero">
  {% for blog in all_blogs %}
    {% for tag in blog.all_tags %}
      <div 
        class="blog-hero-card" 
        data-blog-handle="{{ blog.handle }}" 
        data-tag-handle="{{ tag | handle }}"
        style="display:none;"
      >
        {% section 'blog--hero-' | append: blog.handle | append: '-blog--' | append: tag.handle %}
      </div>
    {% endfor %}
  {% endfor %}
</div>

2. 客户端JS匹配路径参数后显示对应section：

const pathName = window.location.pathname;
const pathSegs = pathName.split('/');
const blogName = pathSegs[2];
const tagName = pathSegs[4];

const targetHero = document.querySelector(`.blog-hero-card[data-blog-handle="${blogName}"][data-tag-handle="${tagName}"]`);
if (targetHero) targetHero.style.display = 'block';

方案2：调用Section Rendering API动态加载 #

适合博客、标签数量较多，预渲染成本过高的场景：
直接通过Shopify提供的Section渲染接口，客户端请求对应Section的HTML后插入容器即可：

const pathName = window.location.pathname;
const blogDiv = document.getElementById('blog-hero');
const blogName = pathName.split('/')[2];
const tagName = pathName.split('/')[4];
const sectionId = `blog--hero-${blogName}-blog--${tagName}`;

fetch(`/?section_id=${encodeURIComponent(sectionId)}`)
  .then(res => res.text())
  .then(sectionHtml => {
    blogDiv.innerHTML = sectionHtml;
  })
  .catch(err => console.error('Section加载失败：', err));

内容的提问来源于stack exchange，提问作者Jason