Liquid实现单页侧边栏隐藏后，首页内容容器包裹异常求助

你的核心问题是HTML标签未正确闭合导致DOM结构错乱，浏览器解析时自动补全标签，打乱了content-holder的包裹层级，才会出现区块跑出容器的情况。结合你的需求，给你两个直接可行的修正方案：

方案一：正确控制侧边栏的渲染逻辑 #

你当前的代码只写了<main-sidebar>的开头标签，却没处理闭合，而且条件判断冗余。改成完整的闭合逻辑：

{% unless page.handle == 'lorem' %}
  <main-sidebar class="sidebar"></main-sidebar>
{% endunless %}

unless等价于if not，逻辑更清晰，而且确保只有非lorem页面才渲染完整的侧边栏标签，不会出现标签未闭合的情况。

方案二：给内容容器加全屏类（更优雅） #

不需要给侧边栏加无效类，直接在content-holder上做判断，让目标页面的内容容器占满宽度：

<div class="content-holder {% if page.handle == 'lorem' %}content-full-width{% endif %}">
  <!-- 所有区块的内容都在这里 -->
</div>

然后在CSS里补全样式：

.content-full-width {
  width: 100% !important; /* 覆盖原有宽度限制 */
  margin: 0; /* 移除和侧边栏配合的边距 */
}

这种方式不需要动侧边栏的渲染逻辑，直接通过样式控制内容宽度，也不会破坏原有DOM结构。

额外排查点 #

检查你插入侧边栏代码的位置，确保它在content-holder容器的外面，不要把侧边栏标签插在容器内部，否则哪怕闭合正确，也可能影响容器的布局结构。

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