關於網路那些事...

網路行銷,SEO,網路趨勢,教學文章,網頁設計,生活時事

Voyager - 客製化 Widgets 教學

Voyager 在管理員登入後,Dashboard 就會出現三個預設的 Widgets

這裡記錄客製化 Widgets 的方式

修改預設 Widgets config

首先,開啟 config/voyager.php

可以找到預設的 Widgets:

<?php ...
        'widgets' => [
            'TCG\\Voyager\\Widgets\\UserDimmer',
            'TCG\\Voyager\\Widgets\\PostDimmer',
            'TCG\\Voyager\\Widgets\\PageDimmer',
        ],

先將預設的 Widgets 註解掉,改為我們需要

<?php ...
        'widgets' => [
            // 'TCG\\Voyager\\Widgets\\UserDimmer',
            // 'TCG\\Voyager\\Widgets\\PostDimmer',
            // 'TCG\\Voyager\\Widgets\\PageDimmer',
            'App\\Widgets\\Guardian',
            'App\\Widgets\\Adoptee',
            'App\\Widgets\\Adoptor',
        ],

複製 Widgets 進行修改

前往 vendor\tcg\voyager\src\Widgets\ 將資料夾搬移到 app\ 底下

並且將檔名更改為你在config/voyager.php 設定的名稱,

例如我這裡設定的 Guardian.php, Adoptee.php, Adoptor.php

接著,修改檔案

  • 修改 namespace
  • 引入 BaseDimmer
  • 修改 $count 所引用的 Model
  • 修改預設 $string
  • 修改 icon
  • 修改 button 文字及連結
  • 修改背景圖
    <?php
    //修改 namespace
    namespace App\Widgets;
    //引入 BaseDimmer 
    use TCG\Voyager\Widgets\BaseDimmer;
    
    
    

    class Guardian extends BaseDimmer
    {
    //修改 $count 所引用的 Model
    $count = \App\Guardian::count();
    //修改預設 $string
    $string = '送養人';
    //修改 icon
    'icon' => 'voyager-person',
    //修改 button 文字及連結
    'button' => [
    'text' => '前往',
    'link' => asset('admin/guardians'),
    ],
    // 修改背景圖
    'image' => '01.jpg',


    接著陸續修改其他兩個檔案

    添加背景圖

    在前面設定,我們加入了背景圖

    可以將你想設定為背景圖的照片,放在 public/ 資料夾中即可

    完成~


如果這篇文章對你有幫助,請在這裡點個讚



最新文章推薦