1

我在 Apostrophe CMS 中创建自定义图像小部件时遇到问题。当前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': {}
}

然后，我有一个类似的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）我无法将徽标图像添加到网站本身，只能通过菜单栏和 2）我认为这实际上不是我想要的。我想要一个<img />用我自己的 css 类呈现的自定义标签。

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

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

4

1 回答 1

2

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

您在这里所做的工作显示了对部件和部件小部件如何工作的扎实掌握，尽管我们的惯例是总是给模块本身一个复数名称（它管理很多事情）而 name 属性保持单数（这就是我们所说的）数据库中事物的一个实例）。不过，这只是一种风格挑剔，代码很好。

您真正需要的建议：有一种更简单的方法可以帮助您完成单个项目。只需将lib/modules/apostrophe-images-widgets/views/widgetBase.html原始apostrophe-images-widgets模块的文件复制到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也请复制到项目级别；它很短，由一个play调用我们jquery-projector插件的方法组成。您的play方法可以做任何它想做的事情。

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

于 2017-01-30T01:24:15.793 回答