CODEWITHSUNDEEP
phpjquerycsslaravel
Brian
Brian

Reputation: 11

How do i add css and js to a laravel layout file?

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 &copy; 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>

Upvotes: 0

Views: 1462

Answers (2)

jewishmoses
jewishmoses

Reputation: 1138

You are loading assets like:

<link href="css/font-awesome.min.css" rel="stylesheet">

So for exmaple if you are on website.com everything may load fine.

Files will be loaded from https://website.com/css/font-awesome.min.css etc.

BUT if you visit website.com/post files will be loaded from https://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">

Upvotes: 1

STA
STA

Reputation: 34668

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"

Upvotes: 1

Related Questions