撇号 CMS 传播编辑：所有子小部件和部件的区域为假答案

【问题标题】：Apostrophe CMS propagating edit:false of area to all children widgets and pieces撇号 CMS 传播编辑：所有子小部件和部件的区域为假
【发布时间】：2019-02-14 15:14:31
【问题描述】：

我有一组您通常在页面上编辑的普通小部件，没问题。但是，我需要在模式模式区域中编辑这些小部件，因为组件正在被动画化并且事情变得有点时髦。设置 edit:false 确实会停止正在编辑的区域，但仍然可以编辑该区域内的所有小部件和片段？我需要停止此操作，因为我无法在页面的任何一个模式中进行真正的编辑，因为我在模式中收到一条错误消息“您无法控制文档”，并且没有通过上下文编辑保存任何内容？

【问题讨论】：

您是否在询问如何进行编辑：错误级联到子区域以及如何修复它以便您可以完全编辑这些在模态？听起来你在这两点上都卡住了，但我不确定。
好吧，尽可能清楚：1）我有一个动画内容的小部件。 2）该内容不能根据上下文进行编辑，因为很多内容可以隐藏或移动。 3) 小部件使用数组类型来保存多个 apos 区域。 4) 我只需要对这些区域进行模态编辑。 5）我在模板的主要区域（有效）上传递了编辑错误，但所有子区域仍然是可编辑的，并且在内容锁定消息方面产生了很多问题。
好的，我明白了。所以模态中的编辑效果很好。问题是您不能“在上下文中”关闭子区域中的编辑。但是您可以为每个人添加 edit: false ，不是吗？在他们的 widget.html 中找到这些嵌套的 apos.area 调用。

标签： properties apostrophe-cms propagation

【解决方案1】：

我理解您的意思，有时您需要比在 view.html 中不可编辑的单例或区域中调用小部件的值更灵活一些

我找到了创建片段小部件的解决方案，如tutorial 中所述这使您可以在任何需要的地方调用小部件的值，而无需任何编辑功能。您可以在不同的地方调用相同的字段，其中一个以动画和四处飞行以及所有内容，例如另一个静态标题。

在这里，您将找到一个示例，我如何使用片段小部件并在 view.html 上显示所有字段。我什至添加了一个 if 条件，因此如果没有用户输入，die 字段将不会加载到您的 widget.html 中。

我认为这个解决方案最适合您的需求。

 {% for piece in data.widget._pieces %}
  <div class="card horizontal" style="
    {%- if piece.backColor-%}
      background-color:{{ piece.backColor }}
    {% endif %}
  ">

    {%- if piece._image -%}
    <div class="card-image hide-on-small-only">
      <img width="100%" src="{{ apos.attachments.url(piece._image.attachment, { size: data.options.size or 'full' }) }}">
    </div>
    {%- endif -%}
    <div class="card-stacked">
      <div class="card-content" style="
        {%- if piece.backColor-%}
          background-color:{{ piece.backColor }}
        {% endif %}
      ">

        {%- if piece.title -%}
          <span class="card-title">
            <h5 class="accent-color" style="
              {%- if piece.titleColor -%}
                color:{{ piece.titleColor }}
              {% endif %}
            ">
              {{ piece.title }}
            </h5>
          </span>
        {%- endif -%}

        {%- if piece.text -%}
            {{ apos.area(piece, 'text', {
              edit: false,
              widgets: { 'apostrophe-rich-text': { } }
            }) }}
        {%- endif -%}

      </div>
    </div>
  </div>
 {% endfor %}

所以分解为最简单的值 {{piece.titleColor }} 表示您的小部件 index.js 中的简单小部件架构

{
  name: 'titleColor',
  label: 'Title Color',
  type: 'color',
  help: 'Remove to set title to Accent Color'
},

【讨论】：