Apostrophe CMS 2.x嵌套布局Widget异常：后续Widget被错误嵌套

你遇到的这两个问题——后续Widget被错误嵌套进双栏布局的容器、布局Widget无法保存信息，主要是因为Widget的配置误用+模板结构不规范导致的，咱们一步步来修复：

1. 修正Widget模块配置 #

先调整你的模块代码，去掉contextualOnly: true（这个配置是用来标记只能在其他Widget的上下文区域中添加的组件，但你的双栏布局是要作为独立模块添加到页面区域的，完全不需要这个限制），还可以给子区域明确允许添加的Widget类型（可选，但能让编辑器更规范）：

module.exports = {
  extend: 'apostrophe-widgets',
  label: 'Two Column Layout',
  addFields: [
    {
      name: 'columnLeft',
      type: 'area',
      label: 'Left Area',
      // 可选：限制该区域可添加的Widget类型，按需调整
      widgets: {
        'apostrophe-rich-text': {},
        'apostrophe-images': {}
      }
    },
    {
      name: 'columnRight',
      type: 'area',
      label: 'Right Area',
      widgets: {
        'apostrophe-rich-text': {},
        'apostrophe-images': {}
      }
    }
  ]
};

2. 添加规范的Widget模板 #

Apostrophe默认的模板没有清晰的DOM边界，导致编辑器无法准确识别双栏布局的范围，才会把后续Widget错误嵌套进去。你需要在Widget模块的views文件夹下创建widget.html模板，给布局和子区域都加上独立的容器：

<div class="two-column-layout">
  <div class="column-left">
    {{ apos.area(data.widget, 'columnLeft') }}
  </div>
  <div class="column-right">
    {{ apos.area(data.widget, 'columnRight') }}
  </div>
</div>

这个模板用明确的层级容器包裹两个子区域，编辑器就能精准识别布局的边界，不会把后面的Widget误判为双栏的一部分了。

3. 排查无法保存的问题 #

如果还是不能保存布局信息，检查这两点：

• 确保你的Widget模块已经在app.js的modules中正确注册，比如：

  modules: {
    'two-column-widget': {},
    // 其他模块...
  }
  

• 清除浏览器缓存后硬刷新页面（Ctrl+F5），编辑器的旧缓存有时候会干扰保存逻辑。

按这几步操作后，你的双栏布局Widget应该就能正常工作：后续添加的Widget不会被错误嵌套，删除布局时只会移除自身，同时能正常保存配置信息。

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