Laravel Blade-链/嵌入多种布局 [英] Laravel Blade - Chain/Embed multiple layouts

查看:86
本文介绍了Laravel Blade-链/嵌入多种布局的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在我最喜欢的模板框架中,它们通常具有嵌套布局的能力.刀片服务器有可能做到这一点吗?

In my favorite templating frameworks they typically have the ability to nest layouts. Is this something that is possible in Blade?

例如...

<html>
  <head><!-- stuff --></head>
  <body>
    @yield('content')
  </body>
</html>

nav.blade.php

@extend('master')
<nav>
    <!-- nav content -->
</nav>
@yeild('content')

breadcrumb.blade.php

@extend('nav')
<breadcrumb>
    <!-- breadcrumb content -->
</breadcrumb>
@yield('content')

home.blade.php

@extend('nav')
@section('content')
    <home>
        <!-- content -->
    </home>
@endsection

about.blade.php

@extend('breadcrumb')
@section('content')
    <about>
        <!-- content -->
    </about>
@endsection

我喜欢这种格式的原因是,它使选择注射点的方式非常优雅(IMO)!

The reason I love this format is that it makes it extremely elegant (IMO) to be able to choose your injection point!

  • 拥有一个离地页面...参考主站
  • 对于主页...参考导航
  • 对于任何子页面(关于/导航/产品),请参考面包屑

布局级联和'content'在编译后的html沿着树的位置重建.

The layouts cascade and 'content' gets rebuilt with the compiled html as it goes up the tree.

这可能吗?我希望避免在布局中执行@include,因为我个人觉得它们很麻烦并且有点眼痛,尤其是当您遇到经常重复但并非在所有地方(面包屑)重复使用的元素时.

Is this possible? I'm hoping to avoid doing @include in the layouts as I personally find them cumbersome and a bit of an eye sore especially when you get to elements that are repeated often, but not everywhere (breadcrumbs).

基于答案.

'content'将被重建并沿嵌套布局链向上传递.即,如果您有引用nav.blade.php的主页,则将主页内容添加到导航布局并进行编译.然后,由于导航布局引用master.blade.php,因此已编译的布局将传递至master并重新构建.不得重复任何内容.

Ideally 'content' would be rebuilt and passed up the chain of nested layouts. i.e. If you have the homepage which references nav.blade.php the homepage content gets added to the nav layout and compiled. Then since the nav layout references master.blade.php the compiled layout would be passed up to master and built again. No duplicating of any content.

推荐答案

您忘记了使用@parent.这是示例:

You forgot using @parent. Here's the example:

<html>
  <head>
    {{-- Stuff --}}
  </head>
  <body>
    @yield('content')
  </body>
</html>


nav.blade.php

您需要将nav放在section内,以告诉master布局这是内容.如果您不这样做,则nav将位于master布局的顶部(是,位于html之外).


nav.blade.php

You need to put the nav inside section to tell master layout that this is a content. If you don't, nav will be in the top of master layout (yes, outside html).

@extends('master')

@section('content')
  <nav>
    <p>nav content</p>
  </nav>
@endsection


home.blade.php

在此示例中,content部分利用@parent指令将内容附加(而不是覆盖)到布局的侧边栏.呈现视图时,@parent指令将被布局的内容替换.


home.blade.php

In this example, the content section is utilizing the @parent directive to append (rather than overwriting) content to the layout's sidebar. The @parent directive will be replaced by the content of the layout when the view is rendered.

@extends('nav')

@section('content')
  {{-- You can control where @parent should be rendered --}}
  @parent

  <home>
    <p>home content</p>
  </home>

  {{-- You can put your @parent here, give it a try --}}
@endsection

breadcrumb.blade.php

@extends('nav')

@section('content')
  {{-- You can control where @parent should be rendered --}}
  @parent

  <breadcrumb>
    <p>breadcrumb content</p>
  </breadcrumb>

  {{-- You can put your @parent here, give it a try --}}
@endsection

about.blade.php

@extends('breadcrumb')

@section('content')
  {{-- You can control where @parent should be rendered --}}
  @parent

  <about>
    <p>about content</p>
  </about>

  {{-- You can put your @parent here, give it a try --}}
@endsection


已呈现:

home.blade.php


Rendered:

home.blade.php

<html>
<head>
</head>
<body>
  <nav>
    <p>nav content</p>
  </nav>
  <home>
    <p>home content</p>
  </home>
</body>
</html>

about.blade.php

<html>
<head>
</head>
<body>
  <nav>
    <p>nav content</p>
  </nav>
  <breadcrumb>
    <p>breadcrumb content</p>
  </breadcrumb>
  <about>
    <p>about content</p>
  </about>
</body>
</html>

这篇关于Laravel Blade-链/嵌入多种布局的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆