1

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

  1. 标题（字符串）
  2. 描述（字符串）
  3. 图像

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

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

我的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' });
    };
  }
};
4

2 回答 2

2

您可以像这样将图像小部件添加到小部件的架构中

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

把它放在addFields数组中。

感谢您试用撇号！

于 2017-06-10T13:51:10.107 回答
0

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

这是我的小部件架构：

 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' });
    };
  }
};

这是我的小部件 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>

从这里获取 html 代码

于 2017-06-10T16:25:24.660 回答