I'm using laravel-breadcrumbs package by diglactic with laravel 8 forked from davejamesmiller/laravel-breadcrumbs I'm trying to add dynamic page title based on this breadcrumbs package.
what I mean by dynamic page title ? let's imagine that every page I have it contain a page title section like this :
HTML: (Every Page it have this section below the navbar)
<section class="py-5 text-center container">
<div class="row py-lg-5">
<div class="col-lg-6 col-md-8 mx-auto">
<h1 class="fw-bold mb-4">Page Title Here</h1> // Dynamic Page Title Here
</div>
</div>
</section>
You can make your own breadcrumb. First you should generate blade component something like php artisan make:component breadcrumb and then look at the code, I use it anyway and it success
AppServiceProvider.php
public function boot()
{
// your prev code
view()->share('currentPath', explode('/', substr_replace(request()->path(), '', 0, 3)));
}
componenents/breadcrumb.blade.php
<nav>
<ul class="breadcrumbs">
<li class="breadcrumb-item pl-0">
Home
</li>
#foreach ($paths as $path)
<li class="breadcrumb-item pl-0 text-capitalize
{{ $loop->last ? 'active' : '' }}">
<a href="{{ url($path) }}">
{{ str_replace('-', ' ', $path) }}
</a>
</li>
#endforeach
</ul>
</nav>
And use it in any view like this
<x-breadcrumb :paths="$currentPath" />
You can use #yield to cahnge a section of your template dynamically.
check the documentation for more info.
The #yield is use to dynamic title
here i am create a template.blade.php file and title.blade.php.
the title.blade.php is extends template.blade.php file and title can dynamic is work perfectly.
template.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#yield('title')</title>
</head>
<body>
The title is dynamically
</body>
</html>
title.blade.php
#extends('template')
#section('title')
My Title
#endsection
Related
#extends , #section and #yield work for the main welcome page, but I made a new product-gel.blade.php file in view and used the #extends and #section and #endsection on it but it doesnt seem to work.
Here is the yield place
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="..\resources\stylecss\style.css">
#vite(['resources/css/app.css', 'resources/js/app.js'])
<script></script>
</head>
<body>
<div id="app">
<section id="header">
<div class="main-pages-box">
<div class="main-pages">
CUSTOMER CARE
#if (Route::has('login'))
#auth
<a> {{Auth::user()->name}} </a>
LOG OUT
#else
LOGIN
#if (Route::has('register'))
REGISTER
#endif
#endauth
#endif
</div>
</div>
<div class="main-bar">
<div class="daraz-logo-container">
<img src="../resources/images/daraz_logo.png" alt="daraz_logo" class="daraz-logo">
</div>
<div class="search-box-container">
<form onSubmit="searching();">
<input type="text" placeholder=" Search on Daraz" name="search" class="search-bar" id="text-to-search">
<a onclick="searching();" class="search-btn"></a>
<img src="../resources/images/cart-icon.png" alt="">
<img src="../resources/images/downloadnow-icon.png" alt="">
</form>
</div>
</div>
</section>
<script src="../resources/scriptfiles/searching.js"></script>
#yield('content')
<section id="footer">
<div class="customer-care-end">
<h1>Customer Care</h1>
<ul>
<li>Help Center</li>
<li>How to Buy</li>
<li>Corporate & Bulk Purchasing</li>
<li>Returns & Refunds</li>
<li>Daraz Shop</li>
<li>Contact Us</li>
<li>Purchase Protection</li>
<li>Daraz Pick up Points</li>
<li>Fulfulled By Daraz (FBD)</li>
</ul>
</div>
<div class="codenthx">
<div class="QRcode"></div>
<div class="appdl">
<div class="QRthx"></div>
<p>Happy Shopping</p>
</div>
</div>
</section>
</div>
</body>
</html>
And here is the new file im trying to extend on (removed the html file and just put it a header testing file to see if it works)
#extends('layouts.frontend')
#section('content')
<div>
<h1>testing</h1>
</div>
#endsection
This works on the welcome.blade.php file but not on the product-gel.blade.php file.
this is what the directory is looking like for the welcome page
view > welcome.blade.php
and for the product one
view > produ > product-gel.blade.php
I have also tried moving the gel.blade.php file outside of produ folder like this
view > product-gel.blade.php
But that also doesnt work, I am still new to laravel so dont know what I am doing wrong here.
https://imgur.com/a/2crydOm
This is what it looks like.
Laravel view page displays additional '<' character,but it is not given in the code. How can I fix it? I have given the blade.php code for the view. While inspecting, all the tags are misplaced and the head tag is shown inside the body tag.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
</head>
<body>
<div class="flex-center position-ref full-height">
#if (Route::has('login'))
<div class="top-right links">
#auth
Home
#else
Login
#if (Route::has('register'))
Register
#endif
#endauth
</div>
#endif
<div class="content">
<div class="title m-b-md">
Laravel
</div>
<div class="links">
Docs
Laracasts
News
Blog
Nova
Forge
GitHub
</div>
</div>
</div>
</body>
</html>
I have an #include problem with my bootstrap navbar. I worked on it this morning and I really don't know where the problem is.
Here is the error message :
View [layouts.navbar] not found.
I want to include the content of navbar.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Mana Tournaments</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
{!! Html::style('css/style.css') !!}
{!! Html::style ('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css') !!}
{!! Html::style ('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css') !!}
</head>
<body>
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Logo</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Accueil</li>
<li>Tournois</li>
<li>Inscription</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
To my index page (welcome.blade.php)
<!DOCTYPE html>
<html>
<head>
<title>Mana Tournaments</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
{!! Html::style('css/style.css') !!}
{!! Html::style ('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css') !!}
{!! Html::style ('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css') !!}
</head>
<body>
<h1>Gestionnaire de tournois</h1>
<div class="container">
#include('layouts.navbar')
</div>
</body>
</html>
I created manually a layout folder, then i created the navbar file. If I did someting wrong, maybe there's a command line for laravel for creating a folder ?
Thank you for helping me on my problem.
First of all,
Make sure the view you're including exists in the correct folder.
#include('layouts.navbar') will include that path \resources\views\layouts\navbar.blade.php
Make sure, The file within layouts directory,
Second, You don't need to write the whole html for the included part.
navbar.blade.php will be added (included) to welcome.blade.php,
it's like you're copying the content of navbar.blade.php and adding it to welcome.blade.php,
So make it like this instead,
navbar.blade.php
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Logo</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Accueil</li>
<li>Tournois</li>
<li>Inscription</li>
<li>Contact</li>
</ul>
</div>
</nav>
That's because that file is not in the app/views directory. When you call #include('filename'), Blade automatically looks for any file with that name, inside the apps/views directory. Also, you're not supposed to write the file extension, as Blade automatically looks for files with .blade.php and .php extensions.
For Laravel 5 use this folder
resources/views/
I just installed bootstrap 3 via composer composer require twbs/bootstrap and I'm thinking how can I call the bootstrap library in my master page default.blade.php instead of calling via href like these : <link rel="stylesheet" href="too many to mention"> so I can apply some style in my navigation.
<!doctype html>
<html>
<head>
<title>Home</title>
</head>
<body>
#include ('templates.partials.navigation')
<div class = "container">
#yield('content') {{-- #yield is always used to get content from a child page into master page. So this page will be master page. --}}
</div>
</body>
</html>
navigation.blade.php
<div class = "navbar navbar-inverse">
<ul>
<li>
Login
Register
</li>
</ul>
</div>
How can I put apply the style in my navigation without importing the style link library in my master page?
You can just use url()
<link rel = "stylesheet" href= "{{ url('css/bootstrap.min.css')}}">
<div class = "navbar navbar-default">
<ul>
<li>
Login
Register
</li>
</ul>
</div>
Just found a solution on my question.
<link rel = "stylesheet" href= "{{ URL::asset('css/bootstrap.min.css')}}">
<div class = "navbar navbar-default">
<ul>
<li>
Login
Register
</li>
</ul>
</div>
I'll follow some tutorials about Laravel 3, and know, I have a problem, with one:
#section('post_navigation')
#if(Auth::check())
#include('plugins.loggedin_postnav')
#endif
#endsection
Why this section not appear?
I try remove all content in section, for example;
#section('post_navigation')
<h1>Test</h1>
#endsection
But doesn't work.
The complete code is that:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
{{ HTML::link('/', 'Instapics', array('class' => 'brand')); }}
<div class="nav-collapse">
<ul class="nav">
#section('navigation')
<li class="active">{{ HTML::link('/', 'Home') }}</li>
#yield_section
</ul>
</div>
#section('post_navigation')
#if(Auth::check())
#include('plugins.loggedin_postnav')
#endif
#endsection
</div>
</div>
</div>
[EDIT]
I change #endsection to #yield_section, and works, BUT, I still not understand, for example (in User_Controller index view):
#section('post_navigation')
#parent
#endsection
Why not appear the include?
Why I need change endsection to yield_section?
When you use #section, you define a section like defining a variable. Then, you can use it where you want by #yield('sectionname') (or by using another way I specified in the second paragraph). For example, you can look at this:
#section('scripts')
<script src="jquery.js"></script>
#endsection
<head>
#yield('scripts')
</head>
#section / #endsection and #section / #yield_section are not same. #section / #yield_section defines a section area, not a section. In other words, it calls a variable. Actually it is more similar to yield('sectionname') than #section / #endsection. It has default value as a main difference from yield.
You can define an area which has default value, and then you can change it by defining a section. This logic mostly used while creating and using layouts. For example, Let below page be our main (main.blade.php) layout.
<html>
<head>
<title>
#section('title')
Default Title Maybe Sitename.com
#yield_section
</title>
#include('scripts')
</head>
<body>
<div id="content">
#section('content')
Default content
#yield_section
</div>
<div id="sidebar">
#section('sidebar')
<ul id="menu">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
</ul>
#yield_section
</body>
</html>
Generally layouts are not used directly. Another page is created and specified in the page its layout like #layout('main'). Then, sections are defined and laravel templating system change the defined section. Let this page be our post (post.blade.php) page:
#layout('main')
#section('title')
$post->title - #parent
#end_section
#section('content')
$post->content
#end_section
When we return post view View::make('profile');, as you can see, layout logic will work and sections in main.blade.php will be changed with we defined in this page. So, the output will be:
<html>
<head>
<title>
Post title - Default Title Maybe Sitename.com
</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<div id="content">
Post content
</div>
<div id="sidebar">
<ul id="menu">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
</ul>
</body>
</html>
By the way, #parent returns default value in section area and #include is same logic with include in php.
Have a nice day.
Seems like you may have found an answer. But it looks like #endsection has been replaced with #stop in L4. Try something like this instead:
#section('scripts')
<script src="jquery.js"></script>
#stop