At beginning I was thinking this is trivial task to do. However, after start working on it I figured it out it's tricky to solve.
The best solution as I see for this is using blade @section, @show, @endsection syntax. Take a look at this example below.
You have layout file like this:
layouts/default.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charSet="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
@section('metatags')
<title>{{ config('site.meta.default_title') }} | Coding Wisely</title>
<link rel="canonical" href="{{ url('/') }}" />
<meta name="description" content="{{ config('site.meta.description') }}">
<meta name="keywords" content="{{ config('site.meta.keywords') }}">
<meta property="og:title" content="{{ !empty($title) ? Str::finish($title, ' | Coding Wisely') : 'Coding Wisely' }}">
<meta property="og:description" content="{{ config('site.meta.og:description') }}">
<meta property="og:image" content="{{ asset('CodingWisely.png') }}">
<meta property="og:url" content="{{ url('/') }}">
<meta property="og:type" content="{{ config('site.meta.og:type') }}">
<meta property="og:site_name" content="{{ config('site.meta.site_name') }}">
<meta name="twitter:card" content="{{ asset('CodingWisely.png') }}">
<meta name="twitter:title" content="{{ !empty($title) ? Str::finish($title, ' | Coding Wisely') : 'Coding Wisely' }}">
<meta name="twitter:description" content="{{ config('site.meta.description') }}">
<meta name="twitter:image" content="{{ asset('CodingWisely.png') }}">
@show
</head>
<body>
<div class="flex flex-col min-h-screen">
<header>Awesome Header</header>
<main class="flex-grow">
{{ $slot }}
</main>
<footer>Beautiful Footer</footer>
</div>
</body>
</html>
As you can see from the above layout code, you will see @section('metatags') that we can easily overwrite when needed.
Pay attention we are using
@showas closing instead of @endsection.
Then, in another page that you need to change the metatags, all you have to do is simply:
pages/somewhere.blade.php
<?php
use function Livewire\Volt{layout, title,state, mount};
use App\Models\Post;
layout('layouts.default');
state([ 'post' => null ]);
mount(function($slug) {
$this->post = Post::query()
->whereSlug($slug)
->where('active', true)
->with(['categories', 'tags'])
->firstOrFail();
});
?>
@section('metatags')
<title>{{ $post->title }} | Coding Wisely</title>
<!-- Put other metatags specific for this page here -->
<!-- ... -->
@endsection
<div class="flex flex-col mx-auto max-w-5xl ">
...
</div>
That's all.
