我的视图不包括 blade 模板的 CSS - laravel 8
My View doesn't include the CSS of the blade template - laravel 8
我想制作一个 CRUD 页面来编辑用户数据。但是,好像很别扭。因为它不使用任何样式表,即使我使用 @extend('layouts.main')
这是布局目录中 main.blade.php 的代码:
<!DOCTYPE html>
<html lang="en" class="light">
<!-- BEGIN: Head -->
<title>@yield('title','Auto \'Ilan - Best Way to Broadcast')</title>
@include('layouts.head')
<!-- END: Head -->
<body class="main">
<!-- BEGIN: Mobile Menu -->
@include('layouts.mobilemenu')
<!-- END: Mobile Menu -->
<!-- BEGIN: Top Bar -->
@include('layouts.topbar')
<!-- END: Top Bar -->
<div class="wrapper">
<div class="wrapper-box">
<!-- BEGIN: Side Menu -->
@include('layouts.sidemenu')
<!-- END: Side Menu -->
<!-- BEGIN: Content -->
@yield('content')
<!-- END: Content -->
</div>
</div>
<!-- BEGIN: JS Assets-->
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=["your-google-map-api"]&libraries=places"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.28/moment-timezone-with-data-10-year-range.min.js"></script>
<script src="js/adzan/Adhan.js"></script>
<script src="js/app.js"></script>
<!-- END: JS Assets-->
</body>
</html>
这是head.blade.php的代码:
<head>
<meta charset="utf-8">
<link href="images/logo.svg" rel="shortcut icon">
<title>Dashboard</title>
<!-- BEGIN: CSS Assets-->
<link rel="stylesheet" href="css/app.css" />
<!-- END: CSS Assets-->
</head>
这里是userupdate.blade.php的代码:
@extends('layouts.main')
@section('title','Add User Form - Auto \'Ilan')
@section('content')
<div class="content">
<div class="intro-y flex items-center mt-8 p-2">
<h2 class="text-lg font-medium mr-auto">
Tambahkan Pengguna
</h2>
</div>
<div class="intro-y col-span-12 lg:col-span-6">
<!-- BEGIN: Form Layout -->
<form action="{{ route('updateuser') }}" method="POST">
@csrf
@method('PUT')
<div class="intro-y box p-5">
<div>
<label for="role" class="form-label pt-2 pb-1">Pilih Role Akun</label>
<select class="form-select mt-2 sm:mr-2" name="role" id="role">
<option value="ospeta">OSPETA</option>
<option value="staf">Guru dan Staff</option>
<option value="admin">Admin</option>
</select>
</div>
<div>
<div class="mt-3"> <label for="name" class="form-label">Nama Kepemilikan</label> <input name="name" id="name" type="text" class="form-control" placeholder="Nama Pemilik Akun (opsional)" value="{{ $users->name }}"></div>
</div>
<div class="mt-3">
<div class="mt-3"> <label for="email" class="form-label">Email</label> <input id="email" name="email" type="email" class="form-control" placeholder="Masukan Email (opsional)" value="{{ $users->email }}"></div>
</div>
<div class="mt-3">
<div class="mt-3"> <label for="username" class="form-label">Username</label> <input id="username" name="username" type="text" class="form-control" placeholder="Pilih Nama Yang unik" value="{{ $users->username }}"></div>
</div>
<div class="mt-3">
<div class="mt-3"> <label for="password" class="form-label">Password</label> <input id="password" name="password" type="password" class="form-control" placeholder="Pilih Password yang Mudah Dihafal" value="{{ $users->password }}"></div>
</div>
<div class="text-right mt-5">
<button type="submit" class="btn btn-primary w-24">Simpan</button>
</div>
</div>
</form>
<!-- END: Form Layout -->
</div>
</div>
@endsection
截图如下:
enter image description here
请帮帮我,我真的不知道该怎么办。
在所有资产文件中使用 asset()
函数,例如:css、js 和图像。
<head>
<meta charset="utf-8">
<link href="{{ asset('images/logo.svg') }}" rel="shortcut icon">
<title>Dashboard</title>
<!-- BEGIN: CSS Assets-->
<link rel="stylesheet" href="{{ asset('css/app.css') }}" />
<!-- END: CSS Assets-->
</head>
我想制作一个 CRUD 页面来编辑用户数据。但是,好像很别扭。因为它不使用任何样式表,即使我使用 @extend('layouts.main')
这是布局目录中 main.blade.php 的代码:
<!DOCTYPE html>
<html lang="en" class="light">
<!-- BEGIN: Head -->
<title>@yield('title','Auto \'Ilan - Best Way to Broadcast')</title>
@include('layouts.head')
<!-- END: Head -->
<body class="main">
<!-- BEGIN: Mobile Menu -->
@include('layouts.mobilemenu')
<!-- END: Mobile Menu -->
<!-- BEGIN: Top Bar -->
@include('layouts.topbar')
<!-- END: Top Bar -->
<div class="wrapper">
<div class="wrapper-box">
<!-- BEGIN: Side Menu -->
@include('layouts.sidemenu')
<!-- END: Side Menu -->
<!-- BEGIN: Content -->
@yield('content')
<!-- END: Content -->
</div>
</div>
<!-- BEGIN: JS Assets-->
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=["your-google-map-api"]&libraries=places"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.28/moment-timezone-with-data-10-year-range.min.js"></script>
<script src="js/adzan/Adhan.js"></script>
<script src="js/app.js"></script>
<!-- END: JS Assets-->
</body>
</html>
这是head.blade.php的代码:
<head>
<meta charset="utf-8">
<link href="images/logo.svg" rel="shortcut icon">
<title>Dashboard</title>
<!-- BEGIN: CSS Assets-->
<link rel="stylesheet" href="css/app.css" />
<!-- END: CSS Assets-->
</head>
这里是userupdate.blade.php的代码:
@extends('layouts.main')
@section('title','Add User Form - Auto \'Ilan')
@section('content')
<div class="content">
<div class="intro-y flex items-center mt-8 p-2">
<h2 class="text-lg font-medium mr-auto">
Tambahkan Pengguna
</h2>
</div>
<div class="intro-y col-span-12 lg:col-span-6">
<!-- BEGIN: Form Layout -->
<form action="{{ route('updateuser') }}" method="POST">
@csrf
@method('PUT')
<div class="intro-y box p-5">
<div>
<label for="role" class="form-label pt-2 pb-1">Pilih Role Akun</label>
<select class="form-select mt-2 sm:mr-2" name="role" id="role">
<option value="ospeta">OSPETA</option>
<option value="staf">Guru dan Staff</option>
<option value="admin">Admin</option>
</select>
</div>
<div>
<div class="mt-3"> <label for="name" class="form-label">Nama Kepemilikan</label> <input name="name" id="name" type="text" class="form-control" placeholder="Nama Pemilik Akun (opsional)" value="{{ $users->name }}"></div>
</div>
<div class="mt-3">
<div class="mt-3"> <label for="email" class="form-label">Email</label> <input id="email" name="email" type="email" class="form-control" placeholder="Masukan Email (opsional)" value="{{ $users->email }}"></div>
</div>
<div class="mt-3">
<div class="mt-3"> <label for="username" class="form-label">Username</label> <input id="username" name="username" type="text" class="form-control" placeholder="Pilih Nama Yang unik" value="{{ $users->username }}"></div>
</div>
<div class="mt-3">
<div class="mt-3"> <label for="password" class="form-label">Password</label> <input id="password" name="password" type="password" class="form-control" placeholder="Pilih Password yang Mudah Dihafal" value="{{ $users->password }}"></div>
</div>
<div class="text-right mt-5">
<button type="submit" class="btn btn-primary w-24">Simpan</button>
</div>
</div>
</form>
<!-- END: Form Layout -->
</div>
</div>
@endsection
截图如下: enter image description here 请帮帮我,我真的不知道该怎么办。
在所有资产文件中使用 asset()
函数,例如:css、js 和图像。
<head>
<meta charset="utf-8">
<link href="{{ asset('images/logo.svg') }}" rel="shortcut icon">
<title>Dashboard</title>
<!-- BEGIN: CSS Assets-->
<link rel="stylesheet" href="{{ asset('css/app.css') }}" />
<!-- END: CSS Assets-->
</head>