在应用中引入站内或站外的css和js文件是一项基本需求,Laravel 5提供了多种方式来引入css和js,今天我们就来讨论这个问题。
1、HtmlBuilder
在Laravel 5之前我们使用内置的 HtmlBuilder
来添加样式和脚本文件,但是在 Laravel 5 将 HtmlBuilder
从核心中移除出去了,所以 HTML::style()
不再有效。如果你想要在 Laravel 5 中继续使用需要手动引入 illuminate/html
这个包。
我们还是通过Composer来安装:
composer require illuminate/html 5.*
安装完成后需要在config/app.php
中注册服务提供者到providers
数组:
Illuminate\Html\HtmlServiceProvider::class,
同时注册门面到aliases
数组:
'Html' => Illuminate\Html\HtmlFacade::class, 'Form' => Illuminate\Html\FormFacade::class,
接下来你就可以在视图文件中使用如下方式来引入css和js文件了:
{!!Html::style('css/style.css')!!} {!!Html::script('js/script.js')!!}
注:站内文件默认相对于web根目录,也就是
public
目录
如果要引入站外文件,可以这么实现:
{!!Html::style('//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css')!!} {!!Html::script('//code.angularjs.org/1.2.13/angular.js')!!}
2、URL::asset()
此外,还可以使用内置的URL
类上的asset()
方法来引入css和js文件。
引入站内css和js:
<link rel="stylesheet" href="{{ URL::asset('css/bootstrap.css') }}"> <script type="text/javascript" src="{{ URL::asset('js/jquery.min.js') }}"></script>
注:默认相对于web根目录,也就是
public
目录
引入站外css和js:
<link rel="stylesheet" href="{{ URL::asset('//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css') }}"> <script type="text/javascript" src="{{ URL::asset('//code.angularjs.org/1.2.13/angular.js') }}"></script>
来学习,求携带!
FormFacade 中value值怎么传,比如这样:value=”{{ old(’email’) }}”。安装文章这么写会报错{!! Form::email(’email’,’old(’email’)’ !!}. 用单引号报错,用双引号输出字符串。
{{asset(‘/path/to/js/js.name’)}},5.2这样写就可以了