2017-08-02 110 views
0

我想自定義我的laravel應用程序的登錄頁面的外觀。 這裏是我的文件內容結構:Laravel 5.4無法添加自定義CSS佈局/ appl.blade

enter image description here

在佈局/ 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,但是當我去跑我的應用程序得到一個解析錯誤如下:

enter image description here

該文件是存在的,我並驗證它,通過創建斯坦單獨視圖以查看是否所有的CSS文件和JS文件被正確加載:

enter image description here

所有我試圖做的是使用現有的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"> 
          &nbsp; 
         </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 

回答

1

這裏有一個錯誤。

'csrfToken' = > csrf_token(),

<script> 
    window.Laravel = {!! json_encode([ 
      'csrfToken' => csrf_token(), 
    ]) !!}; 
</script> 
+0

哎呀你是對的!爲什麼這總是發生,真是令人沮喪......無論如何,謝謝。 – Salvo

+0

編程的喜悅:) – avonnadozie

+1

如果您認爲這是事實,您應該接受這個答案是正確的。 –

1

刪除=>之間的空間你來到這裏的額外空間:

   'csrfToken' = > csrf_token(), 

修復,使其:

   'csrfToken' => csrf_token(),