-
Notifications
You must be signed in to change notification settings - Fork 6
Template(テンプレート)
-
プラグイン・テンプレートとは
各プラグインは、画面用のプログラムとしてテンプレートを持ちます。
プラグインのテンプレートは以下の場所になります。
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
- テンプレート内ファイルの参照関係
各テンプレート・フォルダに必要な画面用ファイルがない場合は、default テンプレートのファイルが参照されます。
メニューテンプレートの breadcrumbs(パンくず)を見てください。
resources/views/plugins/user/menus/breadcrumbs
default テンプレートにある menus_select.blade.php などがありません。
多くの場合、テンプレートの作成やカスタマイズは、一般ユーザの見た目を変更するためのものでしょう。
そのため、プラグインの編集画面などは追加したテンプレート・フォルダにはコピーせず、default のものを参照するようにすることで、システムのメンテナンス性が向上するように設計されています。
-
継承(最初に指定)
@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 を使用し、ハンバーガーメニューで項目を選択するようにし、狭い画面での操作性を確保します。
以下のサンプルはハンバーガーメニューを展開したところです。
- home
- Overview
- Install
- Install (インストール)(Linux等へのインストール:root権限ある場合)
-
Install-sakura(さくらのレンタルサーバ)
- Install-sakura-root(ドキュメントルート版)
- Install-Xserver(XServer)
- Install-lolipop(ロリポップ-ハイスピードプラン)
- Install-ColorfulBox(カラフルボックス)
- install-CentOS7+PHP7
- Install-XAMPP(Windows+XAMPP)
- install-Docker
- Update
- Plans
- Data
- File Upload
- Design
- Theme(テーマ)
- Font-Icon
- Button(ボタン)
- Display of input error(入力エラーの表示)
- Multi Language
- Policies
- Plugin
- Basic function(基本の関数)
- Opac(蔵書管理)
- OpeningCalendar(開館カレンダー)
- Template(テンプレート)
- Cabinet(キャビネット)
- Whatsnew(新着)
- Search(サイト内検索)
- Approval(承認機能)
- Holidays(祝日管理)
- Menu(メニュー)
-
OriginalPlugin(オリジナル・プラグイン開発)
- OriginalPluginFiles(ファイル一覧)
- Sample.php
- SamplePost.php
- plugin.ini
- SamplesPlugin.php
- create_samples_table.php
- create_sample_posts_table.php
- samples_frame_edit_tab.blade.php
- card/index.blade.php
- card/template.ini
- default/bucket.blade.php
- default/edit.blade.php
- default/index.blade.php
- default/list_buckets.blade.php
- default/show.blade.php
- default/template.ini
- WYSIWYG
- Session
- Programing tips
- Rule(ルール)
- Laravel method tips
- Laravel reference pages
- PHP
- phpcs
- Datetimepicker
- Hook(処理のフック)
- SQL
- Pull-Request(Web画面上)
- Post
- Optimize
- Composer
- npm
- コントローラー側の$this--can()-の調査
- API (外部サービスAPI)
- Test Case(テストケース)
- memo(永原のメモ)
- TCPDF(実装サンプル)
- Phpunit(ユニットテスト)
-
Dusk(ブラウザテスト)
- Github-Actions-Dusk(Github Actionsでブラウザテスト)
- Dusk-Manual(マニュアル自動生成)
- Develop-Windows(Windows開発環境)
- users_columns(ユーザ任意項目)
- container-page-beta(コンテナ方式(ページ)対応(ベータ版))
- Migration
- Other
- Link
- MultiLanguage(多言語化の際の注意点)