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

Question

我在 Apostrophe CMS 中创建自定义图像小部件时遇到问题。当前的 apostrophe-images-widgets 适用于更多图片，但我需要网站徽标的特殊情况，因为它需要特定的 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': {}
}

然后，我有一个带有 index.js 的 logo-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 /> 标签

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

感谢任何帮助。谢谢！

Answer 1

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

你在这里所做的显示了对 pieces 和 pieces-widgets 工作原理的扎实掌握，尽管我们的惯例是始终给模块本身一个复数名称（它管理很多东西），而名称属性保持单数（这就是我们所说的 one 数据库中事物的实例）。这只是一个风格吹毛求疵，代码是好的。

您真正需要的建议：有一种更简单的方法可以让您完成单个项目。只需将原始 apostrophe-images-widgets 模块的 lib/modules/apostrophe-images-widgets/views/widgetBase.html 文件复制到项目级别的文件 lib/modules/apostrophe-images-widgets/views/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-images 和 apostrophe-images-widgets 模块本身。他们使用 attachment 字段类型，您也可以使用它，包括如果您对拥有可浏览的图像存储库不感兴趣以供重用，则可以直接在小部件模块中使用它。所以你可以完全绕过 "widgets display stuff drawn from a repository of pieces" 模式。

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

Creating a custom image widget in Apostrophe CMS

html

javascript

node.js

apostrophe-cms

nunjucks