php - How do i add css and js to a laravel layout file?
Get the solution ↓↓↓
So im working on a blog website and i added a layout file. So i made it such that when i click on a blog it shows more info about it in another page (shows.blade.php). the shows page extends the layout page but doesn't show the css or js.It doesn't show the images either so i assume that its either i have referenced it wrongly or i havent created the right sections. When i open the layouts file everything's working correctly! However when i click on a blog to take me to the other page none of the css/js is working. Here's the shows.blade.php
@extends('layouts.layout')
@section('content')
@parent
<div class="card">
<h1>{{$post->title}}</h1>
<small>{{$post->created_at}}</small>
<small>{{$post->category}}</small>
<small>{{$post->body}}</small>
<small>{{$post->tags}}</small>
</div>
@endsection
and here's the layouts file where i included some code from a template. when i open this the styles are working just well
<!DOCTYPE html>
<html>
<head>
@section('head')
<meta charset="utf-8">
<title>Bloger</title>
<!-- Description, Keywords and Author -->
<meta name="description" content="Your description">
<meta name="keywords" content="Your,Keywords">
<meta name="author" content="ResponsiveWebInc">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Styles -->
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Font awesome CSS -->
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="#">
@show
</head>
<body>
<div class="wrapper">
<!-- header -->
<header>
<!-- navigation -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img class="img-responsive" src="images/logo.png" alt="Logo" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="login.html">New Blog</a></li>
<li><a href="registration.html">Signup</a></li>
<li><a href="login.html">Login</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#blog">Create a blog</a></li>
<li><a href="#subscribe">Subscribe</a></li>
<li><a href="#team">Executive Team</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
<div class="event" id="event">
<div class="container">
<div class="default-heading">
<!-- heading -->
<h2>Upcoming events</h2>
@yield('content')
</div>
</div>
</div>
<!-- events end -->
<footer>
<div class="container">
<p><a href="#">Home</a> | <a href="#work">works</a> | <a href="#team">Team</a> | <a href="#contact">Contact</a></p>
<div class="social">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-dribbble"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-google-plus"></i></a>
</div>
<!-- copy right -->
<!-- This theme comes under Creative Commons Attribution 4.0 Unported. So don't remove below link back -->
<p class="copy-right">Copyright © 2014 <a href="#">Your Site</a> | Designed By : <a href="http://www.indioweb.in/portfolio">IndioWeb</a>, All rights reserved. </p>
</div>
</footer>
</div>
<!-- Javascript files -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>
<!-- Respond JS for IE8 -->
<script src="js/respond.min.js"></script>
<!-- HTML5 Support for IE -->
<script src="js/html5shiv.js"></script>
<!-- Custom JS -->
<script src="js/custom.js"></script>
</body>
</html>
Answer
Solution:
You are loading assets like:
<link href="css/font-awesome.min.css" rel="stylesheet">
So for exmaple if you are onwebsite.com everything may load fine.
Files will be loaded fromhttps://website.com/css/font-awesome.min.css etc.
BUT if you visitwebsite.com/post files will be loaded fromhttps://website.com/**post**/css/font-awesome.min.css that may result in 404 error.
So you can either add a forward slash:
<link href="/css/font-awesome.min.css" rel="stylesheet">
so all files will be loaded from the root folder.
Or a way that I prefer using the asset method
The asset function generates a URL for an asset using the current scheme of the request (HTTP or HTTPS):
<link href="{{ asset('css/font-awesome.min.css') }}" rel="stylesheet">
Answer
Solution:
Give a/ (slash) begin of your css, js and image path, Like :
href="css/bootstrap.min.css"
Change to :
href="/css/bootstrap.min.css"
Because/ will return the root of the site.
It's done in order to root the path (making it an absolute path).
It ensures that the path is not relative but read from the root of the site.
This allows one to move a file around and not have to change the links to the different resources.
You need to change all the path, like :
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/font-awesome.min.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
Even also change the image path :
src="/images/logo.png"
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: xmlhttprequest error flutter
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.