直接向 apostrophe-images-widgets 添加选项

Question

我通过直接扩展 'apostrophe-images-widgets' 改进了几个图像小部件。这可能不是最佳做法，但我从一开始就使用它，我开始使用 apostrophe-cms 进行编码，并且效果很好。例如，我的幻灯片小部件仅在 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 等选项添加到我的滑块小部件？

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

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

有必要重写小部件以扩展：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 是一个内置选项，启用焦点 UI（然后您可以稍后获取焦点信息）并且 sizesAttr 是自定义选项文档中的示例您可能会根据自己的特定需求创建。

在这两种情况下，它们都被传递到页面或作品展示页面模板中的区域小部件选项。因此，对于 "default" 页面，这可能在 default.html 中，对于作品类型的展示页面，可能在 show.html 中，如下所示：

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

（data.page 将特定于页面，但对于作品的 show 页面将是 data.piece）

然后在小部件模板（您的 widget.html）中，它们被引用为 data.options 上的属性，您可以在示例中看到 sizesAttr。您可以类似地在区域的小部件配置中添加任何随机选项，例如 foo: 'bar'，然后在小部件模板中将其引用为 data.options.foo。

focalPoint 直接引用没那么有用。作为一个内置选项，它为焦点启用特殊功能，然后使用 apos.attachments.hasFocalPoint() 等方法在模板中引用它。 documentation has more on that.

直接向 apostrophe-images-widgets 添加选项

Adding options to apostrophe-images-widgets directly

apostrophe-cms