italia/design-laravel-theme

轻松集成 Bootstrap-Italia 到 Laravel 5

1.3.8 2019-10-21 10:49 UTC

This package is auto-updated.

Last update: 2024-09-26 23:06:50 UTC


README

Join the #design-cms-themes channel Get invited Design on forum.italia.it Latest Stable Version Total Downloads

此包提供了一个简单的方法,可以快速设置 Bootstrap Italia,并与 Laravel 5 一起使用。除了 Laravel 之外,它没有任何要求或依赖项,因此您可以立即开始构建您的网站。该包仅提供 Blade 模板,您可以根据需要进行扩展,并提供高级菜单配置选项。

  1. 安装
  2. 更新
  3. 用法
  4. make:bootstrapitalia artisan 命令
  5. 配置
    1. 菜单
  6. 翻译
  7. 自定义视图
  8. 问题、问题和拉取请求

1. 安装

  1. 使用 composer 需要此包

    composer require italia/design-laravel-theme
    
  2. 将服务提供者添加到 config/app.php 中的 providers

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

    italia\DesignLaravelTheme\ServiceProvider::class,
  3. 发布公共资产

    php artisan vendor:publish --provider="italia\DesignLaravelTheme\ServiceProvider" --tag=assets
    

2. 更新

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

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

    php artisan vendor:publish --provider="italia\DesignLaravelTheme\ServiceProvider" --tag=assets --force
    

3. 用法

要使用模板,创建一个 blade 文件,并使用 @extends('bootstrap-italia::page') 扩展布局。此模板产生以下部分

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

所有部分都是可选的。您的 blade 模板可能看起来像以下示例。

{{-- resources/views/test.blade.php --}}

@extends('bootstrap-italia::page')

@section('title', 'Bootstrap Italia')

@section('content')
    <p>Test page.</p>
@stop

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

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

注意,在 Laravel 5.2 或更高版本中,您也可以使用 @stack 指令为 cssjavascript 提供内容

{{-- resources/views/test.blade.php --}}

@push('css')

@push('js')

您现在只需像往常一样从控制器返回此视图。查看 Bootstrap Italia 了解如何为您的页面构建内容。

4. make:bootstrapitalia artisan 命令

注意:仅适用于 Laravel 5.2 和更高版本

此包附带一个 make:bootstrapitalia 命令,其行为与 make:auth(在 Laravel 5.2 中引入)完全相同。在不久的将来,它将使用 bootstrap-italia 样式发布身份验证视图。

它还将在 vendor/pagination 文件夹下创建自定义分页链接视图

php artisan make:bootstrapitalia

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

5. 配置

首先,发布配置文件

php artisan vendor:publish --provider="italia\DesignLaravelTheme\ServiceProvider" --tag=config

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

5.1 菜单

您可以按照以下方式配置您的菜单。

基本上,您有三个键: slim_headerheaderfooter,它们定义了如何配置这三个部分

'menu' => [
    'slim-header' => [],
    'header' => [],
    'footer' => [],
    'footer-bar' => [],
],

slim_headerfooter_bar 的配置如下

'menu' => [
        'slim-header' => [
            [
                'url' => '#',
                'text' => 'Pagina iniziale',
            ],
            [
                'url' => '#',
                'text' => 'Contatti',
                'target' => '_blank',
            ],
        ],
        ...
]        
'menu' => [
        'footer-bar' => [
            [
                'url' => '#',
                'text' => 'Privacy policy',
            ],
            [
                'url' => '#',
                'text' => 'Contatti',
                'target' => '_blank',
            ],
        ],
        ...
]        

footer 的配置如下

'menu' => [
        ...
        'footer' => [
                    [
                        [
                            'text' => 'Amministrazione',
                            'url' => '#',
                            'target' => '_blank',
                        ],
                        [
                            'text' => 'Giunta e consiglio',
                            'url' => '#',
                        ],
                    ],
                    [
                        [
                            'text' => 'Amministrazione',
                            'url' => '#',
                        ],
                        [
                            'text' => 'Giunta e consiglio',
                            'url' => '#',
                        ],
                    ],
                ],
]        

header 更为复杂,因为每个元素可以是 string、一个 simple item、一个 dropdown 或一个 megamenu

  • string 只是一个不带链接的字符串
  • 一个 simple item 是一个具有以下形式的关联数组
[
    'url' => '/home',
    'text' => 'Home',
    'target' => '_blank',
],
  • 一个 dropdown 是一个将 dropdown 键设置为 simple itemsheadersseparators(字符串 '-')数组的项。
[
    'url' => '/home',
    'text' => 'Dropdown item',
    'dropdown' => [
        'Intestazione',
        [
            'url' => '/home',
            'text' => 'Home',
            'target' => '_blank',
        ],
        '-',
        [
            'url' => '/about',
            'text' => 'About',
        ],
],
  • 一个 megamenu 是一个将 megamenu 键设置为二维数组 simple itemsheadersseparators(字符串 '-')的项。
[
    'text' => 'Megamenu item',
    'megamenu' => [
        [
            'Heading 1',
            [
                'url' => '/home',
                'text' => 'Home',
                'target' => '_blank',
            ],
            '-',
            [
                'url' => '/about',
                'text' => 'About',
            ],
        ],
        [
        'Heading 2',
            [
                'url' => '/a',
                'text' => 'Link a',
            ],
            '-',
            [
                'url' => '/b',
                'text' => 'Link b',
            ],
        ],
    ]
],

对于上述每一个,使用单个字符串指定菜单标题项以分隔项。使用数组指定菜单项。texturlroute 是必须的属性。

如果你想要有条件地显示菜单项,请使用 can 选项。这集成了 Laravel 的 Gate 功能。

[
    [
        'text' => 'Create request',
        'url' => 'request/new',
        'can' => 'create-request'
    ],
]

自定义菜单过滤器

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

例如使用 Laratrust

<?php

namespace MyApp;

use italia\DesignLaravelTheme\Menu\Builder;
use italia\DesignLaravelTheme\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/bootstrap-italia.php

'filters' => [
    italia\DesignLaravelTheme\Menu\Filters\HrefFilter::class,
    italia\DesignLaravelTheme\Menu\Filters\ActiveFilter::class,
    //italia\DesignLaravelTheme\Menu\Filters\GateFilter::class, Comment this line out
    MyApp\MyMenuFilter::class,
]

运行时菜单配置

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

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

use Illuminate\Contracts\Events\Dispatcher;
use italia\DesignLaravelTheme\Events\BuildingMenu;

class AppServiceProvider extends ServiceProvider
{

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

}

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

一个更实用的示例,实际上使用了数据库

    public function boot(Dispatcher $events)
    {
        $events->listen(BuildingMenu::class, function (BuildingMenu $event) {            

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

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

此基于事件的接口用于确保你的构建菜单的代码仅在页面实际显示时运行,而不会在每次请求时运行。

活动菜单项

默认情况下,如果以下任何一个条件成立,则菜单项被视为活动项

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

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

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

5. 翻译

目前,默认提供意大利语和英语翻译。只需在 config/app.php 中指定语言。如果你需要修改文本或添加其他语言,你可以发布语言文件

php artisan vendor:publish --provider="italia\DesignLaravelTheme\ServiceProvider" --tag=translations

现在,你可以在 resources/lang/vendor/bootstrap-italia 中编辑翻译或添加语言。

6. 定制视图

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

php artisan vendor:publish --provider="italia\DesignLaravelTheme\ServiceProvider" --tag=views

现在,你可以在 resources/views/vendor/bootstrap-italia 中编辑视图。

7. 问题、疑问和 Pull Requests

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

如果你有问题,首先检查关闭的问题。随着时间的推移,我已经回答了许多问题。

要提交 Pull Request,请先从这个仓库分叉,创建一个新的分支,并在其中提交你的新/更新代码。然后从你的新分支打开 Pull Request。有关更多信息,请参阅 此指南