ビジュアルエディタ "Kaleflower" を使って、ドキュメントモジュール(Broccoliモジュール)を編集する方法について説明します。
Kaleflowerで制作されたモジュールは、モジュールディレクトリの中の src/template.kflow にソースデータが配置されます。
このkflowファイルを元に、template.html.twig、 module.css.scss、 module.js が出力されます。
出力されたモジュールは、Twigテンプレートエンジンを用いた書き方の場合と同じ方法で処理されます。したがって、モジュールに任意の入力欄を追加したい場合は、 info.json に interface 項目を記述します。 詳しくは モジュールテンプレートの書き方 を参照してください。
モジュール編集では、専用の特殊なカスタムコンポーネントが利用できます。
info.json の interface 項目に定義された各フィールドに入力された値を配置します。
info.json の interface 項目に定義された各フィールドのうち、loopフィールドをバインドする場合に利用できます。子要素を配置することが可能で、子要素からは各サブモジュールのフィールドデータにアクセスすることができます。
各フィールド中に、Twig構文の変数を埋め込むことで、ユーザーがモジュールに入力したデータをバインドすることができます。特に、属性に値をバインドしたい場合(例: img要素の src や alt 属性など)に、直接適用する際に使用できます。
例えば、 main という項目に入力されたデータをバインドする場合、{{ main }} と書きます。
Broccoliモジュールで利用できる _ENV 情報を、直接参照することができます。
詳しくは モジュールテンプレートの書き方 を参照してください。
Broccoliモジュールで利用できる loopitem_start($fieldName)、 loopitem_end()、 appender($fieldName) を、直接参照することができます。
詳しくは モジュールテンプレートの書き方 を参照してください。
