Apostrophe CMS访问子页面Widget显示空框，请求技术指导

你遇到的核心问题是：Apostrophe默认加载子页面时，不会自动获取页面的**区域（Area）**数据，所以你的apos.area(child, 'excerpt')调用找不到内容，才显示空框。下面是具体的解决步骤和官方文档代码的放置说明：

一、问题根源 #

data.page._children默认只包含子页面的基础字段（比如title、_url），但不会自动加载你定义的excerpt区域。你需要明确告诉Apostrophe在获取子页面时，要加载这个区域的数据。

二、具体解决方案 #

有两种常用方式可以实现，根据你的需求选择：

方式1：全局配置子页面默认加载区域 #

如果你希望所有页面的子页面都自动加载excerpt区域，可以修改页面模块的配置文件（通常是lib/modules/apostrophe-pages/index.js，如果是自定义页面类型，就修改对应模块的文件，比如lib/modules/blog-pages/index.js）：

module.exports = {
  extend: 'apostrophe-pages',
  construct: function(self, options) {
    // 配置子页面查询时加载excerpt区域
    self.childrenOptions = {
      areas: [ 'excerpt' ]
    };
  }
};

修改后重启服务器，data.page._children就会包含每个子页面的excerpt区域数据，你的原有模板代码就能正常显示内容了。

方式2：在模板中手动查询子页面（局部生效） #

如果不想全局修改，也可以在模板里用apos.docs.get手动查询子页面，明确指定要加载的区域：

{% if data.page %}
  {% set children = apos.docs.get({
    parentId: data.page._id,
    type: 'page', // 若子页面是自定义类型，替换成对应的类型名称
    areas: [ 'excerpt' ]
  }) %}
  <ul>
    {% for child in children %}
      <li>
        <a href="{{ child._url }}">{{ child.title }}</a>
        <p>{{ apos.area(child, 'excerpt', { widgets: { 'apostrophe-rich-text': { toolbar: [ 'Styles', 'Bold', 'Italic', 'Link', 'Unlink'] } } }) }}</p>
      </li>
    {% endfor %}
  </ul>
{% endif %}

三、额外检查点 #

确保这几个环节没有问题：

• 你已经在子页面的类型配置中定义了excerpt区域，比如在页面模块的addFields数组里有类似配置：

  {
    name: 'excerpt',
    label: 'Excerpt',
    type: 'area',
    options: {
      widgets: {
        'apostrophe-rich-text': {
          toolbar: [ 'Styles', 'Bold', 'Italic', 'Link', 'Unlink' ]
        }
      }
    }
  }
  

• 子页面已经在后台编辑并保存了excerpt区域的内容，不是空状态
• 模板中apos.area的widget配置，和页面类型定义的配置保持一致

四、官方文档代码的放置位置 #

你查阅的"how to: children and joins"中的示例代码，通常需要放在页面模块的construct方法里（就是方式1中用到的construct函数），或者自定义模块的配置文件中，用来配置关联加载的字段、区域或其他文档类型。

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