# Voyager實作 可用指令 安裝Voyager套件(針對Laravel5) composer require tcg/voyager:“1.2.7” 安裝Voyager套件(針對Laravel6~8) composer require tcg/voyager 賦予現有使用者admin@admin.com管理員權限 php artisan voyager:admin admin@admin.com 建立新使用者admin@admin.com並賦予管理員權限 php artisan voyager:admin admin@admin.com --create 安裝Voyager資料 php artisan voyager:install Helper Function //從public資料夾取出1.jpg asset('1.jpg'); //從storage/app/public資料夾取出1.jpg Voyager::image('1.jpg'); 開發自己的Widgets Step 1.從vendor/tcg/voyager/src/Widgets複製Widget範本 Step 2.在App/Http/Widgets用範本新增一個Widget Step 3.編輯Widget類別的run()與shouldBeDisplayed()，範例如下 public function run() { $count = Voyager::model('User')->count(); $string = "共計使用者{$count}位"; return view('voyager::dimmer', array_merge($this->config, [ 'icon' => 'voyager-backpack', 'title' => "{$count} 個使用者", 'text' => $string, 'button' => [ 'text' => "查詢使用者", 'link' => route('voyager.users.index'), ], 'image' => Voyager::image('people.png'), ])); } /** * Determine if the widget should be displayed. * * @return bool */ public function shouldBeDisplayed() { //return Auth::user()->can('browse', Voyager::model('User')); //不論登入者是誰，總是要顯示Widget return true; } Step 4.編輯config/voyager.php，加入Widget設定 'widgets' => [ 'App\Http\Widgets\UserWidget', ], 複寫users使用者的編輯視圖 Voyager的使用者編輯視圖所在路徑 vendor/tcg/voyager/resources/views/users/edit-add.blade.php Step 1.將上面的檔案複製到resources/views/vendor/voyager/users Step 2.編輯edit-add.blade.php，加入所需要新增的欄位，如下例: <div class="form-group"> <label for="age">年紀</label> <input type="number" class="form-control" id="age" name="age" value="{{ old('age', $dataTypeContent->age ?? '') }}"> </div> <div class="form-group"> <label for="pic">圖片網址</label> <input type="text" class="form-control" id="pic" name="pic" value="{{ old('pic', $dataTypeContent->pic ?? '') }}"> </div> Step 3.確保該表格的BREAD有更新 媒體管理員 PS:如果出現上傳檔案過大的問題，你可以變更php.ini裏頭的max_file_upload和file_upload_size設定 menu builder 取用menu資料語法 menu(菜單名稱) menu(菜單名稱,樣式檔名) menu(菜單名稱,"bootstrap") 以bootstrap作為樣式 menu(菜單名稱,"_json") 以JSON格式作為樣式 menu菜單樣式範例 菜單樣式的視圖檔存放於 resources/views資料夾內 <ul class="myclass menuclass"> @foreach($items as $menu_item) <li class="liclass"><a href="{{ $menu_item->link() }}">{{ $menu_item->title }}</a></li> @if(count($menu_item->children)>0) @foreach($menu_item->children as $menu_sub_item) <li class="liclass"><a href="{{ $menu_sub_item->link() }}">{{ $menu_sub_item->title }}</a></li> @endforeach @endif @endforeach </ul> Database 當用資料庫頁面生成生成/變更結構，如何轉換成Migration檔案 Laravel 5版本 透過套件 Migrations-generator Laravel 6以上版本 透過網頁服務 指南針 提供Voyager教學資源.Icon類別.CLi呼叫面板.Log檢視 在正式環境開啟Compass指南針頁面 //config/voyager.php // Activate compass when environment is NOT local 'compass_in_production' => true, BREAD 提供各表格的後台新增.刪除.修改與查詢功能，可說是Voyager套件的核心 BREAD基礎設定 顯示名稱單複數 作為頁面所呈現的文字 URL Slug 用於生成BREAD的路徑，一般與表格名稱相同 使用圖標 於後台選單項目所顯示的ICON 模型名稱 該表格的模型類別，包含命名空間 控制器名稱 BREAD所使用的功能，如無須複寫預設功能可留空白 Policy名稱 BREAD所使用的政策，一般用於資料層級的權限設計 權限生成 一併生成該表格相關的權限，必須有權限才能使用該表的BREAD，一般都設為"是" 伺服器端分頁 Browse頁面的分頁功能是否由後台提供，是的話功能較完整，建議選"是" 順序欄位 設定該表格用於儲存順序的數字欄位 顯示順序欄位 用於編輯順序功能頁面，各資料所顯示的欄位內容 order direction 排序方式 Default server-side search field Browse頁面的搜尋欄預設針對哪個欄位 欄位列表區域 欄位字段順序 會影響Browse.Read等所有BREAD頁面的欄位呈現的順序。設為必塡的欄位同樣會在表單被驗證必須填入 可見性 決定該欄位在各BREAD頁面是否出現，也會影響到能否儲存與更新 輸入類型 決定該欄位的輸入項類型 顯示名稱 決定該欄位的標頭名稱 可選細項 用以加入該欄位的參數，作為自定義的主要手段 可選細項列表 重要事項 *輸入的最後一項不可以加逗號，會出錯 *不可以使用單引號，須改用雙引號 一般類 description 輸入項下方問號提示 default 預設內容 validation 驗證 rules 要驗證的規則 validation 當驗證不過時要顯示的自定義文字 null 空值的處理 diplay 顯示 id 在外圍的div標籤加入id屬性 width 設定輸入項的寬度，最大為12，最小為1 Checkbox on 開啟的文字提示 off 關閉的文字提示 checked 預設的狀態 Select Dropdown options 選項 default 預設選項 Media Picker min 最少圖片數 max 最多圖片數 resize 進行縮圖 quality 壓縮品質 upsize 是否支援放大 thumbnais 縮圖定義 watermark source 浮水印圖片所在位置，根目錄為storage/app/public position 浮水印的位置 x X軸位移 y Y軸位移 size 相對於圖片的大小，預設為15 base_path 預設開啟路徑，如不設定則為與表格名稱相同的資料夾 allowed 可上傳的類型，例如:[“image”, “audio”, “video”] Role 角色 用來設定使用者的權限 Name 寫英文，用於程式 Display Name 可寫中文，用於顯示 權限 要給該角色的權限就打勾 權限術語: browse 瀏覽多筆資料 read 瀏覽單筆資料 edit 編輯資料 add 新增資料 delete 刪除資料 權限關鍵字: 權限術語 + _ + slugs 如果某個菜單項目和BREAD有關，它將會檢查其Browse權限，需要有Browse權限該菜單項目才會顯示 Settings 設定 管理可於專案內使用的設定常數，可支援多種欄位 新增設定欄位說明 命名 讓管理員能理解該設定的功用，可輸入中文 鍵 存取該設定時所用的關鍵字 類型 該設定於編輯時所使用的輸入項 組 該設定所屬群組，可選擇既有群組，也可輸入新的群組名來新增 選項 如類型為下拉選單，可在此編輯選單的項目，如下例 { "options" : { "key1" : "選項1", "key2" : "選項2" }, "default" : "key1" } Helper Function //取用設定 setting(‘群組名.鍵’) //生成storage/app/public裡頭圖片的完整網址 Voyager::image(‘圖片路徑’) 縮圖使用 需有縮圖欄位的表格Model加入Resizable traits才能用此功能。 //app/Post.php use TCG\Voyager\Traits\Resizable; class Post extends Model{ use Resizable; } 顯示單一圖片範例 @foreach($posts as $post) //顯示image欄位的小圖 <img src="{{Voyager::image($post->thumbnail('small'))}}" /> //顯示photo欄位的小圖 <img src="{{Voyager::image($post->thumbnail('small', 'photo'))}}" /> @endforeach 顯示多張圖片範例 @foreach($posts as $post) $images = json_decode($post->images); @foreach($images as $image) <img src="{{ Voyager::image($post->getThumbnail($image, 'small')) }}" /> @endforeach @endforeach 取用Browse頁面所選擇的項目 Step 1.將連結或按鈕改成以下寫法 <form action="{{ route(路由名稱) }}" id="表單ID" method="POST" style="display:none"> {{ csrf_field() }} <input type="hidden" name="ids" id="參數ID" value=""> </form> <a onclick="event.preventDefault();document.getElementById('表單ID').submit();" class="btn btn-success"> <i class="voyager-polaroid"></i> <span>按鈕文字</span> </a> Step 2.加入以下的script <script> $('input[name="row_id"]').on('change', function () { var ids = []; $('input[name="row_id"]').each(function() { if ($(this).is(':checked')) { ids.push($(this).val()); } }); $('#參數ID').val(ids); }); </script> Step 3.在Controller取用ids的作法 $ids = []; if (empty($id)) { // Bulk action, get IDs from POST $ids = explode(',', $request->ids); } else { // Single item action, get ID from URL $ids[] = $id; } 發表於 HackMD 494 讚賞 收藏 訂閱