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

【问题标题】：Laravel 5 proper way to require CSS file from viewLaravel 5从视图中要求CSS文件的正确方法
【发布时间】：2017-07-20 17:52:20
【问题描述】：

我有特定的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 中达到同样的效果吗？

UPD：

我已经扩展了下面的答案，让它从多个模板中添加多个样式。最后，它看起来像这样：

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

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

【问题讨论】：

这应该在客户端使用 javascript/jQuery 处理。这对你来说是一个选择吗？
@Rahi 为什么你认为这应该在客户端？
因为您想添加到标记，除非您可以将其添加到中。
@Rahl 好吧，laravel 中的部分允许将内容添加到 head 以及 joomla 中的 $this->document->addStyleshee，所以我只是看不到问题所在。您可以查看下面的答案。

标签： laravel laravel-5 blade

【解决方案1】：

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

在您的文件夹中：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 结构附加到你传递给它的字符串上。因此，如果您的 url 是 http://MyGreatSite.com 并且您使用 asset('js/script.js')，它将输出一个完全限定的 URL，该 URL 可以在站点上的任何位置使用 (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:contact@mygreatsite.com">contact@mygreatsite.com</a>
    </p>

    @stop


    @section('js')

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

    @stop

好的，所以，第一件事。在最顶部，我们告诉这个刀片文件我们要使用我们刚刚制作的模板。我们使用刀片助手 @extends() 并将其传递给我们的视图相对于 views 目录的路径，以句点分隔。

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

我知道这有点啰嗦，但希望这有助于并更好地解释这个过程。

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

【讨论】：

感谢您的回答，我已更新我的问题以显示应用此解决方案后出现了新问题。

【解决方案2】：

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

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

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

在组件中做：

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

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

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

希望我理解正确。

【讨论】：

感谢您的回答，我已更新我的问题以显示应用此解决方案后出现了新问题。
@DenisSheremet 如果它回答了您的问题，您应该已经接受了答案。然后开了一个新问题，用于后续问题。
@Anthony 下面这个问题我自己回答了，但是由于SO限制无法接受，现在接受了，谢谢提醒。

【解决方案3】：

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

@hasSection('fcRadioStyle')
@else

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

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

@endif

这使得 Form::fcRadio 只附加一次该样式

【讨论】：