アポストロフィCMSでカスタム画像ウィジェットを作成する

Question

アポストロフィCMSでカスタム画像ウィジェットを作成できません。現在のapostrophe-images-widgetsはもっと多くの画像でうまくいきますが、ウェブサイトのロゴには特別なCSSとウェブサイト上の特定の場所が必要なため、特別なケースが必要です。

チュートリアルのマネージャでカスタムウィジェットを作成しようとしましたが、私は望む結果が得られませんでした。ここで私はその後、私はそう

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のようなindex.jsでlogo-image-widgetsモジュールを持っているので、

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

ようapp.jsに登録私の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(); 
     }; 
    } 
}; 

です

<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

私はP'unk AvenueのApostropheの主任開発者です。

あなたがここで行ったことは、どのようにしてウィジェットが動作するのかを強く理解していることを示していますが、モジュール自体に複数の名前（多くは管理しています）それは我々がと呼ばれるもので、データベース内のもののインスタンスであるです）。それはちょうどスタイルのニックピックですが、コードは問題ありません。

本当に必要なアドバイス：1つのプロジェクトのどこに行くのが簡単です。元のapostrophe-images-widgetsモジュールのlib/modules/apostrophe-images-widgets/views/widgetBase.htmlファイルをプロジェクトレベルの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メソッドで構成されています。 playメソッドでは、代わりに何かを実行できます。

あなたの目標がより野心的な場合は、apostrophe-imagesとapostrophe-images-widgetsモジュール自体を見てください。彼らはattachmentフィールドタイプを使用します。あなたが再利用のために閲覧可能なリポジトリを持っていることに興味がない場合は、ウィジェットモジュールで直接使用することもできます。したがって、「ウィジェットは部分のリポジトリから描画されたものを表示する」パターンを完全に回避することができます。