Laravel 5 从视图中要求 CSS 文件的正确方法

Question

我有特定的 Form 组件，声明为

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 中实现同样的效果吗？

更新：

我对下面的答案进行了一些扩展，让它从多个模板中添加多种样式。最后，它看起来像这样：

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

它工作正常，但如果我每页使用该组件两次，样式也会添加两次。如何允许多个但唯一的条目？

Answer 1

所以我想我明白你在说什么了。

在您的 blade 布局文件中，在头部创建一个部分：

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

并在组件中执行：

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

您也可以只包含 css，但我不建议这样做：

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

希望我理解正确。

Answer 2

所以我通常是这样处理的：

在您的文件夹中：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() 是特殊的 blade 语法，Laravel 用来表示“好的。任何时候继承此主模板的 blade 视图调用名为的部分在此 @yield() 我将在此处显示该内容。

asset() 是一个漂亮的小帮手，它基本上将 URL 结构附加到您传递给它的字符串上。因此，如果您的 url 是 http://MyGreatSite.com 并且您使用 asset('js/script.js')，它将吐出一个完全合格的 URL，可以在站点的任何地方工作 (http://MyGreatSite.com/js/script.js)。 asset() 很棒，因为您可以在 blade 模板中使用它，这些模板将作为电子邮件发送出去，所有文件都可以在电子邮件收件箱中使用，因为它们是绝对链接。

没错。所以现在我们有了这个主模板，我们需要使用它。所以我所做的是在 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:contact@mygreatsite.com">contact@mygreatsite.com</a>
    </p>

    @stop


    @section('js')

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

    @stop

好吧，那么，首先要做的是。在最顶部，我们告诉这个 blade 文件我们想要使用我们刚刚制作的模板。我们使用 blade 助手 @extends() 并将相对于 views 目录的视图路径传递给它，并以句点分隔。

接下来，我们要创建与模板对应的部分。我们通过使用 @section() 打开该部分并传递我们要将此内容块推送到的部分的名称来做到这一点。我们编写内容，然后使用 @stop 关闭该部分。很简单。对于图像，css，或者 js，我们只需再次使用 asset() 助手。

我知道有点 long-winded，但希望这有助于更好地解释该过程。

tl;dr: 使用 @yield()、@section() 和 asset().

Answer 3

我终于找到了一个有点棘手但可行的解决方案：

@hasSection('fcRadioStyle')
@else

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

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

@endif

这使得 Form::fcRadio 仅附加此样式一次

Laravel 5 从视图中要求 CSS 文件的正确方法

Laravel 5 proper way to require CSS file from view

laravel

blade

laravel-5