php 六、显示您的视图

六、显示您的视图

在本章中，我们将介绍:

创建和使用基本视图
将数据传递到视图
将视图加载到另一个视图/嵌套视图中
添加资产
使用刀片创建视图
使用细枝模板
利用先进的刀片式服务器
渐进污垢 2
在 Laravel 中创建菜单
与引导程序集成
使用命名视图和视图编辑器

简介

在模型-视图-控制器设置中，我们的视图保存了所有的 HTML 和样式，因此我们可以显示我们的数据。在 Laravel 中，我们的视图可以使用普通的 PHP 文件，也可以使用 Laravel 的 Blade 模板。Laravel 还具有足够的可扩展性，允许我们使用任何可能想要包含的模板引擎。

创建和使用基本视图

在这个食谱中，我们将看到一些基本的视图功能，以及如何在我们的应用中包含视图。

做好准备

对于这个食谱，我们需要一个标准的 Laravel 安装。

怎么做...

按照以下步骤完成配方:

在app/views目录中，创建一个文件夹名myviews。
在新的myviews目录中，创建两个文件:home.php和second.php。
打开home.php并在 HTML 中添加以下代码:

php <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Home Page</title> </head> <body> <h1>Welcome to the Home page!</h1> <p> <a href="second">Go to Second Page</a> </p> </body> </html>
打开second.php文件，在 HTML 中添加如下代码:

php <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Second Page</title> </head> <body> <h1>Welcome to the Second Page</h1> <p> <a href="home">Go to Home Page</a> </p> </body> </html>
在我们的app/routes.php文件中，添加将返回这些视图的路线:

php Route::get('home', function() { return View::make('myviews.home'); }); Route::get('second', function() { return View::make('myviews.second'); });
通过转到http://{your-server}/home(其中your-server是我们的网址)并点击链接来测试视图。

它是如何工作的...

Laravel 中的所有视图都保存在app/views目录中。我们首先创建两个文件来保存我们的 HTML。在这个例子中，我们创建了静态页面，每个视图都有自己完整的 HTML 标记。

在我们的路线文件中，我们然后返回View::make()，视图的名称传入。因为我们的视图位于视图目录的子目录中，所以我们使用点符号。

将数据传递到视图中

在我们的 web 应用中，我们通常需要显示数据库或其他数据存储中的某种数据。在 Laravel 中，我们可以轻松地将这些数据传递到我们的视图中。

做好准备

对于这个配方，我们需要完成创建并使用一个基本视图配方。

怎么做…

要完成本食谱，请遵循以下步骤:

打开routes.php替换我们的家和第二条路线，包括以下数据:

php Route::get('home', function() { $page_title = 'My Home Page Title'; return View::make('myviews.home')->with('title',$page_title); }); Route::get('second', function() { $view = View::make('myviews.second'); $view->my_name = 'John Doe'; $view->my_city = 'Austin'; return $view; });
在view/myviews目录中，打开home.php并用以下代码替换代码:

php <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Home Page : <?= $title ?></title> </head> <body> <h1>Welcome to the Home page!</h1> <h2><?= $title ?></h2> <p> <a href="second">Go to Second Page</a> </p> </body> </html>
在views/myviews 目录下，打开second.php文件，将代码替换为如下代码:

php <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Second Page</title> </head> <body> <h1>Welcome to the Second Page</h1> <p> You are <?= $my_name ?>, from <?= $my_city ?> </p> <p> <a href="home">Go to Home Page</a> </p> </body> </html>
通过转到http://{your-server}/home(其中your-server是我们的网址)然后点击链接来测试视图。

它是如何工作的...

如果我们想让数据进入我们的视图，Laravel 提供了各种方法来实现这一点。我们首先通过将单个变量传递给视图，通过将with()方法链接到View::make()来更新我们的第一条路线。然后，在视图文件中，我们可以使用我们选择的任何名称来访问变量。

在下一条路线中，我们将View::make()分配给一个变量，然后将值分配为对象的属性。然后，我们可以在视图中将这些属性作为变量来访问。为了显示视图，我们只需返回对象变量。

还有更多...

向视图添加数据的另一种方法类似于第二条路线中的方法；然而，我们使用数组代替对象。因此，我们的代码看起来类似于以下内容:

$view = View::make('myviews.second');
$view['my_name'] = 'John Doe';
$view['my_city'] = 'Austin';
return $view;

将一个视图加载到另一个视图/嵌套视图中

很多时候，我们的网页会有类似的布局和 HTML 结构。为了帮助分离重复的 HTML，我们可以在 Laravel 中使用 嵌套视图。

做好准备

对于这个配方，我们需要完成创建并使用一个基本视图配方。

怎么做...

要完成此配方，请遵循以下步骤:

在app/view目录下，添加一个名为common的新文件夹。
在common目录下，创建一个名为header.php的文件，并添加以下代码:

php <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My Website</title> </head> <body>
在common目录下，创建一个名为footer.php的文件，并添加以下代码:

php <footer>© 2013 MyCompany</footer> </body> </html>
在common目录中，创建一个名为userinfo.php的文件，并在其中添加以下代码:

php <p>You are <?= $my_name ?>, from <?= $my_city ?></p>
在routes.php文件中，更新主路径和第二路径，以包括以下嵌套视图:

php Route::get('home', function() { return View::make('myviews.home') ->nest('header', 'common.header') ->nest('footer', 'common.footer'); }); Route::get('second', function() { $view = View::make('myviews.second'); $view->nest('header', 'common.header')->nest('footer','common.footer'); $view->nest('userinfo', 'common.userinfo', array('my_name' => 'John Doe', 'my_city' => 'Austin')); return $view; });
在views/myviews目录下，打开home.php文件，并添加以下代码:

php <?= $header ?> <h1>Welcome to the Home page!</h1> <p> <a href="second">Go to Second Page</a> </p> <?= $footer ?>
在views/myviews目录下，打开second.php文件，并添加以下代码:

php <?= $header ?> <h1>Welcome to the Second Page</h1> <?= $userinfo ?> <p> <a href="home">Go to Home Page</a> </p> <?= $footer ?>
通过转到http://{your-server}/home(其中your-server是我们的网址)然后点击链接来测试视图。

它是如何工作的...

为了开始，我们需要从视图中分离出页眉和页脚代码。由于这些在的每一页上都是一样的，我们在views文件夹中创建了一个子目录来存放我们的常用文件。第一个文件是我们的头文件，它将保存所有内容直到<body>标签。我们的第二个文件是我们的页脚，它将保存我们页面底部的 HTML。

我们的第三个文件是userinfo视图。通常情况下，如果我们有用户帐户和个人资料，我们可能希望在侧边栏或标题中包含用户的数据。为了将视图的这一部分分开，我们创建了带有一些数据的userinfo视图。

对于我们的家庭路线，我们将使用我们的家庭视图，并在页眉和页脚嵌套。nest()方法中的第一个参数是我们将在主视图中使用的名称，第二个参数是视图的位置。对于这个例子，我们的视图在公共子目录中，所以我们使用点符号来引用它们。

在我们的主视图中，为了显示嵌套视图，我们打印出我们在路径中使用的变量名。

对于我们的第二条路线，我们也嵌套在页眉和页脚中，但是我们也想在userinfo视图中添加。为此，我们向nest()方法传递第三个参数，它是我们想要发送给视图的数据数组。然后，在我们的主视图中，当我们打印出userinfo视图时，它会自动包含变量。

另见

将数据传递到视图配方中

增加资产

一个动态的网站几乎需要使用 CSS 和 JavaScript。使用 Laravel 资产包提供了一种简单的方法来管理这些资产，并将它们包含在我们的视图中。

做好准备

对于这个配方，我们需要使用在中创建的代码，将一个视图加载到另一个视图/嵌套视图配方中。

怎么做...

要完成此配方，请遵循以下步骤:

打开composer.json文件，将asset包添加到require部分，如下图所示:

php "require": { "laravel/framework": "4.0.*", "teepluss/asset": "dev-master" },
在命令行中，运行 composer update 下载包，如下所示:

```php php composer.phar update

```
打开app/config/app.php文件，将ServiceProvider添加到提供者数组的末尾，如下所示:

php 'Teepluss\Asset\AssetServiceProvider',
在同一个文件中，在aliases数组中，添加包的别名如下:

php 'Asset' => 'Teepluss\Asset\Facades\Asset'
在app/filters.php文件中，为我们的资产添加一个自定义过滤器，如下所示:

```php Route::filter('assets', function() { Asset::add('jqueryui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js', 'jquery'); Asset::add('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'); Asset::add('bootstrap', 'http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css'); });

Update the home and second routes to use the filter Route::get('home', array('before' => 'assets', function() { return View::make('myviews.home') ->nest('header', 'common.header') ->nest('footer', 'common.footer'); })); Route::get('second', array('before' => 'assets', function() { $view = View::make('myviews.second'); $view->nest('header', 'common.header')->nest('footer', 'common.footer'); $view->nest('userinfo', 'common.userinfo', array('my_name' => 'John Doe', 'my_city' => 'Austin')); return $view; })); ```
在views/common目录中，打开header.php，使用如下代码:

php <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My Website</title> <?= Asset::styles() ?> </head> <body>
在views/common目录中，打开footer.php并使用以下代码:

php <footer>© 2013 MyCompany</footer> <?= Asset::scripts() ?> </body> </html>
通过转到http://{your-server}/home(其中your-server是我们的网址)，点击链接，查看页面来源，查看包含的资产，来测试视图。

它是如何工作的...

asset包使得在我们的 HTML 中添加 CSS 和 JavaScript 文件变得非常容易。首先，我们需要向路线“注册”每一项资产。为了让事情简单一点，我们将在路由之前调用的过滤器中添加资产。这样，我们只需将代码放在一个地方，进行更改就很容易了。出于我们的目的，我们将使用来自 CDN 源的 jQuery、jQueryUI 和 bootstrap CSS。

add()方法的第一个参数是我们给资产取的名字。第二个参数是资产的 URL 它可以是相对路径，也可以是完整的网址。第三个可选参数是资产的依赖性。在我们的示例中，jQueryUI 要求已经加载了 jQuery，因此我们在第三个参数中传入了 jQuery 资产的名称。

然后，我们更新路线以添加过滤器。如果我们在过滤器中添加或删除任何资产，它将自动反映在我们的每条路线中。

因为我们使用嵌套视图，我们只需要将资产添加到页眉和页脚视图中。我们的 CSS 文件由styles()方法调用，JavaScript 由 scripts()方法调用。Laravel 检查资产的文件扩展名，并自动将它们放在正确的位置。如果我们查看源代码，我们会注意到 Laravel 还确保在 jQueryUI 之前添加了 jQuery 脚本，因为我们将其设置为依赖项。

另见

在路线上使用过滤器的方法在第 5 章、中为 URL 和 API 使用控制器和路线的**

使用刀片创建视图

PHP 有许多可用的模板库，Laravel 的 Blade 是最好的之一。该方法将展示一种易于扩展的方式，使用刀片模板快速启动和运行。

做好准备

对于这个食谱，我们需要一个标准的 Laravel 安装。

怎么做...

要完成此配方，请遵循以下步骤:

在routes.php文件中，为我们的页面创建新的路线，如下所示:

php Route::get('blade-home', function() { return View::make('blade.home'); }); Route::get('blade-second', function() { return View::make('blade.second'); });
在views目录下，新建一个名为layout的文件夹。
在views/layout目录下，创建一个名为index.blade.php的文件，并添加以下代码:

php <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My Site</title> </head> <body> <h1> @section('page_title') Welcome to @show </h1> @yield('content') </body> </html>
在views 目录中，创建一个名为blade的文件夹。
在views/blade目录下，创建一个名为home.blade.php的文件，并添加以下代码:

```php @extends('layout.index')

@section('page_title') @parent Our Blade Home @endsection

@section('content')
Go to {{ HTML::link('blade-second', 'the Second Page.') }}
@endsection ```
在views/blade目录下，创建一个名为second.blade.php的文件，并添加以下代码:

```php @extends('layout.index')

@section('page_title') @parent Our Second Blade Page @endsection

@section('content')
Go to {{ HTML::link('blade-home', 'the Home Page.')}}
@endsection ```
通过转到http://{your-server}/blade-home(其中your-server是我们的网址)然后点击链接，查看页面的来源以查看包含的刀片布局来测试视图。

它是如何工作的...

首先，我们创建两条简单的路线来返回我们的刀锋视图。通过使用点符号，我们可以看到我们将把文件放在views文件夹的blade子目录中。

我们的下一步是创建刀片布局视图。这将是我们页面的骨架，并将放在我们views文件夹的布局子目录中，并且它必须有blade.php作为文件扩展名。这个视图是简单的 HTML，只有两个例外:@section()和@yield()区域。这些内容将在我们的视图中被替换或添加。

在我们的路线视图中，我们从声明使用哪个刀片布局开始文件，对于我们的情况是@extends('layout.index')。然后我们可以添加和修改我们在布局中声明的内容部分。对于page_title部分，我们想要在布局中显示文本，但是我们想要在末尾添加一些额外的文本。为此，我们称@parent为内容区的第一件事，然后放入我们自己的任何内容。

在@section('content')中，布局中没有默认文本，所以所有内容都将被添加。使用 Blade，我们还可以使用{{ }}大括号打印出任何我们需要的 PHP。在我们的例子中，我们使用拉弗尔的HTML::link()来显示一个链接。现在，当我们转到页面时，所有内容区域都放在布局中的正确位置。

使用小枝模板

Laravel 的 Blade 模板可能很好，但有时我们需要另一个 PHP 模板库。一个流行的是小树枝。这个食谱将展示如何将 Twig 模板合并到我们的 Laravel 应用中。

做好准备

对于这个食谱，我们只需要一个标准的 Laravel 安装。

怎么做…

按照以下步骤完成本食谱:

打开composer.json文件，在require部分添加以下行:

php "rcrowe/twigbridge": "0.4.*"
在命令行中，更新 composer 以安装软件包:

```php php composer.phar update

```
打开app/config/app.php文件，在providers数组中，在末尾添加 Twig ServiceProvider，如下所示:

php 'TwigBridge\TwigServiceProvider'
在命令行中，运行以下命令来创建我们的配置文件:

```php php artisan config:publish rcrowe/twigbridge

```
在routes.php中，创建如下路线:

```php Route::get('twigview', function() { $link = HTML::link('http://laravel.com', 'the Laravel site.'); return View::make('twig')->with('link', $link); });

```
在views目录下，创建一个名为twiglayout.twig的文件，并添加以下代码:

php <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My Site</title> </head> <body> <h1> {% block page_title %} Welcome to {% endblock %} </h1> {% block content %}{% endblock %} </body> </html>
在views目录下，创建一个名为twig.twig的文件，并添加以下代码:

```php

{% block page_title %} {{ parent() }} My Twig Page

{% block content %}
Go to {{ link|raw }}
{% endblock %} ```
通过转到http://your-server/twigview(其中your-server是我们的网址)测试视图，并查看页面的来源以查看包含的树枝布局。

它是如何工作的...

首先，我们将把 TwigBranch包安装到我们的应用中。该软件包还安装了Twig库。软件包安装后，我们使用artisan创建其配置文件，并添加其服务提供商。

在我们的路线中，我们将使用与 Laravel 的内置视图库相同的语法，并调用 view。我们还创建了一个简单的链接，将其保存到一个变量中，并将该变量传递到视图中。

接下来，我们创建布局。所有的 Twig 视图文件都必须有.twig扩展名，所以我们的布局被命名为twiglayout.twig。布局内部是一个标准的 HTML 框架，但是我们添加了两个 Twig 内容块。page_title区块有一些默认内容，而content区块是空的。

对于路线视图，我们从扩展布局视图开始。对于我们的page_title块，我们首先使用{{ parent()}}打印出默认值，然后添加我们自己的内容。然后我们的内容块被添加，并将显示我们作为变量传入的链接。使用 Twig，我们的变量不需要使用$，如果传入 HTML，Twig 会自动转义。所以在我们看来，既然我们想要显示链接，我们就需要确保添加 raw 参数。

现在，如果我们在浏览器中转到我们的页面，我们将在正确的位置看到我们所有的内容。

利用先进的刀片式服务器

使用 Laravel 的 Blade 模板系统，我们可以使用一些强大的功能，使我们的开发变得更快。对于这个食谱，我们将传递一些数据到我们的刀片视图，并循环通过它，以及一些条件。

做好准备

对于这个配方，我们需要在中创建的代码，使用 Blade 配方创建一个视图。

怎么做...

按照以下步骤完成该配方:

打开routes.php文件，更新blade-home和blade-second路线如下:

php Route::get('blade-home', function() { $movies = array( array('name' => 'Star Wars', 'year' => '1977', 'slug'=> 'star-wars'), array('name' => 'The Matrix', 'year' => '1999', 'slug' => 'matrix'), array('name' => 'Die Hard', 'year' => '1988', 'slug'=> 'die-hard'), array('name' => 'Clerks', 'year' => '1994', 'slug' => 'clerks') ); return View::make('blade.home')->with('movies', $movies); }); Route::get('blade-second/(:any)', function($slug) { $movies = array( 'star-wars' => array('name' => 'Star Wars', 'year' => '1977', 'genre' => 'Sci-Fi'), 'matrix' => array('name' => 'The Matrix', 'year' => '1999', 'genre' => 'Sci-Fi'), 'die-hard' => array('name' => 'Die Hard', 'year' => '1988', 'genre' => 'Action'), 'clerks' => array('name' => 'Clerks', 'year' => '1994', 'genre' => 'Comedy') ); return View::make('blade.second')->with('movie', $movies[$slug]); });
在views/blade 目录下，用以下代码更新home.blade.php文件:

```php @extends('layout.index')

@section('page_title') @parent Our List of Movies @endsection

@section('content')
- {{ HTML::link('blade-second/' . $movie['slug'],$movie['name']) }} ( {{ $movie['year'] }} )
@endsection ```
在views/blade目录下，用以下代码更新second.blade.php文件:

```php @extends('layout.index')

@section('page_title') @parent Our {{ $movie['name'] }} Page @endsection

@section('content') @include('blade.info')
Go to {{ HTML::link('blade-home', 'the Home Page.') }}
@endsection ```
在views/blade目录中，创建一个名为info.blade.php的新文件，并在其中添加以下代码:

php <h1>{{ $movie['name'] }}</h1> <p>Year: {{ $movie['year'] }}</p> <p>Genre: {{ $movie['genre'] }}</p>
进入http://{your-server}/blade-home(其中your-server是我们的网址)测试视图，点击链接查看视图工作情况。

它是如何工作的...

对于这个配方，我们将传递一些数据到我们的刀片视图，循环遍历它，并添加一些条件。通常情况下，我们会将它与数据库中的结果一起使用，但是出于我们的目的，我们将在我们的路线中创建一个简单的数据数组。

我们的第一条路线包含一系列电影，有它们的年份和一个我们可以用作网址的鼻涕虫。我们的第二条路线将创建一个以蛞蝓为关键字的数组，并接受 URL 中的蛞蝓。然后，我们通过调用以鼻涕虫为键的电影，将单个电影的细节传递到视图中。

在我们的第一个视图中，我们创建了一个@foreach循环，来遍历数组中的数据。我们还包括了一个简单的@if语句，用于检查特定的电影，然后打印出一些额外的信息。当我们循环通过时，我们显示第二条路线的链接，并添加了 slug。

第二个视图显示电影的名称，但所有视图都包括另一个 Blade 视图，方法是在内容块中使用@include()。这样，所有数据也可以在包含视图中获得；因此，对于我们的info视图，我们可以只使用我们在路线中设置的相同变量。

创建内容本地化

如果我们的应用将被不同国家的人使用，或者说不同语言的人使用，我们需要对内容进行本地化。Laravel 提供了一种简单的方法来做到这一点。

做好准备

对于这个食谱，我们只需要一个标准安装的 Laravel。

怎么做...

对于此配方，请遵循以下步骤:

在app/lang目录中，添加三个新目录(如果还没有的话):en、es和de。
在en目录下，创建一个名为localized.php的文件，并添加以下代码:

```php <?php

return array( 'greeting' => 'Good morning :name', 'meetyou' => 'Nice to meet you!', 'goodbye' => 'Goodbye, see you tomorrow.', ); ```
在es目录下，创建一个名为localized.php的文件，并添加以下代码:

```php <?php

return array( 'greeting' => 'Buenos días :name', 'meetyou' => 'Mucho gusto!', 'goodbye' => 'Adiós, hasta mañana.', ); ```
在de目录下，创建一个名为localized.php的文件，并添加以下代码:

```php <?php

return array( 'greeting' => 'Guten morgen :name', 'meetyou' => 'Es freut mich!', 'goodbye' => 'Tag. Bis bald.', ); ```
在我们的routes.php文件中，创建如下四条路线:

php Route::get('choose', function() { return View::make('language.choose'); }); Route::post('choose', function() { Session::put('lang', Input::get('language')); return Redirect::to('localized'); }); Route::get('localized', function() { $lang = Session::get('lang', function() { return 'en';}); App::setLocale($lang); return View::make('language.localized'); }); Route::get('localized-german', function() { App::setLocale('de'); return View::make('language.localized-german'); });
在views 目录中，创建一个名为language的文件夹。
在views/language中，创建文件choose.php并添加以下代码:

php <h2>Choose a Language:</h2> <?= Form::open() ?> <?= Form::select('language', array('en' => 'English', 'es' => 'Spanish')) ?> <?= Form::submit() ?> <?= Form::close() ?>
在views/language目录下，创建一个名为localized.php的文件，并添加以下代码:

php <h2> <?= Lang::get('localized.greeting', array('name' => 'Lindsay Weir')) ?> </h2> <p> <?= Lang::get('localized.meetyou') ?> </p> <p> <?= Lang::get('localized.goodbye') ?> </p> <p> <?= HTML::link('localized-german', 'Page 2') ?> </p>
在views/language目录下，创建一个名为localized-german.php的文件，并添加以下代码:

php <h2> <?= Lang::get('localized.greeting', array('name' =>'Lindsay Weir')) ?> </h2> <p> <?= Lang::get('localized.meetyou') ?> </p> <p> <?= Lang::get('localized.goodbye') ?> </p>
在浏览器中，转到http://{your-server}/choose(其中your-server是我们的 URL)，提交表单，测试本地化。

它是如何工作的...

对于这个食谱，我们从在app/lang目录中设置我们的语言目录开始。我们将使用en作为我们的英语文件，es作为我们的西班牙语文件，de作为我们的德语文件。在每个目录中，我们使用完全相同的名称创建一个文件，并使用完全相同的键添加一个数组。

我们的第一个途径是语言选择器页面。在这一页，我们可以选择英语或西班牙语。当我们提交时，它将POST到路线，创建一个新的会话，添加选择，并重定向到页面以显示所选语言的文本。

我们的本地化路线采用会话，并将选择传递给App::setLocale()。如果没有设置会话，我们还有一个英语默认值。

在我们的本地化视图中，我们使用Lang::get()打印文本。在我们的语言文件的第一行中，我们还包含了:name占位符，所以我们可以在调用语言文件时传入一个以占位符名称为关键字的数组。

我们的最后一条路由展示了如何在路由中静态设置语言默认值。

在 Laravel 中创建菜单

菜单是大多数网站的一个常见方面。在这个食谱中，我们将使用 Laravel 的嵌套视图创建菜单，并根据我们所在的页面更改菜单项的默认“状态”。

做好准备

对于这个菜单，我们需要一个标准安装的 Laravel。

怎么做...

我们需要遵循以下步骤来完成配方:

在routes.php文件中，创建如下三条路线:

php Route::get('menu-one', function() { return View::make('menu-layout') ->nest('menu', 'menu-menu') ->nest('content', 'menu-one'); }); Route::get('menu-two', function() { return View::make('menu-layout') ->nest('menu', 'menu-menu') ->nest('content', 'menu-two'); }); Route::get('menu-three', function() { return View::make('menu-layout') ->nest('menu', 'menu-menu') ->nest('content', 'menu-three'); });
在视图目录中，创建一个名为 menu-layout.php 的文件，并向其中添加以下代码:

php <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Menu Example</title> <style> #container { width: 1024px; margin: 0 auto; border-left: 2px solid #ddd; border-right: 2px solid #ddd; padding: 20px; } #menu { padding: 0 } #menu li { display: inline-block; border: 1px solid #ddf; border-radius: 6px; margin-right: 12px; padding: 4px 12px; } #menu li a { text-decoration: none; color: #069; } #menu li a:hover { text-decoration: underline} #menu li.active { background: #069 } #menu li.active a { color: #fff } </style> </head> <body> <div id="container"> <?= $menu ?> <?= $content ?> </div> </body> </html>
在views目录下，创建一个名为menu-menu.php的文件，并添加以下代码:

php <ul id="menu"> <li class="<?= Request::segment(1) == 'menu-one' ?'active' : '' ?>"> <?= HTML::link('menu-one', 'Page One') ?> </li> <li class="<?= Request::segment(1) == 'menu-two' ? 'active' : '' ?>"> <?= HTML::link('menu-two', 'Page Two') ?> </li> <li class="<?= Request::segment(1) == 'menu-three' ?'active' : '' ?>"> <?= HTML::link('menu-three', 'Page Three') ?> </li> </ul>
在views目录中，创建三个名为menu-one.php、menu-two.php和menu-three.php的视图文件。
对于menu-one.php，使用以下代码:

php <h2>Page One</h2> <p> Lorem ipsum dolor sit amet. </p>
对于menu-two.php，使用以下代码:

php <h2>Page Two</h2> <p> Suspendisse eu porta turpis </p>
对于menu-three.php，使用以下代码:

php <h2>Page Three</h2> <p> Nullam varius ultrices varius. </p>
在浏览器中，转到http://{your-server}/menu-one(其中your-server是我们的网址)，点击菜单链接。

它是如何工作的...

我们从制作三条路线来保持我们的三页开始。每条路线将使用单一布局视图，并嵌套在特定于路线的菜单视图和内容视图中。

我们的布局视图是一个带有一些页面 CSS 的基本 HTML 框架。由于我们想要突出显示当前页面的菜单项，其中一个类选择器被命名为active，并将被添加到我们的菜单列表项中。

接下来，我们创建菜单视图。我们使用的是无序列表，每个页面都有链接。为了将active类添加到我们当前的页面项目中，我们使用 Laravel 的Request::segment(1)来获取我们所在的路线。如果与列表项相同，我们添加active类，否则留空。然后我们使用 Laravel 的HTML::link()来添加我们页面的链接。

其他三个视图只是非常简单的内容，有一个标题和几个字。现在，当我们转到浏览器中的页面时，我们会看到我们所在页面的菜单项被突出显示，而其他则没有。如果我们点击一个链接，该项目将被突出显示，而其他项目不会。

与自举集成

Bootstrap CSS 框架最近非常流行。这个食谱将展示我们如何使用 Laravel 框架。

做好准备

对于这个食谱，我们需要一个标准的 Laravel 安装。我们还需要安装assets包，如添加资产配方所示。或者，我们可以下载引导文件并保存在本地。

怎么做...

要完成此配方，请遵循以下步骤:

在routes.php文件中，创建一条新路线，如下所示:

php Route::any('boot', function() { Asset::add('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'); Asset::add('bootstrap-js', 'http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js', 'jquery'); Asset::add('bootstrap-css', 'http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css'); $superheroes = array('Batman', 'Superman', 'Wolverine','Deadpool', 'Iron Man'); return View::make('boot')->with('superheroes',$superheroes); });
在views目录下，创建一个名为boot.php的文件，并添加以下代码:

```php <!doctype html>
My Bootstrap Page <?= Asset::styles() ?>
Using Bootstrap with Laravel
- Welcome
- About Us
- Contact
Welcome to our site

Here's a list of Superheroes:
- <?= $hero ?>
About Us

Cras at dui eros. Ut imperdiet pellentesque mi faucibus dapibus.Phasellus vitae lacus at massa viverra condimentum quis quis augue. Etiam pharetra erat id sem pretium egestas. Suspendisse mollis, dolor a sagittis hendrerit, urna velit commodo dui, id adipiscing magna magna ac ligula. Nunc in ligula nunc.
Contact Form
<?= Form::open('boot', 'POST') ?> <?= Form::label('name', 'Your Name') ?> <?= Form::text('name') ?> <?= Form::label('email', 'Your Email') ?> <?= Form::text('email') ?>
<?= Form::button('Send', array('class' =>'btn btn-primary')) ?>
```
            <?= Form::close() ?>
      </div>
   </div>
</div>
<?= Asset::scripts() ?>
```
```
在浏览器中，转到http://your-server/boot(其中your-server是我们的网址)并点击选项卡。

它是如何工作的...

对于这个食谱，我们将创建一个单一的路线，并使用引导标签切换的内容。为了让我们的路由响应任何请求，我们使用Route::any() 并传递我们的闭包。为了添加 CSS 和 JavaScript，我们可以使用一个过滤器，就像添加资产配方中的过滤器一样；然而，对于一个单一的路线，我们将只包括它在关闭。所以我们不必下载它们，我们将只使用引导和 jQuery 的 CDN 版本。

接下来，我们需要一些数据。这将是一个连接数据库的好地方，但是为了我们的目的，我们将使用一个简单的数组，带有一些超级英雄的名字。然后我们将该数组传递到我们的视图中。

我们以一个 HTML 框架开始视图，并在头部和结束</body>标签之前的脚本中包含我们的样式。在页面顶部，我们使用 Bootstrap 的导航样式和数据属性来创建选项卡链接。然后在我们的身体中，我们使用三个不同的标签窗格，其标识对应于我们菜单中的<a href>标签。

当我们查看页面时，我们会看到第一个窗格显示出来，其他的都隐藏起来了。通过单击其他选项卡，我们可以切换显示哪个选项卡窗格。

另见

添加资产配方

使用命名视图和视图作曲者

这个食谱将展示如何使用 Laravel 的命名视图和视图作曲家来简化我们的一些路线的代码。

做好准备

对于这个食谱，我们将使用在中创建的代码在 Laravel 食谱中创建菜单。我们还需要在添加资产配方中安装包。

怎么做...

要完成此配方，请遵循以下步骤:

在routes.php文件中，添加一个名为view的文件，并添加以下代码:

php View::name('menu-layout', 'layout');
在routes.php中，添加如下视图编辑器:

php View::composer('menu-layout', function($view) { Asset::add('bootstrap-css', 'http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css'); $view->nest('menu', 'menu-menu'); $view->with('page_title', 'View Composer Title'); });
在routes.php中，更新菜单路线如下:

php Route::get('menu-one', function() { return View::of('layout')->nest('content', 'menu-one'); }); Route::get('menu-two', function() { return View::of('layout')->nest('content', 'menu-two'); }); Route::get('menu-three', function() { return View::of('layout')->nest('content', 'menu-three'); });
在views目录下，用以下代码更新menu-layout.php文件:

php <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title><?= $page_title ?></title> <?= Asset::styles() ?> <style> #container { width: 1024px; margin: 0 auto; border-left: 2px solid #ddd; border-right: 2px solid #ddd; padding: 20px; } #menu { padding: 0 } #menu li { display: inline-block; border: 1px solid #ddf; border-radius: 6px; margin-right: 12px; padding: 4px 12px; } #menu li a { text-decoration: none; color: #069; } #menu li a:hover { text-decoration: underline } #menu li.active { background: #069 } #menu li.active a { color: #fff } </style> </head> <body> <div id="container"> <?= $menu ?> <?= $content ?> </div> </body> </html>
在浏览器中，转到http://{your-server}/menu-one(其中your-server是我们的网址)，点击菜单链接。

它是如何工作的...

我们从为我们的一个视图创建一个名称开始食谱。如果我们的视图有很长或复杂的文件名或目录结构，这将允许我们在路线中创建一个简单的别名。它也将让我们在未来改变我们的视图文件名；此外，如果我们在多个地方使用它，我们只需要更改一行。

接下来，我们创建一个视图编辑器。创建视图时，会自动调用 composer 中的任何代码。在我们的示例中，每次创建视图时，我们都会包含三件事:一个包含 Bootstrap CSS 文件的资产、一个嵌套视图和一个传递给视图的变量。

对于我们的三条路线而不是View::make('menu-layout')的，我们将使用我们创建的名称，称为View::of('layout')，并将其嵌套在我们的内容中。由于我们的布局视图有一个编辑器，它将自动嵌套在我们的菜单中，添加 CSS，并传递一个页面标题。

另见

在 Laravel 食谱中创建菜单

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://moonapi.com/news/5673.html

数据知识

系统公告

开发文档

php查看更多书籍

《Laravel 应用开发秘籍》

php 六、显示您的视图

六、显示您的视图

简介

创建和使用基本视图

做好准备

怎么做...

它是如何工作的...

将数据传递到视图中

做好准备

怎么做…

它是如何工作的...

还有更多...

将一个视图加载到另一个视图/嵌套视图中

做好准备

怎么做...

它是如何工作的...

另见

增加资产

做好准备

怎么做...

它是如何工作的...

另见

使用刀片创建视图

做好准备

怎么做...

它是如何工作的...

使用小枝模板

做好准备

怎么做…

它是如何工作的...

利用先进的刀片式服务器

做好准备

怎么做...

它是如何工作的...

创建内容本地化

做好准备

怎么做...

它是如何工作的...

在 Laravel 中创建菜单

做好准备

怎么做...

它是如何工作的...

与自举集成

做好准备

怎么做...

Using Bootstrap with Laravel

Welcome to our site

About Us

Contact Form

它是如何工作的...

另见

使用命名视图和视图作曲者

做好准备

怎么做...

它是如何工作的...

另见

留言

联系客服

php 查看更多书籍