Route order in Laravel 5

Asked

Viewed 91 times

0

I’m starting at the Larable, I have the following routes:

Route::get('/', function () {
     return view('indextemplate');
});

Route::get('/', function () {
     return view('footer');
});

Route::get('/', function () {
     return view('header');
});

Route::get('/', function () {
     return view('script');
});

Route::get('/', function () {
     return view('styles');
});

Have indextemplate:

@extends('layouts.index')

@yield('style')

@section('content')

@yield('header')

    <div id="fh5co-hero" style="background-image: url(images/slide_2.jpg);">
        <div class="overlay"></div>
        <a href="#fh5co-main" class="smoothscroll fh5co-arrow to-animate hero-animate-4"><i class="ti-angle-down"></i></a>
        <!-- End fh5co-arrow -->
        <div class="container">
            <div class="col-md-12">
                <div class="fh5co-hero-wrap">
                    <div class="fh5co-hero-intro">
                        <h1 class="to-animate hero-animate-1">Valet Multi-Purpose Free HTML5 Bootstrap Template</h1>
                        <h2 class="to-animate hero-animate-2">Created by <a href="http://freehtml5.co" target="_blank">FREEHTML5.co</a></h2>
                        <p class="to-animate hero-animate-3"><a href="#" class="btn btn-outline btn-md">Sign up</a></p>
                    </div>
                </div>
            </div>
        </div>      
    </div>

    <div id="fh5co-main">

        <div class="fh5co-cards">
            <div class="container-fluid">
                <div class="row animate-box">
                    <div class="col-md-12 heading text-center"><h2>Outstanding Products</h2></div>
                </div>
                <div class="row">
                    <div class="col-lg-3 col-md-6 col-sm-6 animate-box">
                        <a class="fh5co-card" href="#">
                            <img src="images/img_large_1.jpg" alt="Free HTML5 Bootstrap template" class="img-responsive">
                            <div class="fh5co-card-body">
                                <h3>Web Developer</h3>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste sunt porro delectus cum officia magnam.</p>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-3 col-md-6 col-sm-6 animate-box">
                        <a class="fh5co-card" href="#">
                            <img src="images/img_large_2.jpg" alt="Free HTML5 Bootstrap template" class="img-responsive">
                            <div class="fh5co-card-body">
                                <h3>User Experience</h3>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste sunt porro delectus cum officia magnam.</p>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-3 col-md-6 col-sm-6 animate-box">
                        <a class="fh5co-card" href="#">
                            <img src="images/img_large_2.jpg" alt="Free HTML5 Bootstrap template" class="img-responsive">
                            <div class="fh5co-card-body">
                                <h3>Web Designer</h3>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste sunt porro delectus cum officia magnam.</p>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-3 col-md-6 col-sm-6 animate-box">
                        <a class="fh5co-card" href="#">
                            <img src="images/img_large_3.jpg" alt="Free HTML5 Bootstrap template" class="img-responsive">
                            <div class="fh5co-card-body">
                                <h3>Web Analyst</h3>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste sunt porro delectus cum officia magnam.</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="container">

            <div class="row text-center" id="fh5co-features">
                <div class="col-md-12 heading animate-box"><h2>Awesome Features</h2></div>
                <div class="col-md-4 col-sm-6 text-center fh5co-feature feature-box">
                    <div class="fh5co-feature-icon">
                        <i class="ti-mobile"></i>
                    </div>
                    <h3 class="heading">Mobile</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste sunt porro delectus cum officia magnam.</p>
                </div>
                <div class="col-md-4 col-sm-6 text-center fh5co-feature feature-box"> 
                    <div class="fh5co-feature-icon">
                        <i class="ti-lock"></i>
                    </div>
                    <h3 class="heading">Lock</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste sunt porro delectus cum officia magnam. </p>
                </div>

                <div class="clearfix visible-sm-block"></div>

                <div class="col-md-4 col-sm-6 text-center fh5co-feature feature-box"> 
                    <div class="fh5co-feature-icon">
                        <i class="ti-video-camera"></i>
                    </div>
                    <h3 class="heading">Video</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste sunt porro delectus cum officia magnam.</p>
                </div>

                <div class="clearfix visible-md-block visible-lg-block"></div>

                <div class="col-md-4 col-sm-6 text-center fh5co-feature feature-box">
                    <div class="fh5co-feature-icon">
                        <i class="ti-shopping-cart"></i>
                    </div>
                    <h3 class="heading">Shop</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste sunt porro delectus cum officia magnam. </p>
                </div>

                <div class="clearfix visible-sm-block"></div>

                <div class="col-md-4 col-sm-6 text-center fh5co-feature feature-box"> 
                    <div class="fh5co-feature-icon">
                        <i class="ti-palette"></i>
                    </div>
                    <h3 class="heading">Pallete</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste sunt porro delectus cum officia magnam.</p>
                </div>
                <div class="col-md-4 col-sm-6 text-center fh5co-feature feature-box"> 
                    <div class="fh5co-feature-icon">
                        <i class="ti-truck"></i>
                    </div>
                    <h3 class="heading">Deliver</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste sunt porro delectus cum officia magnam.</p>
                </div>
            </div>
            <!-- END row -->

        </div>
        <!-- END container -->

        @yield('footer')

        @yield('script')

   @endsection

Man HTML

   <!DOCTYPE html>
      <html>
      <head>

      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <title>index</title>

      @yield('styles')


      </head>
      <body>

      @yield('content')


      @yield('scripts')
      </body>
      </html>

I have all the files header, footer, do not appear in the browser because of route orders, I tried to use Routes::group(array ...) didn’t work either, as I do ?

  • Put the code of the file layouts.index. It is the most important because it is your master. Without it you can not help. Put it.

  • This My HTML is the layouts.index

1 answer

1


I will comment on the points I found, and already tell how it could be:

Routes

//Essa é a única rota de que você precisa;  
Route::get('/', function () {
     return view('indextemplate');
});

indextemplate

//Você não inclui o Header, footer etc aqui.   
//Essas informações já estão no seu master blade.  

@extends('layouts.index')

@section('content')

    <div id="fh5co-hero" style="background-image: url(images/slide_2.jpg);">
        <div class="overlay"></div>
        <a href="#fh5co-main" class="smoothscroll fh5co-arrow to-animate hero-animate-4"><i class="ti-angle-down"></i></a>
        <!-- End fh5co-arrow -->
        <div class="container">
            <div class="col-md-12">
                <div class="fh5co-hero-wrap">
                    <div class="fh5co-hero-intro">
                        <h1 class="to-animate hero-animate-1">Valet Multi-Purpose Free HTML5 Bootstrap Template</h1>
                        <h2 class="to-animate hero-animate-2">Created by <a href="http://freehtml5.co" target="_blank">FREEHTML5.co</a></h2>
                        <p class="to-animate hero-animate-3"><a href="#" class="btn btn-outline btn-md">Sign up</a></p>
                    </div>
                </div>
            </div>
        </div>      
    </div>

    <div id="fh5co-main">

        <div class="fh5co-cards">
            <div class="container-fluid">
                <div class="row animate-box">
                    <div class="col-md-12 heading text-center"><h2>Outstanding Products</h2></div>
                </div>
                <div class="row">
                    <div class="col-lg-3 col-md-6 col-sm-6 animate-box">
                        <a class="fh5co-card" href="#">
                            <img src="images/img_large_1.jpg" alt="Free HTML5 Bootstrap template" class="img-responsive">
                            <div class="fh5co-card-body">
                                <h3>Web Developer</h3>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste sunt porro delectus cum officia magnam.</p>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-3 col-md-6 col-sm-6 animate-box">
                        <a class="fh5co-card" href="#">
                            <img src="images/img_large_2.jpg" alt="Free HTML5 Bootstrap template" class="img-responsive">
                            <div class="fh5co-card-body">
                                <h3>User Experience</h3>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste sunt porro delectus cum officia magnam.</p>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-3 col-md-6 col-sm-6 animate-box">
                        <a class="fh5co-card" href="#">
                            <img src="images/img_large_2.jpg" alt="Free HTML5 Bootstrap template" class="img-responsive">
                            <div class="fh5co-card-body">
                                <h3>Web Designer</h3>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste sunt porro delectus cum officia magnam.</p>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-3 col-md-6 col-sm-6 animate-box">
                        <a class="fh5co-card" href="#">
                            <img src="images/img_large_3.jpg" alt="Free HTML5 Bootstrap template" class="img-responsive">
                            <div class="fh5co-card-body">
                                <h3>Web Analyst</h3>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste sunt porro delectus cum officia magnam.</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="container">

            <div class="row text-center" id="fh5co-features">
                <div class="col-md-12 heading animate-box"><h2>Awesome Features</h2></div>
                <div class="col-md-4 col-sm-6 text-center fh5co-feature feature-box">
                    <div class="fh5co-feature-icon">
                        <i class="ti-mobile"></i>
                    </div>
                    <h3 class="heading">Mobile</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste sunt porro delectus cum officia magnam.</p>
                </div>
                <div class="col-md-4 col-sm-6 text-center fh5co-feature feature-box"> 
                    <div class="fh5co-feature-icon">
                        <i class="ti-lock"></i>
                    </div>
                    <h3 class="heading">Lock</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste sunt porro delectus cum officia magnam. </p>
                </div>

                <div class="clearfix visible-sm-block"></div>

                <div class="col-md-4 col-sm-6 text-center fh5co-feature feature-box"> 
                    <div class="fh5co-feature-icon">
                        <i class="ti-video-camera"></i>
                    </div>
                    <h3 class="heading">Video</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste sunt porro delectus cum officia magnam.</p>
                </div>

                <div class="clearfix visible-md-block visible-lg-block"></div>

                <div class="col-md-4 col-sm-6 text-center fh5co-feature feature-box">
                    <div class="fh5co-feature-icon">
                        <i class="ti-shopping-cart"></i>
                    </div>
                    <h3 class="heading">Shop</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste sunt porro delectus cum officia magnam. </p>
                </div>

                <div class="clearfix visible-sm-block"></div>

                <div class="col-md-4 col-sm-6 text-center fh5co-feature feature-box"> 
                    <div class="fh5co-feature-icon">
                        <i class="ti-palette"></i>
                    </div>
                    <h3 class="heading">Pallete</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste sunt porro delectus cum officia magnam.</p>
                </div>
                <div class="col-md-4 col-sm-6 text-center fh5co-feature feature-box"> 
                    <div class="fh5co-feature-icon">
                        <i class="ti-truck"></i>
                    </div>
                    <h3 class="heading">Deliver</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste sunt porro delectus cum officia magnam.</p>
                </div>
            </div>
            <!-- END row -->

        </div>
        <!-- END container -->

 @stop
 @section('scripts')
    <script>        
        //Meus Scripts desta página aqui
    </script>
 @stop

 @section('styles')
    <style>
       //Meus estilos desta página aqui.
    </style>
 @stop

master Blade

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>index</title>
        @yield('styles')
    </head>
    <body>
        @yield('content')
        @yield('scripts')
    </body>
</html>

OBS: Its @yield were also under different names.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.