italia / design-laravel-theme
轻松集成 Bootstrap-Italia 到 Laravel 5
Requires
- php: >=7.1
- laravel/framework: ~5.1.12|~5.2.0|~5.3.0|~5.4.0|~5.5.0|~5.6.0|~5.7.0|~5.8.0|>=6.0.0
Requires (Dev)
- phpunit/phpunit: ~4.0
README
此包提供了一个简单的方法,可以快速设置 Bootstrap Italia,并与 Laravel 5 一起使用。除了 Laravel 之外,它没有任何要求或依赖项,因此您可以立即开始构建您的网站。该包仅提供 Blade 模板,您可以根据需要进行扩展,并提供高级菜单配置选项。
1. 安装
-
使用 composer 需要此包
composer require italia/design-laravel-theme
-
将服务提供者添加到
config/app.php
中的providers
Laravel 5.5 使用包自动发现,因此不需要您手动添加 ServiceProvider
italia\DesignLaravelTheme\ServiceProvider::class,
-
发布公共资产
php artisan vendor:publish --provider="italia\DesignLaravelTheme\ServiceProvider" --tag=assets
2. 更新
-
要更新此包,首先更新 composer 包
composer update italia/design-laravel-theme
-
然后,使用
--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
指令为 css
和 javascript
提供内容
{{-- 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_header
、header
和 footer
,它们定义了如何配置这三个部分
'menu' => [ 'slim-header' => [], 'header' => [], 'footer' => [], 'footer-bar' => [], ],
slim_header
和 footer_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 items
、headers
或separators
(字符串 '-')数组的项。
[ 'url' => '/home', 'text' => 'Dropdown item', 'dropdown' => [ 'Intestazione', [ 'url' => '/home', 'text' => 'Home', 'target' => '_blank', ], '-', [ 'url' => '/about', 'text' => 'About', ], ],
- 一个
megamenu
是一个将megamenu
键设置为二维数组simple items
、headers
或separators
(字符串 '-')的项。
[ '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', ], ], ] ],
对于上述每一个,使用单个字符串指定菜单标题项以分隔项。使用数组指定菜单项。text
和 url
或 route
是必须的属性。
如果你想要有条件地显示菜单项,请使用 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。有关更多信息,请参阅 此指南。