acharsoft/laravel-adminlte-rtl

支持RTL的Laravel与AdminLTE的简单集成

安装: 186

依赖: 0

建议者: 0

安全: 0

星星: 6

关注者: 1

分支: 5

开放问题: 1

语言:JavaScript

v2.1.1 2019-02-13 07:04 UTC

This package is auto-updated.

Last update: 2024-09-13 20:24:40 UTC


README

Latest Version on Packagist Build Status Quality Score StyleCI Total Downloads

此包提供了一种快速设置AdminLTE与Laravel 5的简单方法。除了Laravel之外,它没有其他要求和依赖,因此您可以立即开始构建您的管理面板。该包仅提供可以扩展和高级菜单配置可能的Blade模板。还包括一个使用AdminLTE样式视图而不是默认Laravel视图的make:auth Artisan命令的替代品。

  1. 安装
  2. 更新
  3. 用法
  4. make:adminlte artisan命令
    1. 使用make:adminlte命令之外的认证视图
  5. 配置
    1. 菜单
    1. 插件
  6. 翻译
  7. 自定义视图
  8. 问题、问题和拉取请求

1. 安装

  1. 使用Composer要求该包

    composer require acharsoft/laravel-adminlte-rtl
    
  2. 将服务提供者添加到config/app.php中的providers

    Laravel 5.5使用包自动发现,因此不需要您手动添加ServiceProvider

    acharsoft\LaravelAdminLte\ServiceProvider::class,
  3. 发布公共资产

    php artisan vendor:publish --provider="acharsoft\LaravelAdminLte\ServiceProvider" --tag=assets
    

2. 更新

  1. 要更新此包,首先更新composer包

    composer update acharsoft/laravel-adminlte-rtl
    
  2. 然后,使用--force标志发布公共资产以覆盖现有文件

    php artisan vendor:publish --provider="acharsoft\LaravelAdminLte\ServiceProvider" --tag=assets --force
    

3. 用法

要使用模板,创建一个blade文件,并使用@extends('adminlte::page')扩展布局。此模板提供以下部分

  • title:用于<title>标签
  • content_header:页面标题,位于内容上方
  • content:页面的全部内容
  • css:额外的样式表(位于<head>中)
  • js:额外的javascript(在</body>之前)

所有部分实际上都是可选的。您的blade模板可能如下所示。

{{-- resources/views/admin/dashboard.blade.php --}}

@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <h1>Dashboard</h1>
@stop

@section('content')
    <p>Welcome to this beautiful admin panel.</p>
@stop

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
@stop

@section('js')
    <script> console.log('Hi!'); </script>
@stop

请注意,在Laravel 5.2或更高版本中,您还可以使用@stack指令来设置cssjavascript

{{-- resources/views/admin/dashboard.blade.php --}}

@push('css')

@push('js')

现在只需像往常一样从控制器返回此视图即可。查看AdminLTE以了解如何构建您管理面板的美丽内容。

4. make:adminlte artisan命令

注意:仅适用于Laravel 5.2及以上

此包附带了一个make:adminlte命令,该命令的行为与make:auth(在Laravel 5.2中引入)完全相同,但将认证视图替换为AdminLTE样式视图。

php artisan make:adminlte

此命令应像make:auth命令一样用于新应用

4.1 使用make:adminlte命令之外的认证视图

如果您想手动使用包含的与认证相关的视图,可以创建以下文件,并在每个文件中仅添加一行

  • resources/views/auth/login.blade.php:
@extends('adminlte::login')
  • resources/views/auth/register.blade.php
@extends('adminlte::register')
  • resources/views/auth/passwords/email.blade.php
@extends('adminlte::passwords.email')
  • resources/views/auth/passwords/reset.blade.php
@extends('adminlte::passwords.reset')

默认情况下,登录表单包含注册表单的链接。如果您不想有注册表单,将register_url设置设为null,则该链接将不会显示。

5. 配置

首先,发布配置文件

php artisan vendor:publish --provider="acharsoft\LaravelAdminLte\ServiceProvider" --tag=config
php artisan vendor:publish --provider="Yadahan\AuthenticationLog\AuthenticationLogServiceProvider"

现在,编辑config/adminlte.php以配置标题、皮肤、菜单、URL等。所有配置选项都在注释中解释。然而,我想对menu配置进行一些说明。

5.0 迁移

首先,发布迁移文件

php artisan vendor:publish --provider="acharsoft\LaravelAdminLte\ServiceProvider" --tag=migrations

现在,运行以下命令。

php artisan migrate

最后,将 AuthenticationLogableNotifiable 特性添加到您的可认证模型中(默认为 App\User 模型)。这些特性提供了各种方法,允许您获取常见的认证日志数据,例如最后登录时间、最后登录IP地址,并设置当用户从新设备登录时通知用户的渠道。

use Illuminate\Notifications\Notifiable;
use Yadahan\AuthenticationLog\AuthenticationLogable;
use Illuminate\Foundation\Auth\User as Authenticatable;

class User extends Authenticatable
{
    use Notifiable, AuthenticationLogable;
}

5.1 菜单

您可以根据以下方式配置您的菜单

'menu' => [
    'MAIN NAVIGATION',
    [
        'text' => 'Blog',
        'url' => 'admin/blog',
    ],
    [
        'text' => 'Pages',
        'url' => 'admin/pages',
        'icon' => 'file'
    ],
    [
        'text' => 'Show my website',
        'url' => '/',
        'target' => '_blank'
    ],
    'ACCOUNT SETTINGS',
    [
        'text' => 'Profile',
        'route' => 'admin.profile',
        'icon' => 'user'
    ],
    [
        'text' => 'Change Password',
        'route' => 'admin.password',
        'icon' => 'lock'
    ],
],

使用单个字符串,您可以指定菜单标题项以分隔项目。使用数组,您可以指定菜单项。必须提供 texturlroute 属性。icon 是可选的,如果您省略它,您将获得一个 开放圆圈。您可以使用的图标来自 Font Awesome。只需指定图标的名称,它就会出现在菜单项之前。

如果想要有条件地显示菜单项,请使用 can 选项。这集成了Laravel的Gate功能。如果您需要有条件地显示标题,也需要将其包裹在数组中,使用 header 选项

[
    [
        'header' => 'BLOG',
        'can' => 'manage-blog'
    ],
    [
        'text' => 'Add new post',
        'url' => 'admin/blog/new',
        'can' => 'add-blog-post'
    ],
]

如果想要有条件地显示菜单项,请使用 permission 选项。如果您需要有条件地显示标题,也需要将其包裹在数组中,使用 header 选项

[
    [
        'header' => 'BLOG',
        'can' => 'manage-blog'
    ],
    [
        'text' => 'Add new post',
        'url' => 'admin/blog/new',
        'permission' => ['admin']
    ],
    [
            'text' => 'Add new comment',
            'url' => 'admin/blog/new/comment',
            'permission' => ['admin','master','user']
    ],
]

自定义菜单过滤器

如果您需要自定义过滤器,可以轻松地将自己的菜单过滤器添加到此包中。当您使用第三方授权包(而不是Laravel的Gate功能)时,这可能很有用。

例如使用Laratrust

<?php

namespace MyApp;

use acharsoft\LaravelAdminLte\Menu\Builder;
use acharsoft\LaravelAdminLte\Menu\Filters\FilterInterface;
use Laratrust;

class MyMenuFilter implements FilterInterface
{
    public function transform($item, Builder $builder)
    {
        if (isset($item['permission']) && ! Laratrust::can($item['permission'])) {
            return false;
        }

        return $item;
    }
}

然后添加到 config/adminlte.php

'filters' => [
    acharsoft\LaravelAdminLte\Menu\Filters\ActiveFilter::class,
    acharsoft\LaravelAdminLte\Menu\Filters\HrefFilter::class,
    acharsoft\LaravelAdminLte\Menu\Filters\SubmenuFilter::class,
    acharsoft\LaravelAdminLte\Menu\Filters\ClassesFilter::class,
    //acharsoft\LaravelAdminLte\Menu\Filters\GateFilter::class, Comment this line out
    MyApp\MyMenuFilter::class,
]

运行时菜单配置

您还可以在运行时配置菜单,例如在任何服务提供者的启动时。如果您菜单不是静态的,例如当它依赖于您的数据库或区域设置时,请使用此方法。您还可以结合两种方法。菜单将简单地连接起来,服务提供者的顺序决定了菜单中的顺序。

要运行时配置菜单,请为MenuBuilding事件注册处理程序或回调,例如在服务提供者的boot()方法中

use Illuminate\Contracts\Events\Dispatcher;
use acharsoft\LaravelAdminLte\Events\BuildingMenu;

class AppServiceProvider extends ServiceProvider
{

    public function boot(Dispatcher $events)
    {
        $events->listen(BuildingMenu::class, function (BuildingMenu $event) {
            $event->menu->add('MAIN NAVIGATION');
            $event->menu->add([
                'text' => 'Blog',
                'url' => 'admin/blog',
            ]);
        });
    }

}

配置选项与静态配置文件中相同。

一个更实际的示例,实际使用了翻译和数据库

    public function boot(Dispatcher $events)
    {
        $events->listen(BuildingMenu::class, function (BuildingMenu $event) {
            $event->menu->add(trans('menu.pages'));

            $items = Page::all()->map(function (Page $page) {
                return [
                    'text' => $page['title'],
                    'url' => route('admin.pages.edit', $page)
                ];
            });

            $event->menu->add(...$items);
        });
    }

使用基于事件的这种方法,以确保构建菜单的代码仅在管理面板实际显示时运行,而不是在每次请求时运行。

活动菜单项

默认情况下,如果以下任一条件成立,则认为菜单项是活动的

  • 当前路径与 url 参数匹配
  • 当前路径是 url 参数的子路径
  • 如果它包含一个包含活动菜单项的子菜单

要覆盖此行为,您可以指定一个包含活动URL的 active 参数数组,支持星号和正则表达式。示例

[
    'text' => 'Pages'
    'url' => 'pages',
    'active' => ['pages', 'content', 'content/*']
]

5.2 插件

自定义Blade @links和@scripts

如果您想要添加插件,请使用plugins_jsplugins_css选项。

'plugins_js' => [
        'pace'    => 'plugins/pace/pace.min.js',
        ],
'plugins_css' => [
        'pace'    => 'plugins/pace/pace.min.css',
        ],

您还可以在任何服务提供者的启动时配置Blade。

例如,在服务提供者的boot()方法中配置@links和@scripts

class AppServiceProvider extends ServiceProvider
{

    public function boot()
    {
        Blade::directive('links',function ($expression){
                    return "<?php  echo '<link rel=\'stylesheet\' href=\''.asset(config ('adminlte.plugins_css.'.$expression)).'\'>'; ?>";
        });
        
        Blade::directive('scripts',function ($expression){
                    return "<?php  echo '<script src=\''.asset(config ('adminlte.plugins_js.'.$expression)).'\'></script>'; ?>";
        });
        Blade::directive('langs',function ($expression){
                    return "<?php  echo __('adminlte::adminlte.'.$expression); ?>";
        });
    }

}

之后,运行此命令

php artisan view:clear

在视图中使用@links('pace')添加此标签

<link rel='stylesheet' href='https://:8000/vendor/adminlte/plugins/pace/pace.min.css'>

或在脚本中使用@scripts('pace')

如果您想使用翻译,请使用@langs('your_message')

6. 翻译

目前,默认支持英语、德语、法语、荷兰语、葡萄牙语和西班牙语的翻译。只需在config/app.php中指定语言即可。如果您需要修改文本或添加其他语言,可以发布语言文件。

php artisan vendor:publish --provider="acharsoft\LaravelAdminLte\ServiceProvider" --tag=translations

现在,您可以在resources/lang/vendor/adminlte中编辑翻译或添加语言。

如果想在菜单项中使用这项功能,只需取消注释这一行。

acharsoft\LaravelAdminLte\Menu\Filters\LangFilter::class

在您的菜单过滤器中

4. 定制视图

如果您需要完全控制提供的视图,可以发布它们。

php artisan vendor:publish --provider="acharsoft\LaravelAdminLte\ServiceProvider" --tag=views

现在,您可以在resources/views/vendor/adminlte中编辑视图。

4.1 Google登录

使用composer安装socialite。Socialite是官方的Laravel包,文档见这里

将凭证添加到config/services.php中。Socialite支持Facebook、Twitter、LinkedIn、Google、GitHub和Bitbucket。其他提供者需要社区提供的包,所有这些包都列在这里

这些提供者遵循OAuth 2.0规范,因此需要client_id、client_secret和重定向URL。我们将在下一步中获取这些值!首先,将值添加到配置文件中,因为socialite将在我们请求时查找它们。

'google' => [
    'client_id'     => env('GOOGLE_CLIENT_ID'),
    'client_secret' => env('GOOGLE_CLIENT_SECRET'),
    'redirect'      => env('GOOGLE_REDIRECT')
],

因为我们添加了一个新的包,所以请确保将它们添加到config/app.php中的服务提供者数组中。

/*
* Package Service Providers...
*/
Laravel\Socialite\SocialiteServiceProvider::class,

服务提供者是应用程序启动的中心位置。上面的行让Laravel知道要使Socialite可用于使用。

在config/app.php文件中为Socialite添加一个别名,以便稍后更容易引用。

'aliases' => [
    // ...
    'Socialite' => Laravel\Socialite\Facades\Socialite::class,
]

将弹出的模态中的应用客户端ID和客户端密钥添加到.env文件中。

GOOGLE_CLIENT_ID=000000000000-XXXXXXXXXXX.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=XXXXXXXXXXXXX
GOOGLE_REDIRECT=https://:8000/callback

启用Google+ API:https://console.cloud.google.com/apis/api/plus.googleapis.com/overview(这告诉Google我们的应用程序将使用哪些服务,即Google+账户登录)

更新时间:2019年1月。Google+ API将于3月弃用。Laravel Socialite项目的最新版本已更新,不再使用Google+ API,因此上述步骤不是必需的。

进入routes/web.php,添加重定向和回调的端点

Route::get('/redirect', 'Auth\LoginController@redirectToProvider');
Route::get('/callback', 'Auth\LoginController@handleProviderCallback');

第一个方法将在用户查看您网页的同一窗口中显示Google身份验证页面(没有烦人的弹出窗口)

/**
  * Redirect the user to the Google authentication page.
  *
  * @return \Illuminate\Http\Response
  */
public function redirectToProvider()
{
    return Socialite::driver('google')->redirect();
}

下一个方法将处理成功的Google身份验证

 /**
     * Obtain the user information from Google.
     *
     * @return \Illuminate\Http\Response
     */
    public function handleProviderCallback()
    {
        try {
            $user = Socialite::driver('google')->user();
        } catch (\Exception $e) {
            return redirect('/login');
        }
        // only allow people with @company.com to login
        if(explode("@", $user->email)[1] !== 'gmail.com'){
            return redirect()->to('/');
        }
        // check if they're an existing user
        $existingUser = User::where('email', $user->email)->first();
        if($existingUser){
            // log them in
            auth()->login($existingUser, true);
        } else {
            // create a new user
            $newUser                  = new User;
            $newUser->name            = $user->name;
            $newUser->email           = $user->email;
            $newUser->google_id       = $user->id;
            $newUser->avatar          = $user->avatar;
            $newUser->avatar_original = $user->avatar_original;
            $newUser->save();
            auth()->login($newUser, true);
        }
        return redirect()->to('/home');
    }

5. RTL支持

为了支持RTL,您可以将您的区域设置为'fa'或'ar',在config/app.php中的其他语言模板是ltr。

6. 问题、问题和Pull Requests

您可以在问题部分报告问题并提问。请以ISSUE: 开始您的报告,以QUESTION: 开始您的提问。

如果您有问题,请先查看已关闭的问题。随着时间的推移,我已经回答了很多问题。

要提交Pull Request,请首先fork此存储库,创建一个新的分支,并将您的新/更新代码提交到其中。然后从您的新分支打开Pull Request。有关更多信息,请参阅此指南