laravel - 特定视图无法扩展 Laravel 7 中的布局文件
问题描述
我正在使用 Laravel 7 在慈善网站上工作,我有一个主布局文件,它已在两个视图中扩展,index
视图和show
视图,两个视图都在同一个目录中,出于测试目的,我从index
视图中复制了代码并将其粘贴到show
视图中,但index
视图正确显示样式和所有内容,但是show
加载视图时,它没有css
样式,并且js
以下是所有相关文件:
layout
观点 :
<!DOCTYPE html>
<html lang="en">
<head>
@include('partials.header')
@yield('styles')
</head>
<body>
@include('partials.nav')
@yield('content')
@include('partials.footer')
<!-- loader -->
<div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px">
<circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle
class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10"
stroke="#F96D00"/></svg></div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-migrate-3.0.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/jquery.fancybox.min.js"></script>
<script src="js/aos.js"></script>
<script src="js/jquery.animateNumber.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
<script src="js/google-map.js"></script>
<script src="js/main.js"></script>
@yield('scripts')
</body>
</html>
这是index
正常工作的视图:
@extends('layout')
@section('content')
<div class="site-section fund-raisers bg-light">
<div class="container">
<div class="row mb-3 justify-content-center">
<div class="col-md-8 text-center">
<h2>All Fundraisers</h2>
<p class="lead">These are the fundraisers that require your little help to give hope to the
ones in need.</p>
</div>
</div>
</div>
<div class="container-fluid">
<!-- <div class="row"> -->
<div class="col-md-12 block-11">
<div class="nonloop-block-11 owl-carousel">
@foreach($causes as $cause)
<div class="card fundraise-item">
<a href="#"><img class="card-img-top" src="{{ asset($cause->image) }}" alt="Image
placeholder"></a>
<div class="card-body">
<h3 class="card-title"><a href="{{ route('causes.show', $cause->id) }}">{{ $cause->title
}}</a></h3>
<p class="card-text">{{ $cause->body }}</p>
<span class="donation-time mb-3 d-block">Last donation 1w ago</span>
<div class="progress custom-progress-success">
<div class="progress-bar bg-primary" role="progressbar" style="width: 80%" aria-
valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<span class="fund-raised d-block">$12,000 raised of $30,000</span>
</div>
</div>
@endforeach
</div>
</div>
<br />
<div class="d-flex justify-content-center align-items-cente"> {{ $causes->links() }} </div>
</div>
</div>
@endsection
这是show
显示一项但无法正常工作的视图:
@extends('layout')
@section('content')
<div class="site-section fund-raisers bg-light">
<div class="container">
<div class="row mb-3 justify-content-center">
<div class="col-md-8 text-center">
<h2>All Fundraisers</h2>
<p class="lead">These are the fundraisers that require your little help to give hope to the
ones in need.</p>
</div>
</div>
</div>
<div class="container-fluid">
<!-- <div class="row"> -->
<div class="col-md-12 block-11">
<div class="nonloop-block-11 owl-carousel">
<div class="card fundraise-item">
<a href="#"><img class="card-img-top" src="{{ asset($cause->image) }}" alt="Image
placeholder"></a>
<div class="card-body">
<h3 class="card-title"><a href="">{{ $cause->title }}</a></h3>
<p class="card-text">{{ $cause->body }}</p>
<span class="donation-time mb-3 d-block">Last donation 1w ago</span>
<div class="progress custom-progress-success">
<div class="progress-bar bg-primary" role="progressbar" style="width: 80%" aria-
valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<span class="fund-raised d-block">$12,000 raised of $30,000</span>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
这是controller
文件:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Cause as Cause;
class CausesController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$causes = Cause::take(15)->paginate(5);
return view('causes.index', ['causes' => $causes]);
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
//
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
//
}
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
$cause = Cause::findOrFail($id)->first();
return view('causes.show', ['cause' => $cause]);
}
这是web.php
路线的文件:
<?php
use Illuminate\Support\Facades\Route;
Route::get('/', 'HomeController@index')->name('home.index');
Route::get('/causes', 'CausesController@index')->name('causes.index');
Route::get('/causes/{id}', 'CausesController@show')->name('causes.show');
我尽力了两天来找到解决方案,但没有任何帮助,在这方面的任何帮助将不胜感激。
解决方案
问题不在您的视图代码或逻辑中。一切都是正确的。唯一的问题是您加载静态资源的方式,即 CSS 和 JS 文件。
我认为您必须已将 CSS 和 JS 文件放在公共文件夹中,因此当您访问索引路由时,JS URL 变为
<script src="js/jquery.min.js"></script>
但是当你试图搜索那些 CSS 和 JS 文件时
<script src="causes/{id}/js/jquery.min.js"></script>
你可以尝试做的是:
<script src="{{ url('js/jquery.min.js') }}"></script>
这只是为了解决您的问题,理想情况下,您应该将这些文件保存在 Resource 文件夹中,并且应该使用 Laravel Mix 编译这些文件并自动加载它们。
推荐阅读
- python - 为什么我不能打印出装饰器的输出?
- python - 语法错误python,不知道如何编写代码
- python - Python:继续方法调用保持,直到配置的延迟时间
- javascript - What does this _=_=>_(_);_(_) mean?
- image - 如何在 Flutter 中不使用 BackdropFilter 获得模糊效果?
- python - 使用 Keras/Tensorflow Serving 的可变长度输入
- c# - 如何为下拉菜单创建视图?
- python - 如何使用 Selenium 和 Python 定位元素并提取所需文本
- c# - 如何将新属性设置为 @Html.DropDownListFor
- typescript - vue-class-component:如何创建和初始化反射数据