Level 73
You are using a very old method of using layouts, I would suggest using a bit mote modern approach to it, and use blade components, rather than using section and yield.
Feb 21, 2026
5
Level 1
Quirks mode, doctype IS in layout.
I have this blade page
@extends('layouts.app')
@push('styles')
<link href="{{ asset('css/common.css') }}" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/driver.css"/>
<style>
/* Override Driver.js font */
.driver-popover {
font-family: inherit !important;
}
.driver-popover-title {
font-family: inherit !important;
}
.driver-popover-description {
font-family: inherit !important;
}
</style>
@endpush
@section('title', 'کمیک ها')
@section('content')
<div class="w-full grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4 px-11 py-6">
@foreach($comics as $index => $comic)
<a
href="{{ route('comics.show', ['comic' => $comic->slug]) }}"
class="rounded-lg p-4 border border-gray-500 bg-white min-w-0"
@if($index === 0) id="first-comic" @endif
>
<img class="w-full" src="{{ $comic->cover_image_url }}" alt="{{ $comic->title }}">
<h2 class="text-xl font-semibold">{{ $comic->title }}</h2>
<p class="text-md">{{ $comic->description }}</p>
</a>
@endforeach
</div>
@endsection
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/driver.js.iife.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
if (localStorage.getItem('tutorial_done')) return;
if (!document.getElementById('first-comic')) return;
const driver = window.driver.js.driver({
animate: true,
overlayColor: 'rgba(0, 0, 0, 0.5)',
onDestroyed: () => localStorage.setItem('tutorial_done', 'true')
});
driver.highlight({
element: '#first-comic',
popover: {
title: '👆 شروع کنید!',
description: 'برای خواندن کمیک روی این کارت کلیک کنید',
side: 'left',
align: 'center'
}
});
});
</script>
@endpush
I have the doctype in layout, this:
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{{-- Swiper CSS --}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
{{-- jQuery --}}
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<meta name="csrf-token" content="{{ csrf_token() }}">
{{-- Additional styles --}}
<style>
@font-face {
font-family: cinema;
src: url({{ asset('fonts/cinema.woff2') }});
}
@font-face {
font-family: vazirmatn;
src: url({{ asset('fonts/vazirmatn.woff2') }});
}
</style>
@stack('styles')
<title>@yield('title', 'کمیکستون')</title>
@vite('resources/css/app.css')
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@yield('head')
</head>
<body class="font-[vazirmatn] bg-neutral-50">
@include('partials.header')
@yield('content')
{{-- Swiper JS --}}
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
{{-- Additional scripts --}}
@stack('scripts')
</body>
</html>
, but every page using this says Quirks Mode. adding it to the blade page itself instead of layout solves it. like this:
@extends('layouts.app')
<!DOCTYPE html>
@push('styles')
<link href="{{ asset('css/common.css') }}" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/driver.css"/>
<style>
/* Override Driver.js font */
.driver-popover {
font-family: inherit !important;
}
.driver-popover-title {
font-family: inherit !important;
}
.driver-popover-description {
font-family: inherit !important;
}
</style>
@endpush
@section('title', 'کمیک ها')
@section('content')
<div class="w-full grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4 px-11 py-6">
@foreach($comics as $index => $comic)
<a
href="{{ route('comics.show', ['comic' => $comic->slug]) }}"
class="rounded-lg p-4 border border-gray-500 bg-white min-w-0"
@if($index === 0) id="first-comic" @endif
>
<img class="w-full" src="{{ $comic->cover_image_url }}" alt="{{ $comic->title }}">
<h2 class="text-xl font-semibold">{{ $comic->title }}</h2>
<p class="text-md">{{ $comic->description }}</p>
</a>
@endforeach
</div>
@endsection
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/driver.js.iife.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
if (localStorage.getItem('tutorial_done')) return;
if (!document.getElementById('first-comic')) return;
const driver = window.driver.js.driver({
animate: true,
overlayColor: 'rgba(0, 0, 0, 0.5)',
onDestroyed: () => localStorage.setItem('tutorial_done', 'true')
});
driver.highlight({
element: '#first-comic',
popover: {
title: '👆 شروع کنید!',
description: 'برای خواندن کمیک روی این کارت کلیک کنید',
side: 'left',
align: 'center'
}
});
});
</script>
@endpush
page html after it's rendered:
<html dir="rtl" lang="fa">
<head>
<link href="http://127.0.0.1:8000/css/common.css" rel="stylesheet">
<link href="http://127.0.0.1:8000/css/header.css" rel="stylesheet">
<link href="http://127.0.0.1:8000/css/dashboard.css" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<meta name="csrf-token" content="dOcPAWi9PrjnaZdw6XJL726tVUDPreaGWzyBR7JZ">
<style>
@font-face {
font-family: cinema;
src: url(http://127.0.0.1:8000/fonts/cinema.woff2);
}
@font-face {
font-family: vazirmatn;
src: url(http://127.0.0.1:8000/fonts/vazirmatn.woff2);
}
</style>
<style>
@font-face {
font-family: cinema;
src: url(http://127.0.0.1:8000/fonts/cinema.woff2);
}
@font-face {
font-family: vazirmatn;
src: url(http://127.0.0.1:8000/fonts/vazirmatn.woff2);
}
</style>
<title>داشبورد</title>
<script type="module" src="http://[::1]:5173/@vite/client"></script>
<link rel="stylesheet" href="http://[::1]:5173/resources/css/app.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="font-[vazirmatn] bg-neutral-50">
<header class="lg:px-40 px-2 sticky m-auto left-0 top-0 bg-primary-400 z-10">
<nav class="flex justify-between">
<ul class="flex gap-5 py-5">
<li><a href="http://127.0.0.1:8000/comics">کمیک ها</a></li>
<li><a href="http://127.0.0.1:8000/dashboard">داشبورد</a></li>
</ul>
<img class="max-h-[70px] py-3" src="http://127.0.0.1:8000/./images/logo.svg">
</nav>
</header>
<main class="font-[vazirmatn]">
<h1 class="mb-10 text-3xl font-bold">سلام 55555555!</h1>
<div class="flex flex-col gap-4">
</div>
<div class="mt-8 p-6 bg-white border border-gray-300 rounded-lg shadow-sm">
<div class="flex items-center justify-between">
<div>
<h2 class="text-lg font-semibold text-gray-700">موجودی سکه</h2>
<p class="text-4xl font-bold text-amber-500 mt-2">0 🪙</p>
</div>
</div>
</div>
<div class="mt-10">
<h2 class="text-xl font-bold mb-4">تاریخچه خرید</h2>
<p class="text-gray-500 text-center py-6">هنوز هیچ اپیزودی خریداری نکردهاید.</p>
</div>
<div class="buttons mt-8 mx-auto">
<form action="http://127.0.0.1:8000/logout" method="POST" class="w-full">
<input type="hidden" name="_token" value="dOcPAWi9PrjnaZdw6XJL726tVUDPreaGWzyBR7JZ" autocomplete="off"> <button type="submit" class="text-center text-red-700 mx-auto block w-full">خروج از حساب کاربری</button>
</form>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
</body>
</html>
Level 1
Thanks, I'll look that up. Yet I think it should work, not marked as deprecated in the document page you've sent.
Level 30
Can you provide generated result html to check?
Level 1
Surely the generated one doesn't have a doctype
Level 30
Then you've got something mixed up. Blade templates you gave should produce doctype if it is in layout you extend. Laravel doesn't cut out your doctype.
1 like
Please or to participate in this conversation.