在撇号CMS中创build自定义图像小部件

我在撇号CMS中创build自定义图像小部件时遇到问题。 目前的apostrophe-images-widgets工作正常,更多的图像,但我需要一个特殊的情况下的网站标志,因为它需要特定的CSS和网站上的具体位置。

我试着按照这里的教程做一个自定义小部件与经理,但我没有得到我想要的结果。 这是我的logo-image模块

 module.exports = { extend: 'apostrophe-pieces', name: 'logo-image', label: 'Website Logo', addFields: [ { name: 'companyName', label: 'Company Name', type: 'string', required: true }, { name: 'logo', label: 'Logo', type: 'singleton', widgetType: 'apostrophe-images', options: { limit: 1, minSize: [ 200, 200 ] } } ], construct: function(self, options) { self.beforeSave = function(req, piece, options, callback) { piece.companyName = 'Freedom Mutts'; return callback(); }; } }; 

我注册在app.js像这样

 modules: { 'logo-image': {} } 

然后,我有一个像这样的index.jslogo-image-widgets模块

 module.exports = { extend: 'apostrophe-pieces-widgets', label: 'Website Logo', filters: { projection: { slug: 1, title: 1, type: 1, tags: 1 } } }; 

和一个modules/logo-image-widgets/views/widget.html像这样

 <a class="navbar-brand" href="/">{{ apos.singleton( piece, 'logo', 'apostrophe-images', { edit: false } ) }}</a> 

和像这样的基本布局

 {% extends data.outerLayout %} <div class="apos-refreshable" data-apos-refreshable> {% block beforeMain %} <nav class="navbar navbar-default navbar-fixed-top nav-back"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> {{ apos.area(data.page, 'logo', { widgets: { 'logo-image': {} } }) }} </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">Our Pets</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><button class="btn header-btn">Donate <span class="sr-only">(current)</span></a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> {% endblock %} {% block main %} Main code here... {% endblock %} {% block afterMain %} layout code here... {% endblock %} </div> 

这给我留下了一些问题,1)我不能将标识图像添加到网站本身,只能通过菜单栏和2)我不认为这实际上是我想要的。 我想要一个用我自己的CSS类呈现的自定义<img />标记。

我不太清楚在哪里问这个问题,所以任何build议都会很好。 我在创build更复杂的自定义小部件时遇到了很多麻烦。

任何帮助表示赞赏。 谢谢!

我是P'unk大道的撇号首席开发者。

你在这里完成的事情显示了对碎片和小部件如何工作的牢固掌握,尽pipe我们的惯例是总是给模块本身一个复数名称(它pipe理很多事情),而名称属性仍然是单数的(这就是我们所说的数据库中的东西的一个实例)。 这只是一个挑剔的样式,但代码很好。

您真正需要的build议:有一个更简单的方法来获取单个项目的位置。 只需将原始apostrophe-images-widgets模块的lib/modules/apostrophe-images-widgets/views/widget.html到项目级别的文件lib/modules/apostrophe-images-widgets/views/widget.html ,深入到你的内心。

(你可以复制widget.html并重写widget.html各种widgetBase ,但听起来像你的需求不会被这些块单独满足。)

由于您不希望每个小部件的行为都发生变化,因此在模板中使用if语句来改变基于data.options.foo的输出,其中foo是您在主页模板中传递到小部件的任何选项。 看看data.options.size是如何处理的。

如果您需要额外的JavaScript,请将lib/modules/apostrophe-images-widgets/public/js/always.js到项目级别; 它非常短,包含一个调用我们的jquery-projector插件的play方法。 你的play方法可以做任何想做的事情。

话虽如此,如果您的目标更加雄心勃勃,请查看apostrophe-imagesapostrophe-images-widgets模块本身。 他们使用attachment字段types,您也可以使用它,包括直接在小部件模块中使用它,如果您不想有可浏览的图像存储库以供重用。 所以你可以完全绕过“部件显示从部件库中抽取的东西”模式。