如何将 css 和 js 添加到 laravel 布局文件中?

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

给出 css、js 和图像路径的/(斜杠(开头，如下所示：

href="css/bootstrap.min.css"

更改为：

href="/css/bootstrap.min.css"

因为/会返回网站的根目录。

这样做是为了根路径(使其成为绝对路径(。

它确保路径不是相对的，而是从站点的根目录读取的。

这允许人们移动文件，而不必更改指向不同资源的链接。

您需要更改所有路径，例如：

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

甚至还更改图像路径：

src="/images/logo.png"

您正在加载以下资源：

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

因此，如果您在website.com，则一切可能加载正常。

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

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

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

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

因此，所有文件都将从根文件夹加载。

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

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

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

相关内容

最新更新

热门标签：