javascript - 在 Apostrophe CMS 中创建自定义图像小部件

Question

我在 Apostrophe CMS 中创建自定义图像小部件时遇到问题。当前apostrophe-images-widgets适用于更多图像，但我需要网站 Logo 的特殊情况，因为它需要特定的 css 和网站上的特定位置。

我尝试按照教程 here 进行操作与经理一起制作自定义小部件，但我没有得到我想要的结果。这是我的 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': {}
}

然后，我有一个 logo-image-widgets带有 index.js 的模块像这样

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) 我无法将 Logo 图像添加到网站本身，只能通过菜单栏和 2) 我不认为这实际上是我想要的。我想要定制 <img />用我自己的 css 类渲染的标签。

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

感谢任何帮助。谢谢!

Answer 1

我是 P'unk Avenue 的 Apostrophe 首席开发人员。

您在这里所做的显示了对 pieces 和 pieces-widgets 如何工作的扎实掌握，尽管我们的惯例是始终给模块本身一个复数名称(它管理很多东西)，而 name 属性保持单数(它是我们称之为数据库中事物的一个实例)。虽然这只是风格上的挑剔，但代码很好。

您真正需要的建议:有一种更简单的方法可以让您实现单个项目的目标。只需将原始 apostrophe-images-widgets 模块的 lib/modules/apostrophe-images-widgets/views/widgetBase.html 文件复制到文件 lib/modules/apostrophe-images-widgets/views/widget.html 在项目级别并将其修改为您的心脏内容。

(您可以只复制 widget.html 并覆盖 widgetBase 中的各种模板 block ，但听起来仅靠这些 block 无法满足您的需求。)

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

如果您需要额外的 JavaScript，也将 lib/modules/apostrophe-images-widgets/public/js/always.js 复制到项目级别；它非常短，由调用我们的 jquery-projector 插件的 play 方法组成。您的 play 方法可以做任何它想做的事。

话虽如此，如果您的目标更远大，请查看 apostrophe-images 和 apostrophe-images-widgets 模块本身。它们使用 attachment 字段类型，您也可以使用该字段类型，包括如果您对拥有可浏览的图像存储库以供重用不感兴趣，则可以直接在小部件模块中使用它。因此，您可以完全绕过“小部件显示从片段存储库中提取的内容”模式。