如何使用laravel 5.4.6在主模板中呈现多个动态部分/包含/产量

时间:2017-02-12 04:30:40

标签: php laravel laravel-5.2 laravel-5.3 laravel-5.4

我是laravel的新手,正在进行laravel 5.4.6的第一个项目。我有一个问题是如何将多个动态部分/包含/收益内容呈现到主模板中。我已经使用了@section('content')但需要更多部分(其中包含来自数据库的动态数据)才能在我的布局页面上显示。以下是我的问题详情:

1-路线

   Route::group(['middleware' => ['web']], function () {
   Route::get('/', 'HomeController@showIndex'); 
   Route::get('/index', 'HomeController@showIndex');});

2- master.blade.php

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8" />
        <title>@yield('title')-Al Quraish Publications</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <meta name="Author" content="" />

        <link href="favicon.png" rel="icon" type="image/png">
        <meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=0" />

        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800" rel="stylesheet" type="text/css" />

        <link href="{{asset('assets/plugins/bootstrap/css/bootstrap.min.css')}}" rel="stylesheet" type="text/css" />
        <link href="{{asset('assets/css/font-awesome.css')}}" rel="stylesheet" type="text/css" />
        <link href="{{asset('assets/plugins/owl-carousel/owl.carousel.css')}}" rel="stylesheet" type="text/css" />
        <link href="{{asset('assets/plugins/owl-carousel/owl.theme.css')}}" rel="stylesheet" type="text/css" />
        <link href="{{asset('assets/plugins/owl-carousel/owl.transitions.css')}}" rel="stylesheet" type="text/css" />
        <link href="{{asset('assets/plugins/magnific-popup/magnific-popup.css')}}" rel="stylesheet" type="text/css" />
        <link href="{{asset('assets/css/animate.css')}}" rel="stylesheet" type="text/css" />
        <link href="{{asset('assets/css/superslides.css')}}" rel="stylesheet" type="text/css" />

        <link href="{{asset('assets/plugins/revolution-slider/css/settings.css')}}" rel="stylesheet" type="text/css" />

        <link href="{{asset('assets/css/essentials.css')}}" rel="stylesheet" type="text/css" />
        <link href="{{asset('assets/css/layout.css')}}" rel="stylesheet" type="text/css" />
        <link href="{{asset('assets/css/slider.css')}}" rel="stylesheet" type="text/css" />
        <link href="{{asset('assets/css/layout-responsive.css')}}" rel="stylesheet" type="text/css" />
        <link href="{{asset('assets/css/color_scheme/brown.css')}}" rel="stylesheet" type="text/css" /><!-- orange: default style -->

        <link href="{{asset('assets/css/color_scheme/brown.css')}}" rel="alternate stylesheet" type="text/css" title="brown" />

        <script type="text/javascript" src="assets/plugins/modernizr.min.js"></script>
        <link href="assets/css/jquery.bxslider.css" rel="stylesheet">

    </head>
    <body>


<div class="top-header"> 
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                   <div class="topleft">
                   <ul class="socials-icons">
                       <li><a href="https://web.facebook.com/AlQuraishPublishers?_rdr" target="_blank">
                       <i class="fa fa-facebook"></i> Facebook</a></li>
                       @if(\Auth::check())
                            <li>
                                <a href="{{url('admin')}}"><i class="fa fa-user"></i> Dashboard</a>

                            </li>
                        @else
                            <li>
                                <a href="{{url('login')}}"><i class="fa fa-user"></i> Log In</a>

                            </li>
                        @endif
                    </ul> 
                   </div>
                </div>
                <div class="col-sm-6">
                  <div class="topright">
                        <i class="fa fa-phone"></i> 92 42 37668958 , 37652546 , 37361439 &nbsp; 
                        <i class="fa fa-envelope-o"></i> <a class="wht" href="mailto:info@alquraish.com">info@alquraish.com</a>
                   </div>
                </div>
            </div>
        </div>
    </div>
        <!-- TOP NAV -->
        <div class="pos-absolute"> 
                <header id="topNav" style="height: 100px !important;"><!--data-spy="affix" data-offset-top="100" -->

                    <div class="container">
                     <!-- Top Header -->

        <div class="clearfix"></div>
                        <!-- Mobile Menu Button -->
                        <button class="btn btn-mobile" data-toggle="collapse" data-target=".nav-main-collapse">
                            <i class="fa fa-bars"></i>
                        </button>

                       <!-- Logo text or image -->
                        <!-- Logo text or image -->
                        <a class="logo" href="index.html">
                            <img src="assets/images/logo.png"> 
                        </a>

                        <!-- Top Nav -->
                        <div class="navbar-collapse nav-main-collapse collapse pull-right">
                            <nav class="nav-main mega-menu">
                                <ul class="nav nav-pills nav-main scroll-menu" id="topMain">
                                    <li><a href="{{url('/index')}}">Home</a></li>

                                    <li><a href="{{url('/about')}}">About Us</a></li>
                                    <li><a href="{{url('/books')}}">Books</a></li>
                                    <li><a href="{{url('/order')}}">Order Now</a></li>
                                    <li><a href="{{url('/contact')}}">Contact Us</a></li>
                                </ul>
                            </nav>
                        </div>
                        <!-- /Top Nav -->

                    </div>
                </header>
        </div>

        <!-- WRAPPER -->
        <div id="wrapper" >

            <!-- REVOLUTION SLIDER -->
            <div class="fullwidthbanner-container roundedcorners pos-reletive">
                <div class="fullwidthbanner">
                    <ul>    

                        <li data-transition="curtain-2" data-slotamount="5" data-masterspeed="700">
                            <img src="assets/images/sliders/1.jpg" alt="" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
                        </li>

                        <li data-transition="curtain-2" data-slotamount="5" data-masterspeed="700">
                            <img src="assets/images/sliders/2.jpg" alt="" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
                        </li>

                        <li data-transition="3dcurtain-vertical" ddata-slotamount="15" data-masterspeed="300" data-delay="9400">
                            <img src="assets/images/sliders/3.jpg" alt="" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
                        </li>

                        <li data-transition="3dcurtain-vertical" ddata-slotamount="15" data-masterspeed="300" data-delay="9400">
                            <img src="assets/images/sliders/4.jpg" alt="" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
                        </li>

                        <li data-transition="3dcurtain-vertical" ddata-slotamount="15" data-masterspeed="300" data-delay="9400">
                            <img src="assets/images/sliders/5.jpg" alt="" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
                        </li>

                        <li data-transition="3dcurtain-vertical" ddata-slotamount="15" data-masterspeed="300" data-delay="9400">
                            <img src="assets/images/sliders/6.jpg" alt="" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
                        </li>

                    </ul>

                    <div class="tp-bannertimer"></div>
                </div>
            </div>
            <!-- /REVOLUTION SLIDER -->


            @section('content')

            @show



            <div class="container">
                <div class="row">
                    <div class="scroll-img">
                        <div id="clients-flexslider" class="flexslider home clients">

                            <div class="slider1">
                                  <div class="slide">
                                        <img src="assets/images/gallery-scroll/1.png">
                                        <p>Nazia Kanwal Nazi</p>
                                  </div>
                                  <div class="slide">
                                        <img src="assets/images/gallery-scroll/2.png">
                                        <p>Riaz Aqab</p>
                                  </div>
                                  <div class="slide">
                                        <img src="assets/images/gallery-scroll/3.png">
                                        <p>Rizq Shah</p>
                                  </div>
                                  <div class="slide">
                                        <img src="assets/images/gallery-scroll/4.png">
                                        <p>Malik Safdar Hayat</p>
                                  </div>
                                  <div class="slide">
                                        <img src="assets/images/gallery-scroll/5.png">
                                        <p>Mehwish Iftikhar</p>
                                  </div>
                                  <div class="slide">
                                        <img src="assets/images/gallery-scroll/6.png">
                                        <p>Fakhira Gull</p>
                                  </div>
                                  <div class="slide">
                                        <img src="assets/images/gallery-scroll/7.png">
                                        <p>Asia Mirza</p>
                                  </div>
                                  <div class="slide">
                                        <img src="assets/images/gallery-scroll/8.png">
                                        <p>Mirza Amjad Baig</p>
                                  </div>
                                  <div class="slide">
                                        <img src="assets/images/gallery-scroll/9.png">
                                        <p>Anwar Ulaiqi</p>
                                  </div>
                                  <div class="slide">
                                        <img src="assets/images/gallery-scroll/10.png">
                                        <p>Iffat Tahir</p>
                                  </div>
                                  <div class="slide">
                                        <img src="assets/images/gallery-scroll/11.png">
                                        <p>MA Rahat</p>
                                  </div>
                            </div>

                        </div>  
                    </div> <!--scroll-img ends-->


=> here is i have problem becuase this setion has data from database and giving me the error of " Undefined variable: " 

                    **<div class="col-md-12">
                        @include('layouts.homeWelcomeHeading')

                    </div>**



                </div> <!--row ends-->
            </div>


        </div>
        <!-- /WRAPPER -->

        <div class="container">
            <div class="row padding60">

                        <!-- FORM -->
                        <div class="col-md-6">


<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FAlQuraishPublishers%2F&tabs=timeline&width=800&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="800" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>



                        </div>

                        <div class="col-md-6">
                            <h3>Message Board</h3>
                            <h4>Publisher, Books & Magazine Distribution Book Store</h4>
                            <p>Order your favorite Book / Novel And Get 35% Discount...
For Online Order message Us
Book will be delivered to your door step
Free Home Delivery all across Pakistan </p>

                        <form class="white-row" action="#" method="post">
                                <div class="row">
                                    <div class="form-group">
                                        <div class="col-md-6">
                                            <label>Full Name *</label>
                                            <input type="text" value="" data-msg-required="Please enter your name." maxlength="100" class="form-control" name="name" id="name">
                                        </div>
                                        <div class="col-md-6">
                                            <label>E-mail *</label>
                                            <input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control" name="email" id="email">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group">
                                        <div class="col-md-6">
                                            <label>Phone / Mobile *</label>
                                            <input type="text" value="" data-msg-required="Please enter your name." maxlength="100" class="form-control" name="name" id="name">
                                        </div>
                                        <div class="col-md-6">
                                            <label>Subject *</label>
                                            <input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control" name="email" id="email">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <label>Message *</label>
                                            <textarea maxlength="5000" data-msg-required="Please enter your message." rows="10" class="form-control" name="message" id="message"></textarea>
                                        </div>
                                    </div>
                                </div>

                                <br />

                                <div class="row">
                                    <div class="col-md-12">
                                        <input type="submit" value="Submit Message" class="btn btn-primary btn-lg" data-loading-text="Loading...">
                                    </div>
                                </div>
                            </form>

                        </div>


                    </div>
        </div>

        <section class="cover margin-footer parallax" data-stellar-background-ratio="0.7" style="background-image: url('assets/images/parallax_bg.jpg');">


                <div class="container">
                    <h3 align="center">Our customers have said</h3>

                    <div class="owl-carousel text-center" data-plugin-options='{"items": 1, "singleItem": true, "navigation": true, "pagination": false, "autoPlay": true, "transitionStyle":"fadeUp"}'><!-- transitionStyle: fade, backSlide, goDown, fadeUp,  -->
                        <div class="testimonial">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                            <cite><strong>Writer Name</strong>, Customer</cite>
                        </div>

                        <div class="testimonial">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                            <cite><strong>Writer Name</strong>, Customer</cite>
                        </div>

                        <div class="testimonial">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                            <cite><strong>Writer Name</strong>, Customer</cite>
                        </div>

                        <div class="testimonial">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                            <cite><strong>Writer Name</strong>, Customer</cite>
                        </div>

                    </div>

                </div>


            </section>  


        <!-- FOOTER -->
        <footer>
            <div class="clearfix"></div>
            <!-- footer content -->
            <div class="footer-content">
                <div class="container">

                    <div class="row">

                        <!-- FOOTER CONTACT INFO -->
                        <div class="column col-md-8">
                            <h3>Title</h3>


                            <p class="contact-desc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
                            </p>

                            <p class="contact-desc">

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.               
                            </p>

                        </div>
                        <!-- /FOOTER CONTACT INFO -->


                        <!-- FOOTER Profile -->
                        <div class="column col-md-4">
                            <h3>Get In Touch</h3>

                            <address class="font-opensans">
                                <ul>
                                    <li class="footer-sprite address">
                                       text will be here 
                                    </li>
                                    <li class="footer-sprite phone">
                                        <strong>Landline:</strong> +1234567789<br> 
                                    </li>
                                    <li class="footer-sprite email">
                                        <a href="mailto:info@mail.com"> info@mail.com</a><br>
                                    </li>
                                </ul>
                            </address>
                        </div>
                        <!-- /FOOTER Profile -->

                    </div>

                </div>
            </div>
            <!-- footer content -->
<!-- copyright , scrollTo Top -->
            <div class="footer-bar">
                <div class="container">
                    <span class="copyright">Copyright &copy; All Rights Reserved.   
                    <span style="display:inline-block; text-align: right; float: right; ">&nbsp; || &nbsp;
                    Powered by: <a href="#" target="_blank"><small>Me</small></a></span>
                    </span>
                    <a class="toTop" href="#topNav">Go To Top <i class="fa fa-arrow-circle-up"></i></a>
                </div>
            </div>
            <!-- copyright , scrollTo Top -->
        </footer>
        <!-- /FOOTER -->


        <script type="text/javascript" src="assets/plugins/jquery-2.1.4.min.js"></script>
        <script type="text/javascript" src="assets/plugins/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="assets/plugins/jquery.cookie.js"></script>
        <script type="text/javascript" src="assets/plugins/jquery.appear.js"></script>
        <script type="text/javascript" src="assets/plugins/jquery.isotope.js"></script>
        <script type="text/javascript" src="assets/plugins/masonry.js"></script>

     <script src="assets/js/jquery.bxslider.js"></script>
     <script src="assets/js/jquery.bxslider.min.js"></script>

     <script type="text/javascript">   

 $(document).ready(function(){
  $('.slider1').bxSlider({
        auto: true,
        autoControls: true,
        slideWidth: 155,
        minSlides: 2,
        maxSlides: 7,
        slideMargin: 10,
        pager: true,
        moveSlides: 2,

        /*'auto': true,
        'autoControls': true,
        'pager':false,
          'pager':false,
          'infiniteLoop':false,
          'minSlides':1,
          'maxSlides': 3,
          'slideWidth': '210px',
          'slideMargin':5*/
  });
  $('#slider2').bxSlider({
        'auto': true,
        'autoControls': true,
        'adaptiveHeight': true,
        /*mode: 'vertical',*/
});
});

 </script> 

        <script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="assets/plugins/magnific-popup/jquery.magnific-popup.min.js"></script>
        <script type="text/javascript" src="assets/plugins/owl-carousel/owl.carousel.min.js"></script>
        <script type="text/javascript" src="assets/plugins/stellar/jquery.stellar.min.js"></script>
        <script type="text/javascript" src="assets/plugins/knob/js/jquery.knob.js"></script>
        <script type="text/javascript" src="assets/plugins/jquery.backstretch.min.js"></script>
        <script type="text/javascript" src="assets/plugins/superslides/dist/jquery.superslides.min.js"></script>

        <script type="text/javascript" src="assets/plugins/mediaelement/build/mediaelement-and-player.min.js"></script>
        <script type="text/javascript" src="assets/plugins/revolution-slider/js/jquery.themepunch.tools.min.js"></script>
        <script type="text/javascript" src="assets/plugins/revolution-slider/js/jquery.themepunch.revolution.min.js"></script>
        <script type="text/javascript" src="assets/js/slider_revolution.js"></script>
        <script type="text/javascript" src="assets/js/scripts.js"></script>


    </body>




</html>

3-控制器

public function showIndex()
{
    //$text = DB::table('content')->get();
    $text = Content::all();
    return view('index', ['ok', $text]);
}

请帮助我解决这个问题。

2 个答案:

答案 0 :(得分:1)

据我所知,如果你需要将多个动态部分插入到master中,你需要多个像

这样的事情。
@yield('content')
@yield('dynamin-1')
@yield('dynamic-2')
.......
.......

然后在另一个刀片文件中,您需要扩展主文件并插入像

这样的部分
@extends('layouts.master')

@section('content')
bla bla <strong>bla bla bla....</strong>
@endsection

@section('dynamin-1')
bla bla <strong>bla bla bla....</strong>
@endsection

@section('dynamin-2')
bla bla <strong>bla bla bla....</strong>
@endsection

....

所以在你的情况下,除非你有意识地把它放在你的主人身上,否则你不需要@section('content')!无论何时将@section('content')放在view master中,:not()中的此部分都会被覆盖!

答案 1 :(得分:1)

亲爱的,我认为你正在使用

@section() // instead of yield()

确保使用

@yield('content')
@yield('section1')
@yield('section2')

在master.blade php

在子页面中,你可以这样做

@extends('layouts.master')

@section('content')

@endsection

@section('section1')

@endsection

@section('section2')

@endsection