Question

我对撇号知之甚少，但我尝试创建自定义小部件。我想在我的小部件中有三个字段：

标题（字符串）
description（string）
图片

我还没有找到一种方法来将小部件中的图像添加为字段。

现在，我在widget中添加了一个单例，它工作正常。但是当添加图像时，它会显示在页面上，但是当我重新加载页面时，图像就会消失。

我的widget.html代码

<div class="md-jumbotron">

<div class="md-grid">
    <h1>{{ data.widget.heading }}</h1>
    <h6>{{ data.widget.desc }}</h6>

    <div class="img">
        {{ apos.singleton(data.page, 'jumbotroPic', 'apostrophe-images', {
            limit: 1,
            size: 'full'

        }) }}
    </div>
</div>

我在控制台上获得了以下内容

$ node app.js

WARNING: No session secret provided, please set the `secret` property of the 
`session` property of the apostrophe-express module in app.js
WARNING: widget type text exists in content but is not configured
WARNING: widget type text exists in content but is not configured
I see no data/address file, defaulting to address 0.0.0.0
I see no data/port file, defaulting to port 3000
Listening on 0.0.0.0:3000
WARNING: widget type text exists in content but is not configured
WARNING: widget type text exists in content but is not configured
WARNING: widget type text exists in content but is not configured
WARNING: widget type text exists in content but is not configured

我的小部件的javascript代码是：

module.exports = {
  extend: 'apostrophe-widgets',
  label: 'Jumbotron',
  addFields: [
    {
      name: 'heading',
      type: 'string',
      label: 'Heading',
      required: true
    },
    {
      name: 'desc',
      type: 'string',
      label: 'Description',
      required: true
    }
  ],
  construct: function(self, options) {
    var superPushAssets = self.pushAssets;
    self.pushAssets = function() {
      superPushAssets();
      self.pushAsset('stylesheet', 'jumbotron', { when: 'always' });
    };
  }
};

Answer 1

您可以像这样

将图像小部件添加到小部件的架构中

 {
  name: 'image',
  label: 'Jumbo Image',
  type: 'singleton',
  widgetType: 'apostrophe-images',
  options: {
    limit: 1,
  }
}

将其粘贴在addFields数组中。

感谢你试用Apostrophe！

Answer 2

好的，我找到了整个解决方案：

这是我的小部件架构：

 module.exports = {
  extend: 'apostrophe-widgets',
  label: 'Jumbotron',
  addFields: [
    {
      name: 'heading',
      type: 'string',
      label: 'Heading',
      required: true
    },
    {
      name: 'desc',
      type: 'string',
      label: 'Description',
      required: true
    },
    {
      name: 'image',
      label: 'Jumbo Image',
      type: 'singleton',
      widgetType: 'apostrophe-images',
      options: {
        limit: 1,
      }
    }
  ],
  construct: function(self, options) {
    var superPushAssets = self.pushAssets;
    self.pushAssets = function() {
      superPushAssets();
      self.pushAsset('stylesheet', 'jumbotron', { when: 'always' });
    };
  }
};

这是我的widget html代码

<div class="md-jumbotron">

    <div class="md-grid">
        <h1>
        {{ data.widget.heading }}
        </h1>
        <h6>
        {{ data.widget.desc }}
        </h6>

        <div class="img">
            {{
                apos.singleton(
                    data.widget,
                    'image',
                    'apostrophe-images',
                    {
                        edit: false
                    }
                )
            }}
        </div>
    </div>
</div>

从here

获取html代码

无法在widget apostrope

2 个答案: