javascript - apostrope-images-widgets 自定义小部件调用 apos.attachments.url 两次

Question

我正在尝试为我的网站创建自定义apostrope-images-widgets 布局。我目前已在 lib/modules/apostrope-images-widgets/views/widget.html 中为 html 模板创建了项目级覆盖。我遇到的问题是，每当我选择将图像放入自定义区域时，apos.attachments.url 就会被调用两次:一次使用我选择的图像，另一次使用 undefined > 附件。

我的自定义 widget.html 看起来像这样:

<a href="/"><img class="logo" src="{{ apos.attachments.url(image.attachment, { size: 'full'}) }}" /></a>

我的整个 lib 目录如下所示:

我的 app.js 使用默认配置进行设置。

我的自定义 layout.html 引用图像，如下所示:

{{
    apos.area(data.page, 'web-logo', {
        widgets: {
            'apostrophe-images': {
                size: 'full'
            }
        }
    })
}}

除了在 apostrope-attachments/lib/api.js 中抛出异常之外，我不确定还能为您提供什么其他信息:

self.url = function(attachment, options) {
  options = options || {};

  // THROWS ERROR AT `attachment._id`
  var path = '/attachments/' + attachment._id + '-' + attachment.name;
  if (!options.uploadfsPath) {
    path = self.uploadfs.getUrl() + path;
  }
// other code
}

我不太确定在哪里寻找解决方案...我可以提供的任何其他信息，请告诉我。

我没有覆盖 apostrope-images-widgets 或 apostrope-images 的 index.js

我得到的确切错误很长，但这是堆栈跟踪的开始

类型错误:无法读取未定义的属性“_id”

不是很有帮助，但仅此而已。

感谢您的阅读和提供的任何帮助!

Answer 1

我是 P'unk Avenue 的 Apostrope 的首席建筑师。

如果您查看 apostrope-images-widgets 模块中的 widgetBase.html，您会发现 image 不是直接传递给模板。相反，撇号总是将数据作为 data 对象的属性传递到模板。对于小部件，与小部件关联的数据作为 data.widget 传递。

图像小部件特别扩展了片段小部件，它可以显示多个项目。因此，其架构中有一个连接，您可以在数组属性 data.widget._pieces 中找到实际的片段(图像)。

最后一个问题:有时这些连接有自己的“关系属性”，在这种情况下是裁剪坐标(如果有)，它们与实际图像是分开的。因此，数组中的每个条目实际上都是一个具有 item 属性(图像)和与裁剪相关的其他属性的对象。因此，需要额外一行代码来从数组中的每个条目中获取实际项目。

这是您的代码的工作版本:

{%- for entry in data.widget._pieces -%}
  {# Works whether there's a relationship in the join or not. Normally there always #}
  {# is for slideshows, but just in case someone really hates cropping... -Tom #}
  {%- set image = entry.item or entry -%}
  <a href="/"><img class="logo" src="{{ apos.attachments.url(image.attachment, { size: 'full'}) }}" /></a>
{%- endfor -%}

希望这对您有帮助!

附注还有一件事:请勿在地区名称中使用连字符。您会注意到撇号正在显示有关它的警告。如果您愿意，可以使用驼峰命名法。