Создание пользовательского графического виджета в 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': {} 
} 

Тогда у меня есть 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.

Я не был уверен, где задать этот вопрос, поэтому любой совет будет замечательным. У меня возникли проблемы с созданием более сложных пользовательских виджетов.

Любая помощь приветствуется. Благодаря!

Answer 1

Я ведущий разработчик Apostrophe на P'unk Avenue.

Что вы здесь сделали, показывает, как работают куски и элементы-виджеты, хотя наше соглашение всегда должно давать модулю множественное имя (оно управляет многими вещами), в то время как свойство 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-widgets. Они используют тип поля attachment, который вы также можете использовать, в том числе используя его непосредственно в модуле виджета, если вам не интересно иметь доступный репозиторий изображений для повторного использования. Таким образом, вы можете полностью обходить шаблон «Виджеты, отображающий материал, собранный из репозитория штук».