无法在小部件撇号中保存图像答案

【问题标题】：unable to save image in widget apostrope无法在小部件撇号中保存图像
【发布时间】：2017-06-11 00:25:24
【问题描述】：

我对撇号了解不多，但我尝试创建一个自定义小部件。我想要我的小部件中的三个字段：

标题（字符串）
描述（字符串）
一张图片

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

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

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

【问题讨论】：

标签： javascript html node.js nunjucks apostrophe-cms

【解决方案1】：

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

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

只需将其粘贴到addFields 数组中即可。

感谢您试用撇号！

【讨论】：

【解决方案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' });
    };
  }
};

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

【讨论】：