Ad

Laravel Blade Not Outputting @section('content')?

- 1 answer

I am using Laravel 6 and working on a blade.php file. Also, I'm using tailwindCss and tailwindUi in parts of my code. I have a layout file with the main nav bar working, on the other pages when I @section('content') nothing is being outputted and isn't showing in the browser. If I exclude the @section the code is passed through the browser but then pushes my nav bar down which isn't good. Hoping its a silly mistake but if you have had this issue and know of a fix please do share.

LAYOUT File

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link target="_blank" rel="nofollow noreferrer" href="{{ asset('css/app.css') }}" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.js" defer></script>
    <title>@yield('title')</title>
</head>

<div>
  <nav x-data="{ open: false }" @keydown.window.escape="open = false" class="bg-gray-800">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex items-center h-24">
       <div class="flex items-center">
          <div class="flex-shrink-0">
           <img class="h-10 w-10" src="/images/startup.svg" alt="icon" />
          </div>
          <div class="hidden md:block">
            <div class="ml-10 flex items-baseline">
              <a target="_blank" rel="nofollow noreferrer" href="/home" class="px-3 py-2 rounded-md text-sm font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700">Home</a>
              <a target="_blank" rel="nofollow noreferrer" href="/contact" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Contact</a>
              <a target="_blank" rel="nofollow noreferrer" href="/blog" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Blog</a>
              <a target="_blank" rel="nofollow noreferrer" href="po" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
              <a target="_blank" rel="nofollow noreferrer" href="#" class="ml-4 px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
            </div>
          </div>
        </div>
       <div class="-mr-2 flex md:hidden">
          <button @click="open = !open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white">
            <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
              <path :class="{'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
              <path :class="{'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
    <div :class="{'block': open, 'hidden': !open}" class="hidden md:hidden">
      <div class="px-2 pt-2 pb-3 sm:px-3">
        <a target="_blank" rel="nofollow noreferrer" href="/home" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700">Home</a>
        <a target="_blank" rel="nofollow noreferrer" href="/contact" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Contact</a>
        <a target="_blank" rel="nofollow noreferrer" href="/blog" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700">Blog</a>
        <a target="_blank" rel="nofollow noreferrer" href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
        <a target="_blank" rel="nofollow noreferrer" href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"></a>
      </div>
      <div class="pt-4 pb-3 border-t border-gray-700">
        <div class="flex items-center px-5">
          <div class="flex-shrink-0">
            <img class="h-10 w-10 rounded-full" src="/images/0.jpeg" alt="My Picture" />
          </div>
          <div class="ml-3">
            <div class="text-base font-medium leading-none text-white">Paolo Trulli</div>
            <div class="mt-1 text-sm font-medium leading-none text-gray-400">[email protected]</div>
          </div>
        </div>

INDEX File (blog)

@extends('layout')
@section('title', 'Blog')

@section('content')
<div class='blog-form'>
<h1>My Blog</h1>
<h3>A place where I create posts on random things that interest me</h3>


<form action="/blog" method="post">
    <input type="text" name="title" autocomplete="off">

    @csrf 

    <button>Add Blog Post</button>
    </form>

    <p style="color: red">@error('title') {{ $message }} @enderror</p>

    <ul>
        @forelse ($blogs as $blog)
            <li>{{ $blog->title }}</li>
        @empty
            <li><h3>No Blog Posts Yet</h3></li>
        @endforelse
    </ul>
    </div>
    @endsection

HomeController


<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller
{
    public function index()
    {
        return view ('/home');
    }

    public function about()
    {
        return view ('/about');
    }

    public function contact()
    {
        return view ('/contact');
    }

}

WEB Route

use App\Mail\WelcomeMail;

Route::get('/email', function() {
    return new WelcomeMail();
});

Route::get('/home', '[email protected]');
Route::get('/about', '[email protected]');
Route::get('/contact', '[email protected]');

Route::get('/blog', '[email protected]');
Route::post('/blog', '[email protected]');

Route::get('/subscribers', '[email protected]');
Route::get('/subscribers/create', '[email protected]');
Route::post('/subscribers', '[email protected]');
Route::get('/subscribers/{subscriber}', '[email protected]');
Route::get('/subscribers/{subscriber}/edit', '[email protected]');
Route::put('/subscribers/{subscriber}', '[email protected]');
Route::delete('/subscribers/{subscriber}', '[email protected]');
Ad

Answer

You need to use @yield('content') in your layout file.

Layout.blade.php

<html>
    <body>

            <nav>
            </nav>
            @yield('content')

    </body>
</html>

now you can use @section('content') in extened files.

index.blade.php

@extends('layout')
@section('content')
    <div class="">
       ...
       ...
    </div>
@endsection
Ad
source: stackoverflow.com
Ad