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': {}
}

然后，我有一个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）我认为它实际上并不是我想要的。我想要一个使用我自己的css类呈现的自定义<img />标记。

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

感谢任何帮助。谢谢！

Answer 1

我是P＆＃39; 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字段类型，您也可以使用它，包括直接在窗口小部件模块中使用它，如果您不想拥有可浏览的图像存储库以供重用。因此，您可以绕过＆＃34;小部件显示从片段存储库中提取的内容。模式完全。

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

1 个答案: