交换刀片和计算刀片的区别_使用刀片的简单Laravel布局-CSDN博客

交换刀片和计算刀片的区别

A simple and easy way to use the Blade templating engine to get a fully ready layout system.

一种使用Blade模板引擎来获得完整的布局系统的简单方法。

We will create a few site pages (home, about, projects, contact). Here is a table of the pages that we will use and the layouts that they will use.

我们将创建一些站点页面（主页，关于，项目，联系方式）。这是我们将使用的页面及其布局的表格。

Page	Layout
Home	Full Width
About	Sidebar
Projects	Sidebar
Contact	Full Width

页	布局
家	全屏宽度
关于	侧边栏
专案	侧边栏
联系	全屏宽度

路由 (Routing)

To get our pages to work, we're going to setup a simple route to get our home page.

为了使我们的页面正常工作，我们将设置一条简单的路线来获取我们的主页。

Route::get('/', function()
{
    return View::make('pages.home');
});
Route::get('about', function()
{
    return View::make('pages.about');
});
Route::get('projects', function()
{
    return View::make('pages.projects');
});
Route::get('contact', function()
{
    return View::make('pages.contact');
});

Since we're only touching on layouts in Blade, we won't need to do anything but load a view. We don't need to mess with controllers or any other fancy things. If you want more information on that, check out our Laravel tutorials session.

由于我们仅涉及Blade中的布局，因此除了加载视图外，我们无需执行任何操作。我们不需要弄乱控制器或其他任何花哨的东西。如果您想了解更多信息，请查看我们的Laravel教程课程。

Now that we have our routes setup, we will start our work with the home page. Open up app/views/pages/home.blade.php. Inside of that file, we will pull together a layout file, a page file, and includes. By using the same layout files for multiple pages, we don't have to repeat ourselves when writing our pages in our kksites.

现在我们已经设置了路线，我们将从首页开始我们的工作。打开app/views/pages/home.blade.php 。在该文件的内部，我们将把布局文件，页面文件和包含文件放在一起。通过对多个页面使用相同的布局文件，在kksite中编写页面时，我们不必重复自己。

观看次数 (Views)

文件结构 (The File Structure)

Let's create the files necessary for creating a whole templating system. Here are the folders and files. Go ahead and create them.

让我们创建创建整个模板系统所需的文件。这是文件夹和文件。继续创建它们。

- app
-- views
--- layouts
------- default.blade.php
------- sidebar.blade.php
--- pages
------- home.blade.php
------- about.blade.php
------- projects.blade.php
------- contact.blade.php
--- includes
------- head.blade.php
------- header.blade.php
------- footer.blade.php
------- sidebar.blade.php

包括 (Includes)

We will use the head, header, and footer includes so that we don't have to rewrite that code. Let's get those out of the way real quick.

我们将使用head，header和footer包含，以便我们不必重写该代码。让我们快速解决这些问题。

head.blade.php (head.blade.php)

<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="Scotch">

<title>Super Cool Layouts</title>

<!-- load bootstrap from a cdn -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/3.0.3/css/bootstrap-combined.min.css">

header.blade.php (header.blade.php)

<div class="navbar">
    <div class="navbar-inner">
        <a id="logo" href="/">Single Malt</a>
        <ul class="nav">
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/projects">Projects</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
    </div>
</div>

footer.blade.php (footer.blade.php)

<div id="copyright text-right">© Copyright 2013 Scotchy Scotch Scotch</div>

默认布局和页面（主页，联系人） (Default Layout and Pages (Home, Contact))

With our includes ready, let's make our first layout.

准备好包含文件后，让我们进行第一个布局。

We will be using @include to bring in slices and @yield to bring in content from the individual pages we will be using.

我们将使用@include引入切片，并使用@yield引入将要使用的各个页面的内容。

<!doctype html>
<html>
<head>
    @include('includes.head')
</head>
<body>
<div class="container">

    <header class="row">
        @include('includes.header')
    </header>

    <div id="main" class="row">

            @yield('content')

    </div>

    <footer class="row">
        @include('includes.footer')
    </footer>

</div>
</body>
</html>

主页和联系页面 (Home Page and Contact Page)

We won't dive too far into the actual content of each page. The home page and contact pages will use the same layouts/default.blade.php. We won't have to reuse the code in the layout or the includes now!

我们不会深入探讨每个页面的实际内容。主页和联系页面将使用相同的layouts/default.blade.php 。我们现在不必再使用布局或包含中的代码！

Blade lets us use the layout that we just created by using @extends. By creating @section, we create a section that will be used in the layout. Here we use @section('content') and in our layout, all that we type here will be injected in @yield in the layout.

Blade让我们使用通过@extends创建的布局。通过创建@section ，我们创建了一个将在布局中使用的部分。在这里，我们使用@section('content') ，在布局中，我们在此处键入的所有@section('content')都将注入布局中的@yield中。

pages / home.blade.php (pages/home.blade.php)

@extends('layouts.default')
@section('content')
    i am the home page
@stop

pages / contact.blade.php (pages/contact.blade.php)

@extends('layouts.default')
@section('content')
    i am the contact page
@stop

侧边栏布局和页面 (Sidebar Layout and Pages)

With our default layout and those pages out of the way, we can make our sidebar include, sidebar layout, and pages.

使用我们的默认布局和那些页面，我们可以使侧边栏包括，侧边栏布局和页面。

补充工具栏包含include / sidebar.blade.php (Sidebar Include includes/sidebar.blade.php)

<!-- sidebar nav -->
    <nav id="sidebar-nav">
        <ul class="nav nav-pills nav-stacked">
            <li><a href="#">Fly to the Moon</a></li>
            <li><a href="#">Dig to China</a></li>
            <li><a href="#">Swim Across the Sea</a></li>
        </ul>
    </nav>

侧边栏布局layouts / sidebar.blade.php (Sidebar Layout layouts/sidebar.blade.php)

The difference between this layout and the default layout is the sidebar. We add that to the main section with the help of Twitter Bootstrap classes. Now we have a sidebar on the left and our content on the right. We can adjust this however we want to create any size sidebar either on the left or the right.

此布局与默认布局之间的区别是侧边栏。我们借助Twitter Bootstrap类将其添加到主要部分。现在，左侧有一个侧边栏，右侧有我们的内容。我们可以对此进行调整，但是我们想在左侧或右侧创建任何尺寸的侧边栏。

<!doctype html>
<html>
<head>
    @include('includes.head')
</head>
<body>
<div class="container">

    <header class="row">
        @include('includes.header')
    </header>

    <div id="main" class="row">

        <!-- sidebar content -->
        <div id="sidebar" class="col-md-4">
            @include('includes.sidebar')
        </div>

        <!-- main content -->
        <div id="content" class="col-md-8">
            @yield('content')
        </div>

    </div>

    <footer class="row">
        @include('includes.footer')
    </footer>

</div>
</body>
</html>

关于和项目页面 (About and Projects Pages)

Like the home and contact pages, we won't dive into the content. Just a simple use of the layout and adding content.

像主页和联系页面一样，我们不会深入研究内容。只是简单地使用布局和添加内容。

pages / about.blade.php (pages/about.blade.php)

@extends('layouts.sidebar')
@section('content')
    i am the about page
@stop

pages / projects.blade.php (pages/projects.blade.php)

@extends('layouts.sidebar')
@section('content')
    i am the projects page
@stop

结论 (Conclusion)

Now we can create a simple foundation for the front-end views for our site. Layouts, slices, and pages all work together to create an easy templating system. There is much more that Laravel Blade Templating and I encourage you to take a look at what else we can do.

现在，我们可以为我们的网站的前端视图创建一个简单的基础。布局，切片和页面一起工作以创建一个简单的模板系统。 Laravel Blade Templating还有更多功能，我鼓励您看看我们还能做些什么。

Check out our other Laravel tutorials in our Laravel series for more tutorials on our favorite PHP framework.

查看我们的Laravel系列中的其他Laravel教程，以获取有关我们最喜欢PHP框架的更多教程。

Thanks for reading and let us know if you have any questions or comments or what you'd like us to write about in the comments.

感谢您的阅读，如果您有任何疑问或意见，或者您希望我们在评论中写些什么，请告诉我们。