我想自定義我的laravel應用程序的登錄頁面的外觀。 這裏是我的文件內容結構:Laravel 5.4無法添加自定義CSS佈局/ appl.blade
在佈局/ app.blade.php文件我想添加一個「app.min.1.css」 css文件:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- CSS -->
<link href="{{ asset('templates/admin/Template/css/app.min.1.css') }}" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- Scripts -->
<script>
window.Laravel = {!! json_encode([
'csrfToken' = > csrf_token(),
]) !!};
</script>
</head>
所以它的app.min.css,但是當我去跑我的應用程序得到一個解析錯誤如下:
該文件是存在的,我並驗證它,通過創建斯坦單獨視圖以查看是否所有的CSS文件和JS文件被正確加載:
所有我試圖做的是使用現有的Auth頁面由laravel提供,但給他們我自己的外觀和感覺。是否有可能添加自己的CSS和JS文件?
下面是app.blade代碼:
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- CSS -->
<link href="{{ asset('templates/admin/Template/css/app.min.1.css') }}" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- Scripts -->
<script>
window.Laravel = {!! json_encode([
'csrfToken' = > csrf_token(),
]) !!};
</script>
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
@if (Auth::guest())
<li><a href="{{ route('login') }}">Login</a></li>
<li><a href="{{ route('register') }}">Register</a></li>
@else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
@endif
</ul>
</div>
</div>
</nav>
@yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
here is the code for the auth/login/blade:
@extends('layouts.app')
@section('content')
<div class="login" data-lbg="teal">
<!-- Login -->
<div class="l-block toggled" id="l-login">
<div class="lb-header palette-Teal bg">
<i class="zmdi zmdi-account-circle"></i>
Salve! Per favore effettui il login
</div>
<form class="form-horizontal" role="form" method="POST" action="{{ route('login') }}">
{{ csrf_field() }}
<div class="lb-body">
<div class="form-group fg-float">
<div class="fg-line">
<input type="text" class="input-sm form-control fg-input">
<label class="fg-label">Indirizzo Email</label>
</div>
</div>
<div class="form-group fg-float ">
<div class="fg-line">
<input type="password" class="input-sm form-control fg-input">
<label class="fg-label">Password</label>
</div>
</div>
<button class="btn palette-Teal bg">Entra</button>
<div class="m-t-20">
<a data-block="#l-register" data-bg="blue" class="palette-Teal text d-block m-b-5" href="">Crea un Account</a>
<a data-block="#l-forget-password" data-bg="purple" href="" class="palette-Teal text">Password Dimenticata?</a>
</div>
</div>
</form>
</div>
</div>
@endsection
哎呀你是對的!爲什麼這總是發生,真是令人沮喪......無論如何,謝謝。 – Salvo
編程的喜悅:) – avonnadozie
如果您認爲這是事實,您應該接受這個答案是正確的。 –