在撇号CMS中创建自定义图像小部件 [英] Creating a custom image widget in Apostrophe CMS

查看：181
本文介绍了在撇号CMS中创建自定义图像小部件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我无法在撇号CMS中创建自定义图片小部件。当前撇号图片小部件对于更多图片效果不错，但我需要网站徽标的特殊情况，因为它需要特定的CSS和网站上的特定位置。



我试着按照教程这里用一个管理器制作一个自定义小部件，但是我没有得到我想要的结果。这是我的 logo-image 模块

  module.exports = {
 extend：'撇号'，
名称：'logo-image'，
标签：'Website Logo'，
 addFields：[
 {
名称：'companyName'，
标签：'公司名称'，
类型：'字符串'，
所需：true 
}，
 {
 name ：'徽标'，
标签：'徽标'，
类型：'singleton'，
 widgetType：'撇号图片'，
选项：{
限制： 1，
 minSize：[200，200] 
} 
} 
]，
构造函数（self，options）{
 self.beforeSave =函数（req，piece，options，callback）{
 piece.companyName ='Freedom Mutts'; 
返回callback（）; 
}; 
} 
};

我注册在 app.js 类似所以 

 模块：{
'logo-image'：{} 
}

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

  module.exports = {
延伸：'撇号 - 部件 - 小部件'，
标签：'Website Logo'，
过滤器：{
投影：{
 slug：1，
 title： 1，
类型：1，
标签：1 
} 
} 
};

和 modules / logo-image-widgets / views / widget.html like like 

 < a class =navbar-brandhref =/> {{
 apos.singleton（
 piece，
'logo'，
'撇号图片'，
 {
编辑：false 
 } 
）
}}< / a>

以及像这样的基本布局 

  {％extends data.outerLayout％} 
< div class =apos-refreshabledata-apos-refreshable> 
 {％block beforeMain％}

这给我留下了一些问题，1）我无法将徽标图像添加到网站本身，只有通过菜单栏和2）我不认为这实际上是我想要的。我想要一个自定义的< img /> 标签，用我自己的css类来呈现。

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



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

解决方案

我是P'unk Avenue的主角开发人员。



在这里完成的工作显示了对碎片和小部件如何工作的牢固掌握，尽管我们的惯例是始终给模块本身一个复数名称（它管理很多事情），而名称属性仍然存在单数（这就是我们在数据库中称之为 one 实例的东西）。这只是一种挑剔的样式，但代码没问题。



您真正需要的建议：有一种更简单的方法来获取单个项目的位置。只需复制原始撇号图片小部件 lib / modules /撇号图片-Widgets / views / widgetBase.html 文件$ c>模块添加到项目级别的文件 lib / modules /撇号图片-Widgets / views / widget.html 中，然后将其添加到您的内容中。



（您可以复制 widget.html 并覆盖 widgetBase

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



如果你需要额外的JavaScript，copy lib / modules /撇号图片-Widgets / public / js / always.js 以及项目级别;它很短，由调用我们的 jquery-projector 插件的 play 方法组成。你的 play 方法可以做任何它想做的事情。



话虽如此，如果你的目标更加雄心勃勃，请看看撇号图像和撇号图像-Widgets 模块本身。他们使用附件字段类型，您也可以使用它，包括直接在小部件模块中使用它，如果您不想让可浏览的图像存储库用于重用。所以你可以完全绕过部件显示从部件库中抽取的东西模式。


I am having trouble creating a custom image widget in Apostrophe CMS. The current apostrophe-images-widgets works fine for more images, but I need a special case for the website logo as it needs specific css and a specific location on the website.

I tried following the tutorial here for making a custom widget with a manager, but I have no gotten the results I would like. Here is my logo-image module

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();
        };
    }
};

which I registered in app.js like so

modules: {
    'logo-image': {}
}

Then, I have a logo-image-widgets module with an index.js like so

module.exports = {
      extend: 'apostrophe-pieces-widgets',
      label: 'Website Logo',
      filters: {
          projection: {
          slug: 1,
          title: 1,
          type: 1,
          tags: 1
      }
   }
};

and a modules/logo-image-widgets/views/widget.html like so

<a class="navbar-brand" href="/">{{
  apos.singleton(
    piece,
    'logo',
    'apostrophe-images',
    {
      edit: false
    }
  )
}}</a>

and a base layout like so

{% 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>

This leaves me with a couple issues, 1) I cannot add the logo image to the website itself, only through the menu bar and 2) I don't think it is actually what I want. I want a custom <img /> tag rendered with my own css classes.

I wasn't too sure where to ask this question, so any advice would be great. I am having a lot of trouble creating more complex custom widgets.

Any help is appreciated. Thanks!

解决方案

I'm the lead developer of Apostrophe at P'unk Avenue.

What you've done here shows a solid grasp of how pieces and pieces-widgets work, although our convention would be to always give the module itself a plural name (it manages many things) while the name property remains singular (it's what we call one instance of the thing in the database). That's just a style nitpick though, the code is fine.

The advice you really need: there's a much easier way to get where you're going for a single project. Just copy the lib/modules/apostrophe-images-widgets/views/widgetBase.html file of the original apostrophe-images-widgets module to the file lib/modules/apostrophe-images-widgets/views/widget.html at project level and hack it up to your heart's content.

(You could just copy widget.html and override various template blocks in widgetBase, but it sounds like your needs wouldn't be met by those blocks alone.)

Since you don't want this behavior change for every single widget, use an if statement in your template to vary the output based on data.options.foo, where foo is any option you're passing to the widget in your home page template. Look at how data.options.size is handled now, for instance.

If you need extra JavaScript, copy lib/modules/apostrophe-images-widgets/public/js/always.js to project level as well; it's very short, consisting of a play method that invokes our jquery-projector plugin. Your play method can do anything it wants to instead.

Having said that, if your goals are more ambitious, take a look at the apostrophe-images and apostrophe-images-widgets modules themselves. They use the attachment field type, which you can use too, including using it directly in a widget module if you are not interested in having a browseable repository of images for reuse. So you can bypass the "widgets display stuff drawn from a repository of pieces" pattern entirely.

这篇关于在撇号CMS中创建自定义图像小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆