Laravel需要從視圖中的CSS文件5有道

我有具體Form成分，它被聲明爲Laravel需要從視圖中的CSS文件5有道

Form::component('fcRadio', 'components.form.fcradio', ['name', 'options', 'selected' => null]);

，並作爲

{{ Form::fcRadio('name', $options }}

我想是某種附加自定義CSS文件，因此如果頁面至少觸發一次該組件，則所需的CSS文件將包含在我的文檔的<head>中。

例如，在的Joomla它就像

$this->document->addStylesheet('my_awesome_style.css');

有沒有辦法實現Laravel一樣嗎？

UPD：

我下面延伸了一下答案，讓它從多個模板添加多個樣式。最後，它看起來像這樣：

@section('styles') 
@parent 
{{HTML::style('css/fcradio.css')}} 
@stop

它工作正常，但如果我每次使用該組件兩次，樣式也添加了兩次。我如何允許多個但唯一的條目？

來源

2017-03-01 Denis Sheremet

這應該在客戶端使用javascript/jQuery的處理。這對你來說是一種選擇嗎？ – Rahi

@Rahi你爲什麼認爲這應該在客戶端？ –

因爲您想添加到標記，除非您可以將其添加到。 – Rahi

所以我想我明白你在說什麼。

在您的刀片佈局文件創建頭內部分：

<head> 
    @yield('componentcss') 
</head>

而在組件做：

@section('componentcss') 
{{HTML::style('css/fcradio.css')}} 
@stop

你也可以只包括CSS，但我不會建議此：

@section('componentcss') 
<style> 
    .exampleclass {text-align:center;} 
</style> 
@stop

希望我已經正確理解了你。

來源

2017-03-01 12:08:18 Dave3of5

感謝您的回答，我已更新我的問題以顯示應用此解決方案後出現的新問題。 –

所以這通常是我如何處理它：

在你的文件夾：resources/views我創建一個名爲layout文件夾。該文件夾處理我所有頁面的模板。

然後我創建一個名爲default.blade.php的文件。其中我放了大量的HTML代碼。這裏有一個如何default.blade.php可以看一個例子（精簡下來，很明顯）

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="x-ua-compatible" content="ie=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 

     <title> 
     @yield('title') 
     </title> 

     <link rel="stylesheet" href="{{ asset('css/main.css') }}"> 

     <!-- Additional per-page css --> 
     @yield('css') 
    </head> 

    <body> 

     @yield('content') 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
     <script src="js/script.js"></script> 
     <script src="{{ asset('js/bootstrap.min.js') }}"></script> 

     <!-- Include per-page JS --> 
     @yield('js') 
    </body> 

    </html>

對，所以基本上就是我們至今是@yield()和asset()幫手。

@yield()是Laravel使用地說，「好了，任何時候，在繼承這個主模板刀片視圖調用此@yield()命名的部分，我會在這裏顯示的內容特種刀片語法。

asset()是一個漂亮的小助手，基本上將你的URL結構附加到你傳遞它的字符串上。因此，如果您的網址爲http://MyGreatSite.com，並且您使用asset('js/script.js')，它將會提供可在網站任何位置工作的完全限定網址（http://MyGreatSite.com/js/script.js）。 asset()非常棒，因爲您可以在刀片模板中使用它，它將作爲電子郵件發送出去，並且所有文件都可以在電子郵件收件箱中使用，因爲它們是絕對鏈接。

對。所以現在我們有這個主模板，我們需要使用它。因此，我所做的是在resources/views目錄中創建另一個視圖。可以說我們正在做一個聯繫頁面。我會讓contact.blade.php。現在我想繼承我們創建的主模板。所以我們這樣做：

@extends('layout.default) 

    @section('css') 
    <link rel="stylesheet" href="{{ asset('css/contact.css') }}"> 
    @stop 


    @section('title') 

    Contact Us 

    @stop 


    @section('content') 

    <h1>Contact us</h1> 

    <p> 
    Contact us via email: <a href="mailto:[email protected]">[email protected]</a> 
    </p> 

    @stop 


    @section('js') 

    <script src="{{ asset('js/contact-form.js') }}"></script> 

    @stop

好的，所以，第一件事是第一件事。在最頂端，我們告訴這個刀片文件，我們要使用我們剛製作的模板。我們使用刀片助手@extends()並將它傳遞給我們視圖的路徑，相對於由句點分隔的views目錄。

接下來，我們要創建與模板對應的部分。我們通過打開部分@section()並傳遞我們想要推送這個內容塊的部分的名稱來實現。我們編寫我們的內容，然後通過使用@stop關閉該部分。很簡單。對於圖片，CSS或js，我們只需再次使用asset()助手。

我知道這有點囉嗦，但希望這有助於解釋過程更好一點。使用@yield(),@section()和asset()。

來源

2017-03-01 15:38:05 Mark

感謝您的回答，我已更新我的問題以顯示應用此解決方案後出現的新問題。 –

我終於找到了一個有點棘手，但工作液：

@hasSection('fcRadioStyle') 
@else 

@section('fcRadioStyle') 
{{Html::style('css/components/fcradio.css')}} 
@stop 

@section('styles') 
@yield('fcRadioStyle') 
@append 

@endif

這使得通過Form::fcRadio追加這種風格只有一次

來源

2017-03-02 10:36:42

Laravel需要從視圖中的CSS文件5有道

回答

相關問題