Laravel 5 从视图中要求 CSS 文件的正确方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42531124/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Laravel 5 proper way to require CSS file from view
提问by Denis Sheremet
I've got specific Formcomponent, which is declared as
我有特定的Form组件，它被声明为
Form::component('fcRadio', 'components.form.fcradio', ['name', 'options', 'selected' => null]);
and used as
并用作
{{ Form::fcRadio('name', $options }}
What I want is somehow attach custom CSS file, so if the page fires this component at least once, the desired CSS file is included to the <head>of my document.
我想要的是以某种方式附加自定义 CSS 文件，因此如果页面至少触发此组件一次，所需的 CSS 文件将包含在<head>我的文档中。
For example, in Joomla it was like
例如，在 Joomla 中就像
$this->document->addStylesheet('my_awesome_style.css');
Is there any way to achieve the same in Laravel?
有没有办法在 Laravel 中实现相同的目标？
UPD:
更新：
I've extended the answers below a bit to let it add multiple styles from multiple templates. Finally, it looks like this:
我已经稍微扩展了下面的答案，让它从多个模板添加多种样式。最后，它看起来像这样：
@section('styles')
@parent
{{HTML::style('css/fcradio.css')}}
@stop
It works fine, but if I use the component twice per page, style is also adds twice. How can I allow multiple but unique entries?
它工作正常，但如果我每页使用该组件两次，样式也会添加两次。如何允许多个但唯一的条目？
采纳答案by Denis Sheremet
I've finally found a bit tricky but working solution:
我终于找到了一个有点棘手但有效的解决方案：
@hasSection('fcRadioStyle')
@else
@section('fcRadioStyle')
{{Html::style('css/components/fcradio.css')}}
@stop
@section('styles')
@yield('fcRadioStyle')
@append
@endif
This makes by Form::fcRadioappend this style only once
这使得Form::fcRadio这种样式只附加一次
回答by Mark
So this is typically how I deal with it:
所以这通常是我处理它的方式：
In your folder: resources/viewsI create a folder called layout. This folder handles the templates for all my pages.
在您的文件夹中：resources/views我创建了一个名为layout. 这个文件夹处理我所有页面的模板。
Then I create a file called default.blade.php. In it I put the bulk of the HTML code. Here's an example of how default.blade.phpcould look (slimmed down, obviously)
然后我创建一个名为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>
Right, so essentially what we have so far is the @yield()and asset()helpers.
是的@yield()，到目前为止，我们所拥有的基本上是和asset()助手。
@yield()is special blade syntax that Laravel uses to say, "Okay. Any time a blade view that is inheriting THIS master template calls the section named in this @yield()I will display that content right here.
@yield()是 Laravel 使用的特殊刀片语法，“好吧。任何时候继承此主模板的刀片视图调用在此命名的部分时，@yield()我都会在此处显示该内容。
asset()is a nifty little helper that basically appends your URL structure onto the string you pass it. So if your url is http://MyGreatSite.comand you use asset('js/script.js')it will spit out a fully qualified URL that will work anywhere on the site (http://MyGreatSite.com/js/script.js). asset()is great because you can use it in blade templates that will get sent out as an email and all of the files will work in an email inbox because they are absolute links.
asset()是一个漂亮的小助手，它基本上将您的 URL 结构附加到您传递的字符串上。因此，如果您的 url 是http://MyGreatSite.com并且您使用asset('js/script.js')它，它将吐出一个完全合格的 URL，该 URL 可以在网站的任何地方使用 ( http://MyGreatSite.com/js/script.js)。asset()很棒，因为您可以在刀片模板中使用它，这些模板将作为电子邮件发送，并且所有文件都可以在电子邮件收件箱中使用，因为它们是绝对链接。
Right. So now we have this master template and we need to use it. So what I do is create another view in the resources/viewsdirectory. Lets say we're doing a contact page. I would make contact.blade.php. Now I want to inherit that master template we created. So we do that like so:
对。所以现在我们有了这个主模板，我们需要使用它。所以我所做的是在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
Okay, so, first things first. At the very top we tell this blade file that we want to use the template we just made. We use the blade helper @extends()and pass it the path to our view relative to the viewsdirectory separated by periods.
好的，所以，首先要做的事情。在最顶部，我们告诉这个刀片文件我们要使用我们刚刚制作的模板。我们使用刀片助手@extends()并将路径传递给我们的视图，该路径相对于views由句点分隔的目录。
Next, we want to create the sections that correspond to the template. We do that by opening the section with @section()and passing the name of the section we want to push this block of content to. We write our content and then we close the section by using @stop. Pretty simple. For images, css, or js, we simply use the asset()helper again.
接下来，我们要创建与模板对应的部分。我们通过打开部分@section()并传递我们想要将此内容块推送到的部分的名称来做到这一点。我们编写我们的内容，然后使用@stop. 很简单。对于图像、css 或 js，我们只需asset()再次使用helper。
I know it's a little long-winded, but hopefully that helps and explains the process a little better.
我知道这有点啰嗦，但希望这能帮助并更好地解释这个过程。
tl;dr:Use @yield(), @section(), and asset().
TL;博士：使用@yield()，@section()和asset()。
回答by Dave3of5
So I think I understand what you are saying.
所以我想我明白你在说什么。
In your blade layout file create a section inside the head:
在您的刀片布局文件中，在头部内创建一个部分：
<head>
@yield('componentcss')
</head>
And in the component do:
并在组件中执行以下操作：
@section('componentcss')
{{HTML::style('css/fcradio.css')}}
@stop
You could also just include the css but I wouldn't advise this:
您也可以只包含 css，但我不建议这样做：
@section('componentcss')
<style>
.exampleclass {text-align:center;}
</style>
@stop
Hopefully I have understood you correctly.
希望我已经正确理解了你。
