Question

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

<!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检查员和源代码？

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

谢谢！

Answer 1

1.如何插入一个将整个内容包装在体内？就像我说的，我不能包裹页脚。

我不太明白你的页脚没有被包裹的含义。在您提供的代码中，<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，因此开发人员可以更少地担心凌乱的源代码。根据{{3}}：

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

Laravel刀片模板 - 标记的顺序搞砸了

1 个答案:

1.如何插入一个将整个内容包装在体内？就像我说的，我不能包裹页脚。

2.为什么标记的顺序如此混乱？

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