如何在标签无对应文章时加载Shopify博客模板及自定义hero区块

问题根因 #

1. 路径拆分逻辑脆弱：你当前硬编码取split('/')索引2和4的内容，一旦页面路径出现多斜杠、层级结构变化的情况，拆分出来的blogName、tagName就是错的，拼接出来的请求地址自然不对，这就是部分标签正常、部分报错的直接原因。
2. 动态Section请求无兜底：你为每个标签单独拼接了专属的section请求地址，当对应标签没有提前配置对应hero section、或者标签下无文章时，服务端没有对应资源就会直接返回404，你没有做请求失败的兜底处理，页面就会直接展示404。
3. 前端嵌入Liquid代码完全无效：Liquid是服务端渲染语法，会在页面返回到浏览器之前就执行完成，你把Liquid代码直接写在前端JS的innerHTML里，到浏览器端只会被当成普通字符串渲染，根本不会生成对应的文章列表内容。
4. 平台默认404逻辑：你用的应该是支持Liquid的建站平台，默认如果博客标签下没有关联文章，服务端会直接返回404状态码，你的前端JS还没执行页面就已经是404了。

修复方案 #

1. 先处理服务端404问题 #

进入博客标签页对应的Liquid模板，添加空文章判断逻辑，确保就算标签下没有文章，也正常返回200状态码、渲染页面基础框架，不要直接抛出404。

2. 替换前端的Liquid文章渲染逻辑 #

不要在JS里写Liquid代码，直接把文章列表的渲染逻辑放到服务端模板里，响应式分页用CSS实现即可：

• 服务端直接按最大每页6篇的规格渲染文章列表
• 加CSS响应式规则，移动端宽度小于600px时，只展示前3篇，剩下的隐藏即可，完全不需要前端动态拼接模板

3. 修复hero请求逻辑 #

首先优化路径拆分的容错性，其次加请求失败兜底，再把专属section改成通用section避免404：

const pathSegments = window.location.pathname.split('/').filter(seg => seg.trim() !== '');
// 这里的索引请先打印pathSegments确认和你站点的路径层级匹配再修改
const blogName = pathSegments[1];
const tagName = pathSegments[3];
const blog_div = document.getElementById('blog-hero');

const request = new XMLHttpRequest();
// 换成通用hero section，把标签、博客名作为参数传递，服务端section根据参数动态渲染内容
request.open('GET', `/?section_id=blog-hero-common&blog=${blogName}&tag=${tagName}`)

request.onload = () => {
    if(request.readyState === request.DONE) {
        if (request.status === 200) {
             blog_div.innerHTML = request.responseText;
        } else {
            // 请求失败走兜底渲染
            renderDefaultHero(blog_div, tagName);
        }
    }
};
// 请求异常也走兜底
request.onerror = () => {
    renderDefaultHero(blog_div, tagName);
}

request.send(null);

// 兜底hero渲染方法
function renderDefaultHero(container, tagName) {
    container.innerHTML = `
    <div class="blog-hero-default">
        <h2>${tagName} 相关内容</h2>
        <p>我们正在更新该标签下的内容，敬请期待</p>
    </div>
    `
}

4. 适配通用hero section #

新增一个ID为blog-hero-common的section，在section的Liquid代码里根据请求参数的blog和tag动态渲染内容，不需要为每个标签单独创建section，从根源上避免section不存在导致的404问题。

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