I built a Basic blade template inside
resources/views
,
Further I am using Vuetify.
it look like this:
//app.blade.php:
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', env('APP_NAME')) }}</title>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app" dark>
<v-app dark v-if="loading">
<v-layout row wrap align-center>
<v-flex class="text-xs-center">
<v-progress-circular :indeterminate="true" :size="80" color="primary"></v-progress-circular>
</v-flex>
</v-layout>
</v-app>
<v-app v-else v-cloak dark>
<v-navigation-drawer app right></v-navigation-drawer>
<v-toolbar app></v-toolbar>
<v-content>
<v-container grid-list-xl>
<v-layout>
#section('content')
</v-layout>
</v-container>
</v-content>
<v-footer app></v-footer>
</v-app>
</div>
<script src="{{ asset('js/app.js') }}" defer></script>
#yield('javascript')
</body>
</html>
I create a section
#section('content') so that I can extend the layout and put Content to that area. Inside
resources/views/Event
i have a blade file which extends this and shall add data to the Content
// create.blade.php
#extends('layouts.app')
#section('content')
testests
#endsection
But Nothing gets shown, what am I missing?
In you Blade template, you want to use
#yield('content')
not:
#section('content')
Related
I'm trying to add a custom UI to my Laravel 9 app. So I'm adding extra CSS and JS files to my app.blade.php But looks like its not loading properly.
As you can see http://127.0.0.1:8000/css/tailwind.output.css and http://127.0.0.1:8000/js/init-alpine.js files not loaded. But when i check default http://127.0.0.1:8000/css/app.css file. Its working. But both of these files resides in the same location, which is resources/css/ and resources/js/ folders. Why those custom css and js files not loaded.
<!DOCTYPE html>
<html :class="{ 'theme-dark': dark }" x-data="data()" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="{{ asset('css/tailwind.output.css') }}">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.x.x/dist/alpine.min.js"defer></script>
<script src="{{ asset('js/init-alpine.js') }}" defer></script>
#livewireStyles
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body class="font-sans antialiased">
<x-jet-banner />
<div class="min-h-screen bg-gray-100">
#livewire('navigation-menu')
<!-- Page Heading -->
#if (isset($header))
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
#endif
<!-- Page Content -->
<main>
{{ $slot }}
</main>
</div>
#stack('modals')
#livewireScripts
</body>
</html>
I'm using tailwind CSS, livewire, jetstream and Laravel 9
My yield or section or include is not working here is my code I think I already follow all the rules. As you can see I want to call the three.blade.php I name it as a #section('script') and call it to the master.blade.php using yield('script') but it seems the yield or section is not working. here are my codes below:
master.blade.php
<!doctype html>
<html lang="fa" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href="{{ asset('themes/css/bootstrap.rtl.min.css') }}" rel="stylesheet">
<link href="{{ asset('themes/css/bootstrap-select.css') }}" rel="stylesheet">
<link href="{{ asset('themes/fontawesome/css/all.min.css') }}" rel="stylesheet">
<link href="{{ asset('themes/css/style.css') }}" rel="stylesheet">
<link href="{{ asset('favicon.ico') }}" rel="shortcut icon" type="image/x-icon"/>
<title> كاربران</title>
</head>
<body>
#include('Home.layouts.sidebar')
<main id="app">
#include('Home.layouts.header')
#yield('content')
</main>
#include('Home.layouts.footer')
#yield('script')
</body>
</html>
index.blade.php
#include('Home.steps.one')
#include('Home.steps.two')
#include('Home.steps.three')
two.blade.php
<form action="{{ route('book.store') }}" method="post">
#csrf
....
</form>
<table class="table table-striped">
....
</table>
#section('script')
<script>
$(document).on('click', '#book_id', function() {
alert('Hello');
});
</script>
#endsection
three.blade.php
<form action="{{ route('requisition.store') }}" method="post">
#csrf
....
</form>
<table class="table table-striped">
....
</table>
#section('script')
<script>
$(document).on('click', '#province_id', function() {
alert('Hello');
});
</script>
#endsection
In index.blade.php
#extends('layouts.master')
#section('content')
#include('Home.steps.one')
#include('Home.steps.two')
#include('Home.steps.three')
#endsection
and for script and css you can use #stack.So in master.blade.php instead of
#yield('script')
use
#stack("script")
and in two.blade.php or any master extended layout use
#push('script')
<script>
</script>
#endpush
#John Lobo is correct, #stack and #push are definitely the way to go here. But there is also one other thing that might be going on here. Looks like you're trying to use jQuery, but I don't see it being imported anywhere.
From main parent template I tried calling:
<link rel="stylesheet" href=<?=asset('css/admin_custom.css') ?> >
So all views that extends parent can use these styles but it doesn't work.
However if I put it in the child view, works perfectly.
Already tried using the {{ }} format, and adding type="text/css".
Also checked Including a css file in a blade template?
What is missing??
EDIT: more details...
I have this is the AdminLTE page template (page.blade.php):
#extends('adminlte::master')
#inject('layoutHelper', 'JeroenNoten\LaravelAdminLte\Helpers\LayoutHelper')
#if($layoutHelper->isLayoutTopnavEnabled())
#php( $def_container_class = 'container' )
#else
#php( $def_container_class = 'container-fluid' )
#endif
#section('includes')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/icheck-bootstrap/3.0.1/icheck-bootstrap.min.css" >
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css"/>
<link rel="stylesheet" href="{{ asset('css/admin_custom.css') }}">
#stop
#section('adminlte_css')
#stack('css')
#yield('css')
#stop
#section('classes_body', $layoutHelper->makeBodyClasses())
#section('body_data', $layoutHelper->makeBodyData())
#section('body')
<div class="wrapper">
{{-- Top Navbar --}}
#if($layoutHelper->isLayoutTopnavEnabled())
#include('adminlte::partials.navbar.navbar-layout-topnav')
#else
#include('adminlte::partials.navbar.navbar')
#endif
{{-- Left Main Sidebar --}}
#if(!$layoutHelper->isLayoutTopnavEnabled())
#include('adminlte::partials.sidebar.left-sidebar')
#endif
{{-- Content Wrapper --}}
<div class="content-wrapper {{ config('adminlte.classes_content_wrapper') ?? '' }}">
{{-- Content Header --}}
<div class="content-header">
<div class="{{ config('adminlte.classes_content_header') ?: $def_container_class }}">
#yield('content_header')
</div>
</div>
{{-- Main Content --}}
<div class="content">
<div class="{{ config('adminlte.classes_content') ?: $def_container_class }}">
#yield('content')
</div>
</div>
</div>
{{-- Footer --}}
#hasSection('footer')
#include('adminlte::partials.footer.footer')
#endif
{{-- Right Control Sidebar --}}
#if(config('adminlte.right_sidebar'))
#include('adminlte::partials.sidebar.right-sidebar')
#endif
</div>
#stop
#section('adminlte_js')
#stack('js')
#yield('js')
#stop
Then In the view I have #extends('adminlte::page')
And the bootstrap and datatables, etc. are working just fine, but my local styles file is not.
UPDATE: I paste here the HTML produced by the page. As I wrote if I put the in the 'css' section in view it produces this url, that works in the browser: http://localhost:5555/css/admin_custom.css
If I inspect the page I can see:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="4O2ogi54rggyd1ryKL0Isy8hlbjt5kELC61T">
<title>myTitle</title>
<link rel="stylesheet" href="http://localhost:5555/vendor/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="http://localhost:5555/vendor/overlayScrollbars/css/OverlayScrollbars.min.css">
<link rel="stylesheet" href="http://localhost:5555/vendor/adminlte/dist/css/adminlte.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<link rel="stylesheet" href="http://localhost:5555/css/admin_custom.css">
<link rel="shortcut icon" href="http://localhost:5555/favicons/favicon.ico">
<style></style></head>
Then, If I put it in the template it does not produces the same:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="4O2ogi54rggyd1ryKL0Isy8hlbjt5kELC61T">
<title>myTitle </title>
<link rel="stylesheet" href="http://localhost:5555/vendor/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="http://localhost:5555/vendor/overlayScrollbars/css/OverlayScrollbars.min.css">
<link rel="stylesheet" href="http://localhost:5555/vendor/adminlte/dist/css/adminlte.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<link rel="shortcut icon" href="http://localhost:5555/favicons/favicon.ico">
<style></style></head>
The styles for adminLTE templates wont work if written in page.blade.php, as previoulsly did:
EDIT: more details... I have this is the AdminLTE page template
(page.blade.php)
The styles have to be called in the master.blade.php so to be available for all pages. page.blade.php also extends from master, So: go to master.blade.php search for the {-- Base Stylesheets --}} section and put your code there like this:
{{-- Base Stylesheets --}}
#if(!config('adminlte.enabled_laravel_mix'))
<link rel="stylesheet" href="{{ asset('vendor/fontawesome-free/css/all.min.css') }}">
<link rel="stylesheet" href="{{ asset('vendor/overlayScrollbars/css/OverlayScrollbars.min.css') }}">
<link rel="stylesheet" href=<?=asset('css/admin_custom.css') ?> >
{{-- Configured Stylesheets --}}
#include('adminlte::plugins', ['type' => 'css'])
<link rel="stylesheet" href="{{ asset('vendor/adminlte/dist/css/adminlte.min.css') }}">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
#else
<link rel="stylesheet" href="{{ mix(config('adminlte.laravel_mix_css_path', 'css/app.css')) }}">
#endif
Note: This fix is for case you have not compile all your styles in app.css and AdminLTE main pages have been published as in this question.
As porloscerros Ψ wrote, you have to write it this way (in between <head> tags)
<link rel="stylesheet" href="{{ mix('css/admin_custom.css') }}">
And if it does not work, try:
<link rel="stylesheet" href="{{ asset('css/admin_custom.css') }}">
I have created some layouts and added in home.blade.php, when i view it in browser some space is added whenever i include the layouts! here is my home.blade.php
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<title>#yield('title') - {!! trans('main.site_title') !!}</title> <!-- Favicon-->
<link rel="icon" href="{!! URL::to('/') !!}/public/frontend/img/favicon.ico" type="image/x-icon">
<!-- Google Fonts -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
{{ Html::style('public/frontend/js/bxslider/jquery.bxslider.css') }}
{{ Html::style('public/frontend/js/flexslider/flexslider.css') }}
{{ Html::style('public/frontend/js/radial-progress/style.css') }}
{{ Html::style('public/frontend/css/animate.css') }}
</head>
<body>
#include('frontend.layouts.header')
#include('frontend.layouts.slider')
#include('frontend.layouts.header_strips')
#include('frontend.layouts.news_events')
#include('frontend.layouts.share_pics_articles')
#include('frontend.layouts.are_you_ready')
#include('frontend.layouts.education_great')
#include('frontend.layouts.about_statistics')
#include('frontend.layouts.quotes')
#include('frontend.layouts.sub_footer')
#include('frontend.layouts.footer')
{!! Html::script('public/frontend/js/breakpoints.js') !!}
{!! Html::script('public/frontend/js/jquery/jquery-3.3.1.min.js') !!}
{!! Html::script('public/frontend/js/scrollspy.js') !!}
</body>
</html>
How to fix that issue ? can some one help me please
Below i have attached the browser screenshot please take a look at it !
I'm trying to yield in one of my blade files but it's not working.
This is my index.blade.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="token" content="{{ csrf_token() }}">
<title>Forum</title>
<link href="https://fonts.googleapis.com/css?family=Lato:100,200,300,400" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="/css/bulma.css" rel='stylesheet' type='text/css'>
<link href="/css/all.css" rel='stylesheet' type='text/css'>
</head>
<body>
<div id="app">
#include('shared.menu.menu')
#yield('content')
</div>
<script src="/js/app.js"></script>
</body>
</html>
This is my login.blade.php:
#extends('index')
#section('content')
#yield('shared.bar.bar')
#stop
So the navigation bar is showing at this point. But the bar is not! When I replace: #yield('shared.bar.bar') with test, test shows up. This is shared/bar/bar.blade.php:
#section('bar')
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title">
test
</h1>
<h2 class="subtitle">
test
</h2>
</div>
</div>
</section>
#stop
What am I doing wrong? Is it also possible to pass variables to the bar? So I can show another title and subtitle on every page?
--EDIT--
#section('bar')
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title">
{{ $title }}
</h1>
<h2 class="subtitle">
{{ $subtitle }}
</h2>
</div>
</div>
</section>
#stop
If you are showing all of your code, looks like your yield is
#yield('shared.bar.bar')
And yout section
#section('bar')
When it should be
#section('shared.bar.bar')
Or you should change your yield to
#yield('bar')
Because #yield and #section are only strings, they are not related to files like #include.
And looks like this file is also wrong:
#extends('index')
#section('content')
#yield('shared.bar.bar')
#stop
#yield is something you should start using only in your main layout file, because it can get messy and hard and harder to undestand what's happening. So, unless you have a section 'shared.bar.bar' to fill this #yield, you should probably do something like
#extends('index')
#section('content')
<form>
.... your login form
</form>
#stop
or
#extends('index')
#section('content')
#include('shared.bar.bar')
#stop
or
#extends('index')
#section('content')
#include('shared.bar.bar')
<form>
.... your login form
</form>
#stop
To have the title changed via section you can also do:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<title>#yield('title')</title>
</head>
or
<h1 class="title">
#yield('title')
</h1>
And your login blade file, you can do
#extends('index')
// This will tell the Blade Compiler to replace every
// occurence of #yield('title')
#section('title')
User Login
#stop
#section('content')
#include('shared.bar.bar')
<form>
.... your login form
</form>
#stop