直接在撇号-图像-窗口中添加选项。

Question

我通过直接扩展'apostrophe-images-widgets'改进了几个图片小部件。这可能不是最好的做法，但我从一开始用apostrophe-cms编码就用了这个，而且效果不错。例如，我的幻灯片widget在index.js中只使用了这一行。

module.exports = {
  extend: 'apostrophe-images-widgets',
  piecesModuleName: 'apostrophe-images',
  label: 'Slider Widget'
};

现在我的widget.html是这样的：

<div class="slider fullscreen">
  <ul class="slides">

    {% block items %}

      {% for entry in data.widget._pieces %}
        {% set image = entry.item or entry %}
        {% set relationship = entry.relationship %}

        <li>
          <img
            data-image src="{{ apos.attachments.url(image.attachment, { size: data.options.size or 'full', crop: relationship }) }}"
            srcset="{{ apos.images.srcset(image.attachment) }}"
            sizes="{{ data.options.sizesAttr or '100vw' }}"
            alt="{{ image.title }}"
          >

          <div class="caption {{ image.align }}">

            {% block title %}
              <h3 class="accent-color truncate hide-on-small-only"
                {% if image.titleColor %}
                  style="color:{{ image.titleColor }}"
                {% endif %}
              >
                {{ image.title }}
              </h3>
            {% endblock %}

            {% block description %}
              {% if image.description %}
                <p class="flow-text"
                  {% if image.descriptionColor %}
                    style="color:{{ image.descriptionColor }}"
                  {% endif %}
                >
                  {{ image.description | nlbr }}
                </p>
              {% endif %}
            {% endblock %}

          </div>

          {% block credit %}
            {% if image.credit %}
              <div class="credit">
                {% if image.creditUrl %}
                    <a href="{{ image.creditUrl }}" target="_blank">
                {% endif %}
                      <span>{{ image.credit }}</span>
                {% if image.creditUrl %}
                    </a>
                {% endif %}
            </div>
            {% endif %}
          {% endblock %}

        </li>

      {% endfor %}
    {% endblock %}

  </ul>
</div>

现在我的问题是，我怎样才能添加像这样的选项？sizesAttr 和 focalPoint: true 等到我的Slider widget？

正如我上面所说的，如果可能的话，我不想添加额外的字段，就像你解释的那样。此处:

  addFields: [
    {
      name: '_image',
      type: 'joinByOne',
      withType: 'apostrophe-image',
      label: 'Image',
      required: true,
      idField: 'imageId',
      filters: {
        projection: {
          attachment: true,
          description: true,
          title: true
        }
      }
    }
  ]

有必要重写widget来扩展。apostrope-pieces-widgets 而不是 apostrope-images-widgets 诸如此类。所以，我的想法是直接用 beforeConstruct 不幸的是，这还没有工作，所以我被困在那里。

module.exports = {
  extend: 'apostrophe-images-widgets',
  piecesModuleName: 'apostrophe-images',
  label: 'Slider Widget',
  beforeConstruct: function(self, options) {
    if (options.focalPoint === undefined) {
      options.focalPoint = true;
    }
  }
};

你能不能给我个提示，让我怎么做？也许在你的代码里有一些例子，你是如何添加选项与 beforeConstruct 或者甚至在html中用nujucks加上一些变量，比如说 {%- set data.widget.options ... -%} ?

Answer 1

你面对的是两种不同类型的选项，但它们都在同一个地方声明。focalPoint 是一个内置的选项，启用了焦点用户界面（然后让你稍后获得焦点信息），而 sizesAttr 是文档中的一个自定义选项的例子，您可以根据您的特定需求创建。

在这两种情况下，它们都被传递到区域的小组件选项中。在页面或作品中显示页面模板. 所以这可能是在 default.html 为 "默认 "页面或 show.html 为一个作品类型的展示页面，像这样。

{{ apos.area(data.page, 'content', {
  widgets: {
    'image': {
      sizesAttr: '(min-width: 1024px) 50vw, 100vw',
      focalPoint: true
    }
  }
}) }}

(data.page 将具体到一个页面，但会是 data.piece 为片 显示 页)

然后在小组件模板中（您的 widget.html)它们被引用为 data.options 可见 sizesAttr 在你的例子中。你也可以类似地添加任何随机选项，比如 foo: 'bar' 在区域的小部件配置中，然后将其引用为 data.options.foo 的小组件模板中。

focalPoint 是没有那么有用的，可以直接引用。作为一个内置选项，它为焦点启用了特殊的功能，然后在模板中使用类似于 apos.attachments.hasFocalPoint(). 该 文件中有更多的内容.