撇号cms - 如何在widget.html中添加/显示数组

Question

我是撇号cms的新手，我被卡在widget.html中的一个阵列上。它位于div中，类c-podcast__footer-streaming。

这是我的小部件（index.js）：

module.exports = {
extend: 'apostrophe-widgets',
label: 'Musicstream',
addFields: [
    {
        name: 'preheadline',
        type: 'string',
        label: 'Preheadline',
        required: true
    },
    {
        name: 'title',
        type: 'string',
        label: 'Title',
        required: true
    },
    {
        name: 'cover',
        type: 'singleton',
        label: 'Cover',
        widgetType: 'apostrophe-images',
        required: true
    },
    {
        name: 'button',
        type: 'string',
        label: 'Button',
        def: 'Abonnieren'
    },
    {
        name: 'buttonlink',
        type: 'string',
        label: 'Button Link',
        def: 'https://www.handelsblatt.com'
    },
    {
        name: 'more',
        type: 'string',
        label: 'More',
        def: 'https://www.handelsblatt.com/audio/'
    },
    {
        name: 'streamingsource',
        label: 'Streaming Dienst',
        type: 'array',
        schema: [
            {
                name: 'name',
                type: 'string',
                label: 'Name'
            },
            {
                name: 'icon',
                type: 'singleton',
                label: 'Icon',
                widgetType: 'apostrophe-images',
                required: true
            },
            {
                name: 'streamlink',
                type: 'string',
                label: 'Stream Link',
                required: true
            }
        ]
    }
]

};

这就是我试图将它包含在我的wiget模板视图/ widget.html中的方式：

<div class="c-podcast">
<div class="c-podcast__header clearfix">
    <button class="c-podcast__header-play"></button>
    <div class="c-podcast__header-text">
        <span>{{ data.widget.preheadline }}</span>
        <h2>{{ data.widget.title }}</h2>
    </div>
    {{ apos.singleton (data.widget, 'cover', 'apostrophe-images') }}
</div>
<div class="c-podcast__player">
    <div class="c-podcast__player-scrollbar"></div>
    <span class="c-podcast__player-position"></span>
    <span class="c-podcast__player-time">-04:38</span>
</div>
<div class="c-podcast__footer clearfix">
    <button class="c-podcast__footer-cta" type="button">{{ data.widget.button }}</button>
    <div class="c-podcast__footer-streaming">
    {{ apos.area (data.widget, 'apostrophe-schemas', { 

        streamingsource: { 

            name: {},
            icon: {},
            streamlink: {}
         }
         })
     }}
    </div>
    <a class="c-podcast__footer-more" href="{{ data.widget.more }}">Alle Episoden ›</a> 
</div>

但我唯一得到的是一个空的div：<div class="apos-area" data-apos-area="" data-doc-id=""></div>

有人可以帮帮我吗？ :)非常感谢，magvector

Answer 1

[编辑澄清问题]

而不是尝试通过单例函数显示数组数据，只需遍历数组并将您想要的内容输出到模板中。

在views/widget.html

{% for icon in data.widget.streamingsource %}
  The icon name: {{ icon.name }}
  The image: {{ apos.singleton(icon, 'icon', 'apostrophe-images') }}
  streamlink: {{ icon.streamlink }}
{% endfor %}