Laravel 刀片模板 - 标记顺序混乱答案

【问题标题】：Laravel blade templating - order of markup is messed upLaravel 刀片模板 - 标记顺序混乱
【发布时间】：2012-12-26 08:41:13
【问题描述】：

我目前正在开发一个项目的前端，现在我正在创建所有视图。我有一个模板，大致如下：

<!doctype html>
<html lang="en-GB">

<head>
  <!-- TITLE -->
 <title>@yield('title')</title>
 /*Fonts, meta, css and script references go here too*/
</head>


<body id=@yield('body-id')>

 <!-- HEADER -->
  @section('header')
    <header id="sticky-header">
      /*Logo and some other stuff*/
      @include('navigation')
    </header>
@yield_section

<!--CONTENT-->
<div id="content">
  @yield('content')
</div>


<!--FOOTER-->
<footer id="footer" role="contentinfo">
  @yield('footer')
  /*Copyright stuff*/
    </footer>
  </body>

</html>

我的观点是这样的：

@layout('templates.main')

@section('title')
Graddle.se - Home
@endsection

@section('body-id')
"start-page"
@endsection

<header id="header">
 <div class="social-buttons-container">
  <ul class="social-buttons">
  <li>{{ HTML::image('img/facebook_logo.png', 'Facebook', array('class' => 'social-button')); }}</li>
  <li>{{ HTML::image('img/twitter_logo.png', 'Twitter', array('class' => 'social-button')); }}</li>
   </ul>
  </div>
  @include('navigation')
</header>


@section('content')
The website content goes here! 
@endsection

@section('footer')
Footer stuff!
@endsection

请注意，我将在此页面上有两个标题。这是设计使然。所以我的问题是这样的：

我想插入一个来包裹整个身体来做一些 css 的东西。我将代码插入到模板中，它出现了，除了页脚之外，所有东西都被包装了。此外，当我在浏览器和 Chrome 检查器中检查源代码时，它会以奇怪的顺序显示：

如果我检查 chrome 检查器，标记的顺序如下：

<head>
</head>

<body id="start-page">
/*content from the <head> goes here*/

/*Webpage content goes here, sticky-header from the template etc*/

<footer>
Footer stuff
</footer>
</body>
</html>

现在，如果我执行 ctrl-U 并检查源代码，标记显示如下：

<header id="header">
/*inserted by the view*/
</header>

<html>
<head>
/*Header stuff here, as it should be*/
</head>

<body id="start-page">

/*All the content*/

<footer>
Footer content
</footer>
</body>
</html>

虽然页面看起来不错，但一切都在视觉上应该是。所以我的问题是：

如何插入 a 来包装整个内容在身体里？就像我说的，我不能换行。
为什么标记的顺序如此混乱，并且在 chrome 检查器和源代码中？

我意识到这可能有点不清楚（我删除了中间的一些内容以使示例更清晰以便更容易理解），请问我是不是！

谢谢！

【问题讨论】：

标签： templates laravel blade

【解决方案1】：

1.如何插入a来将整个内容包裹在body中？就像我说的，我不能换页脚。

我不太明白你所说的页脚没有被换行是什么意思。在您提供的代码中，<footer> 标签位于 <body> 标签内。

2. 为什么标记的顺序这么乱？

这是因为在您的视图文件中，您没有将<header> 标签包装在任何部分中。您应该根据您的视觉需求将其包装在 header 或 content 部分中：

@section('header')
    @parent <!-- keep what's in the inherited layout file -->

    <header id="header">
        <div class="social-buttons-container">
            <!-- ... -->
        </div>
        @include('navigation')
    </header>
@endsection

3. 在 chrome 检查器和源代码中显示不同？

检查器正在精美地格式化和组织 HTML，因此开发人员可以减少对混乱的源代码的担心。根据Google：

元素面板有时是“查看源代码”的更好方式页。在 Elements 面板中，页面的 DOM 会很好格式化，轻松地向您展示 HTML 元素、它们的祖先和它们的子孙。很多时候，您访问的页面会缩小或简单丑陋的 HTML 使得很难看到页面的结构。这元素面板是您查看真实底层证券的解决方案页面结构。

【讨论】：