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

我在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 />标记。

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

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

最佳答案

我是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字段类型，您也可以使用该字段类型，如果您不希望具有可浏览的图像存储库以供重用，则可以直接在小部件模块中使用它。因此，您可以完全绕过“小部件显示从零件存储库中提取的东西”模式。

关于javascript - 在Apostrophe CMS中创建自定义图像小部件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41926095/