时间戳

首页 > 解决方案 > 如何将 css 和 js 添加到 laravel 布局文件中？

php - 如何将 css 和 js 添加到 laravel 布局文件中？

问题描述

所以我在一个博客网站上工作，我添加了一个布局文件。所以我做到了，当我点击一个博客时，它会在另一个页面（shows.blade.php）中显示更多关于它的信息。显示页面扩展了布局页面，但不显示 css 或 js。它也不显示图像，所以我认为它要么我错误地引用了它，要么我没有创建正确的部分。当我打开布局文件时，一切正常！但是，当我单击博客将我带到另一个页面时，css/js 都没有工作。这是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

这是布局文件，我在其中包含了模板中的一些代码。当我打开它时，样式效果很好

    <!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>

标签： phpjquerycsslaravel

解决方案

您正在加载资产，例如：

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

因此，例如，如果您在所有内容上website.com都可以正常加载。

文件将从https://website.com/css/font-awesome.min.css等加载。

但是如果您访问website.com/post文件将从中加载https://website.com/**post**/css/font-awesome.min.css，可能会导致 404 错误。

因此，您可以添加正斜杠：

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

所以所有文件都将从根文件夹加载。

或者我更喜欢使用资产方法的方式

资产函数使用请求的当前方案（HTTP 或 HTTPS）为资产生成 URL：

<link href="{{ asset('css/font-awesome.min.css') }}" rel="stylesheet">

推荐阅读