撇号两栏小部件数据保存问题

Question

我添加了两个撇号两列的小部件，它们具有不同的标签和小部件html。但是当我通过小部件获得数据时，它成功保存了，但无法在UI上呈现。

双列小工具第一个index.js

module.exports = {
  extend: 'apostrophe-widgets',
  label: 'Two Column Widget',
  contextualOnly: true,
  addFields: [
    {
      name: 'areaLeft',
      type: 'area',
      label: 'Left Area',
    },
    {
      name: 'areaRight',
      type: 'area',
      label: 'Right Area',
    }
  ]
};

widget.html

{% import "macros/utils.html" as utils %}
<div class="row mb-10 mob-next">
    <div class="col-md-6 full-img">
            {{ utils.column(data.widget, 'one', 'one-half') }}
    </div>
    <div class="col-md-6 mob-whats">
        <div class="first-next-box ">
            {{ utils.column(data.widget, 'two', 'one-half') }}
            <div class="btn btn-custom-green mt-40">Register interest</div>
        </div>
    </div>
</div>

两列小部件index.js 2nd：

module.exports = {
  extend: 'apostrophe-widgets',
  label: 'Two Even Column Layout',
  contextualOnly: true,
  addFields: [
    {
      name: 'areaLeft',
      type: 'area',
      label: 'Left Area',
    },
    {
      name: 'areaRight',
      type: 'area',
      label: 'Right Area',
    }
  ]
};

widget.html

 {% import "macros/utils.html" as utils %}
    <div class="row mob-parent">
        <div class="col-md-6 mob-child-1">
            <div class="first-next-box">
                {{ utils.column(data.widget, 'two', 'one-half') }}
                <div class="btn btn-custom-green mt-40">Register interest</div>
            </div>
        </div>
        <div class="col-md-6 full-img mob-child-2">
                {{ utils.column(data.widget, 'one', 'one-half') }}
        </div>
    </div>


my macros/utils.html
{% macro columns() %}
  {{ apos.area(data.page, 'main', {
    blockLevelControls: true,
    widgets: {
      'one-column': {},
      'two-column': {},
      'two-even-column' : {},
      'three-column': {}
    }
  }) }}
{% endmacro %}

{% macro column(parent, name, imageSize) %}
  {{ apos.area(parent, name, {
    widgets: {
      'apostrophe-rich-text': {
        toolbar: [ 'Styles', 'Bold', 'Italic', 'Link', 'Unlink' ,'BulletedList' ]
      },
      'apostrophe-images': {
        size: imageSize
      },
      'apostrophe-video': {},
      'test': {}
    }
  }) }}
{% endmacro %}

{% macro content(context, name) %}
  {{ apos.area(context, name, {
    widgets: {
      'apostrophe-rich-text': {
        toolbar: [ 'Styles', 'Bold', 'Italic', 'Link', 'Anchor', 'Unlink', 'BulletedList' ],
        styles: [
                  {name: 'Title', element: 'h1'},
                  {name: 'Paragraph', element: 'p'  },
                  { name: 'Attribution / Meta', element: 'p', attributes: { 'class': 'f-22'} },
                  {name: 'Elements', element: 'h2'}
        ]

      },
      'apostrophe-images': {},
      'apostrophe-files': {},
      'apostrophe-video': {}
    }
  }) }}
{% endmacro %}

app.js中的我的应用程序模块：

modules: {

    // Apostrophe module configuration

    // Note: most configuration occurs in the respective
    // modules' directories. See lib/apostrophe-assets/index.js for an example.

    // However any modules that are not present by default in Apostrophe must at
    // least have a minimal configuration here: `moduleName: {}`

    // If a template is not found somewhere else, serve it from the top-level
    // `views/` folder of the project

    'apostrophe-templates': {
      viewsFolderFallback: path.join(__dirname, 'views')
      // See also lib/modules/apostrophe-templates/index.js
    },

    'link-widgets': {},
    'page-link-widgets': {},
    'register-button-widgets': {},
    'custom-li-widgets': {},
    'navigation-link-widgets' : {},
    'fa-icon-widgets': {},
    'one-column-widgets': {},
    'two-even-column-widgets': {},
    'two-column-widgets': {},


    'theme': {},
    'apostrophe-global': {
      addFields: [
        {
          name: 'dealerRecommendedConfig',
          type: 'checkboxes',
          label: 'Recommended Dealer config',
          choices: [
            {
              label: 'Is certified',
              value: 'isCertified'
            },
            {
              label: 'Is prefered',
              value: 'isPreferredDealer'
            },
            {
              label: 'Best chance in stock',
              value: 'isBestChanceInStock'
            },
            {
              label: 'Has a network',
              value: 'networkName'
            }
          ]
        }
      ]
    }
  }

任何人都可以帮助我解决这个问题？我该如何解决这个保存和渲染问题。