Template（テンプレート） - opensource-workshop/connect-cms GitHub Wiki

プラグイン・テンプレートとは
各プラグインは、画面用のプログラムとしてテンプレートを持ちます。
プラグインのテンプレートは以下の場所になります。
resources/views/plugins/user/{plugin_name}/
例）メニュープラグインの場合
resources/views/plugins/user/menu/
テンプレートのフォルダ
プラグインは、複数のテンプレートを持つことができます。これにより、配置した場所ごとに、レイアウトを変えることが可能になります。
デフォルトのテンプレートのフォルダ
プラグイン・テンプレートのデフォルトは default フォルダです。
例）メニュープラグインの場合
resources/views/plugins/user/menu/default
テンプレートのフォルダを追加する
テンプレートのフォルダを追加して、新しいテンプレートを作成することができます。
template.ini
テンプレート・フォルダにはtemplate.ini を記載してください。
template.ini は以下のようにテンプレート名とプラグイン編集で選択する際の順番を記載します。
テンプレート名を日本語で記載する場合は、文字コードをUTF-8 にしてください。

[base]
template_name = default
display_sequence = 1

継承（最初に指定）
@extends('core.cms_frame_base')
画面内容を@section で囲む。セクション指定は "plugin_contents_$frame->id"
@section("plugin_contents_$frame->id")
※ 画面内容
@endsection

継承（最初に指定）
@extends('core.cms_frame_base_setting')
設定メニューを@section で囲む。セクション指定は "core.cms_frame_edit_tab_$frame->id"
@section("core.cms_frame_edit_tab_$frame->id")
{{-- プラグイン側のフレームメニュー --}}
@include('plugins.user.._frame_edit_tab') <-- ****** はプラグイン名
@endsection
画面内容を@section で囲む。セクション指定は "plugin_setting_$frame->id"
@section("plugin_setting_$frame->id")
画面内容
@endsection

PCでの広い画面表示
　設定画面の基本形として、項目のキャプションを左に配置、右に入力項目としています。
　col 設定がbootstrap4 のグリッドを利用したものだけでは、幅が狭いプラグインでも、ブラウザ幅が大きい場合に、設定メニューがハンバーガーメニューにならない問題があるため、CSS のcol 定義に関しては、$frame のメソッドを呼び、そのフレームに応じたCSS を取得しています。
　使用例としてはサイト内検索プラグイン（search）がわかりやすいかと思います。
狭い幅での画面表示　PCでブラウザ幅を狭くした場合 or フレーム幅を小さく設定した場合 or 左もしくは右エリアに配置した場合
　bootstrap グリッドシステムでPC（広い幅）と同じタグでキャプションと項目を縦に並べ替えるようになっています。
　設定メニューはbootstrap4 のnavbar を使用し、ハンバーガーメニューで項目を選択するようにし、狭い画面での操作性を確保します。
　以下のサンプルはハンバーガーメニューを展開したところです。