README

一个易于使用、功能丰富的包，用于简化 Laravel 中的布局创建。

功能

• 简化布局管理。
• 可定制配置以适应您的应用需求。
• 改善 Laravel 项目的结构和组织。

安装

通过 Composer 安装包

composer require erag/laravel-setup-layout

步骤 1: 注册服务提供者

Laravel 11.x

确保服务提供者在 /bootstrap/providers.php 中已注册

return [
    // ...
    LaravelSetupLayoutServiceProvider::class
];

Laravel 10.x

在 config/app.php 中添加服务提供者

'providers' => [
    // ...
    LaravelSetupLayout\LaravelSetupLayoutServiceProvider::class,
];

步骤 2: 发布配置

运行此命令以发布配置文件

php artisan vendor:publish --tag=LaravelSetupLayout --force

步骤 4: assets config/layout-assets.php

<?php

return [
     
     #THEME_VENDORS <x-web-app-layout> Define web assets for different pages
     'THEME_WEB_ASSETS' => [
          'home' => [
               // CSS files for the home page
               'css' => [
                    'assets/css/demo.css',
               ],
               // JavaScript files for the home page
               'js'  => [
                    'assets/js/demo.js',
               ],
          ],
          // You can add more as per your requirement
     ],


     #THEME_ASSETS <x-app-layout>  Define global assets used across all pages
     'THEME_ASSETS' => [
          'global'  => [
               // Global CSS files, such as Bootstrap
               'css' => [
                    'https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css',
                    // You can add more global CSS files here
               ],
               // Global JavaScript files, such as Bootstrap JS
               'js'  => [
                    'https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js',
                    // You can add more global JavaScript files here
               ],
          ],
     ],

     #THEME_VENDORS <x-app-layout> Define vendor assets specific to certain pages or components
     'THEME_VENDORS' => [
          'demo' => [
               // CSS files for the login page or component
               'css' => [
                    'assets/css/demo.css',
               ],
               // JavaScript files for the login page or component
               'js'  => [
                    'assets/js/demo.js',
               ],
          ],
          // You can add more as per your requirement
     ],
];

步骤 4: 使用 🤔

创建控制器

生成基本控制器

php artisan make:controller HomeController

创建视图

为您的应用程序创建视图

php artisan make:view home

这将在 resources/views 中创建 home.blade.php。

子目录控制器

要创建子目录中的控制器，请使用

php artisan make:controller Dashboard/HomeController

这将在 app/Http/Controllers/Dashboard 下创建 HomeController。

子目录视图

对于子目录中的视图

php artisan make:view dashboard.home

在 resources/views/dashboard 中创建 home.blade.php。

步骤 4: 定义路由

主页路由

Route::get('/', [App\Http\Controllers\HomeController::class, 'index']);

仪表板路由

Route::get('/dashboard', [App\Http\Controllers\Dashboard\HomeController::class, 'dashboard']);

确保您有匹配的控制器方法，例如

// HomeController.php
namespace App\Http\Controllers;

class HomeController extends Controller
{
    public function index()
    {
        addWebAsset(['home']);
        return view('home');
    }
}

// Dashboard/HomeController.php
namespace App\Http\Controllers\Dashboard;

class HomeController extends Controller
{
    public function dashboard()
    {
        addVendors(['demo']);
        return view('dashboard.home');
    }
}

步骤 5: 使用布局组件

在您的 Blade 文件中添加布局组件

主页布局（前端）

<!-- resources/views/home.blade.php -->
<x-web-app-layout>
    <h1>Welcome to the Front-End 👋</h1>
</x-web-app-layout>

仪表板布局

<!-- resources/views/dashboard/home.blade.php -->
<x-app-layout>
    <h1>Welcome to the Dashboard 👋</h1>
</x-app-layout>

脚本和样式的 Blade 指令

用于包含页面特定的样式和脚本

<!-- resources/views/home.blade.php -->
@push('page_styles')
    <link rel="stylesheet" href="path/to/home-styles.css">
@endpush

@push('page_scripts')
    <script src="path/to/home-scripts.js"></script>
@endpush

页面标题设置

动态设置页面标题

// HomeController.php
public function index()
{
    addWebAsset(['home', 'jq']);
    $data['title'] = 'Home Page';
    return view('home', $data);
}

并在您的视图中

<!-- resources/views/home.blade.php -->
<x-web-app-layout>
    @section('title', $title)
    <h1>Welcome to the Home Page 👋</h1>
</x-web-app-layout>

许可证

MIT 许可证（MIT）。有关详细信息，请参阅许可证文件。

GitHub @eramitgupta  · 
LinkedIn @eramitgupta  · 
支持 捐赠