無法保存圖片在插件中插入圖案

Question

我對撇號知之甚少，但我試圖創建一個自定義插件。我想在我的小工具三個方面：

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

Answer 1

您可以將圖像控件添加到您的widget的模式是這樣

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

這裏是我的小部件的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代碼here