mawuekom/laravel-custom-view-components

一组你在Laravel项目中常用的通用视图组件

维护者

详细信息

github.com/mawuva/laravel-custom-view-components

主页

源代码

问题

安装: 39

依赖者: 0

建议者: 0

安全: 0

星标: 0

关注者: 1

分支: 0

开放问题: 0

v2.1.0 2022-02-09 03:13 UTC

Requires

Requires (Dev)

MIT 2ac7ed6401dac3db21343ccd4f463c9b5852dc67

  • Ephraïm Seddor <seddorephraim7.woop@gmail.com>

laravelmawuekomlaravel-custom-view-componentsview-components

This package is auto-updated.

Last update: 2024-09-09 08:38:59 UTC

README

此包提供你在Laravel项目中常用的通用视图组件。

安装

您可以通过composer安装此包

composer require mawuekom/laravel-custom-view-components

用法

安装后，转到config/app.php，将CustomponentsServiceProvider添加到提供者数组中

Laravel 5.5及以上版本使用包自动发现功能，无需编辑config/app.php文件。

  • 服务提供者

'providers' => [

    ...

    Mawuekom\Customponents\CustomponentsServiceProvider::class,

],

  • 发布资产

php artisan vendor:publish --provider="Mawuekom\Customponents\CustomponentsServiceProvider"

或者你可以发布配置

php artisan vendor:publish --provider="Mawuekom\Customponents\CustomponentsServiceProvider" --tag="config"

配置

  • 有许多可配置选项，已扩展为可以通过.env文件变量进行配置。
  • 查看配置文件：customponents.php.
<?php

return [

    /**
     * App Name should be set here
     */

    'app_name' => env('APP_NAME', 'My Laravel Project'),

    /*
    |--------------------------------------------------------------------------
    | Bunch of features to enable or disable.
    |--------------------------------------------------------------------------
    */

    'enable' => [
        'app_style_sheet'   => true,
        'app_script'        => true,
    ],
];

完成以上步骤后，你可以在welcome.blade.php中添加以下代码...

<x-customponents::partials.headers title="Page Title" description="Page Description" section="" />

<div>
    <h1>My Laravel Website</h1>
    <hr>
    <p>
        Some content here
    </p>
</div>

<x-customponents::partials.footers />
  • section参数在这里可以帮助你为访客或登录用户定义不同的视图或部分。

如果你想在网页中添加一些资产，如样式表和脚本链接，不必担心。

这非常简单。

此包提供了一个名为Section的视图组件助手，可以帮助你将项目的部分包含在其他部分中。

查看组件源代码：headers.blade.php。

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <x-customponents::partials.seo-tags title="{{ $title }}" description="{{ $description }}" section="{{ $section }}" />
        @yield('styles')
    </head>
    <body @yield('body_attributes')>

你会看到经典的blade指令：@yield('styles')

然后你可以这样使用...

<x-customponents-section name="styles">
    your content goes here
</x-customponents-section>

所以要在网页中包含资产链接，只需这样做

<x-customponents::partials.headers title="Page Title" description="Page Description" section="" />
    <x-customponents-section name="styles">
        <link rel="stylesheet" href="css/app.css">
    </x-customponents-section>
</x-customponents::partials.headers>

<div>
    <h1>My Laravel Website</h1>
    <hr>
    <p> Some content here </p>
</div>

<x-customponents::partials.footers>
    <x-customponents-section name="scripts">
        <script src="js/app.js"></script>
    </x-customponents-section>
</x-customponents::partials.footers>

不错，不是吗 !!! 🙂😉

  • 除此之外，还有一个组件assets.blade.php，你可以使用它来添加资产链接，就像这样
<x-customponents::resources.assets type="css" path="css/app.css" />

然后，你的页面可能看起来是这样的...

<x-customponents::partials.headers title="Page Title" description="Page Description" section="" />
    <x-customponents-section name="styles">
        <x-customponents::resources.assets type="css" path="css/app.css" />
    </x-customponents-section>
</x-customponents::partials.headers>

<div>
    <h1>My Laravel Website</h1>
    <hr>
    <p> Some content here </p>
</div>

<x-customponents::partials.footers>
    <x-customponents-section name="scripts">
        <x-customponents::resources.assets type="js" path="js/app.js" />
    </x-customponents-section>
</x-customponents::partials.footers>

布局

有一个master.blade.php布局，可以简化你的welcome.blade.php

<x-customponents::layouts.master title="Page Title" description="Page Description" section="">

    <x-customponents-section name="lyt_master_styles">
        // Your style sheet goes here.
    </x-customponents-section>

    <div>
        <h1>My Laravel Website</h1>
        <hr>
        <p> Some content here </p>
    </div>

    <x-customponents-section name="lyt_master_scripts">
        // Your script files goes here.
    </x-customponents-section>

</x-customponents::layouts.master>

享受 :)😉👌🔥

测试

composer test

变更日志

请参阅CHANGELOG以获取有关最近更改的更多信息。

贡献

请参阅CONTRIBUTING以获取详细信息。

许可

MIT许可（MIT）。请参阅许可文件以获取更多信息。