在Laravel视图中使用CSS?

我刚开始学习Laravel,可以做一个控制器和路由的基础知识。

我的操作系统是Mac OS X Lion,它在MAMP服务器上。

我的代码从routes.php:

Route::get('/', function() { return View::make('home.index'); }); Route::get('businesses', function() { return View::make('businesses.index'); }); Route::get('testing', function() { return View::make('testing.index'); }); Route::get('hello', function() { return "<h3>Hello world!</H3>"; }); 

这是有效的,视图显示完美,但是我想尝试做的是在视图中包含CSS,我尝试添加到目录中的样式表的链接,但是该页面显示为默认的浏览器字体虽然CSS是在HTML!

这是来自views文件夹中的商家的index.php:

 <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <p>Business is a varied term. My content here. 

我尝试使用我的其他视图文件夹(testing)中的刀片模板引擎来显示CSS,但CSS仍然不显示,尽pipe它在testing文件夹!

我怎么能克服这个问题,变得更好 – 正如我慢慢学习这个框架。

把你的资产放在公共文件夹中

 public/css public/images public/fonts public/js 

而他们用Laravel来称呼它

 {{ HTML::script('js/scrollTo.js'); }} {{ HTML::style('css/css.css'); }} 

把你的资产放在公共文件夹中

 public/css public/images public/fonts public/js 

然后用Laravel调用它

 {{ URL::asset('js/scrollTo.js'); }} // Generates the path to public directory public/js/scrollTo.js {{ URL::asset('css/css.css'); }} // Generates the path to public directory public/css/css.css 

(要么)

 {{ HTML::script('js/scrollTo.js'); }} // Generates the path to public directory public/js/scrollTo.js {{ HTML::style('css/css.css'); }} // Generates the path to public directory public/css/css.css 

您的css文件属于公用文件夹或其子文件夹。

如果你把你的CSS

 public/css/common.css 

你会用

 HTML::style('css/common.css'); 

在您的刀片视图中…

或者你也可以使用资产类http://laravel.com/docs/views/assets

你也可以编写一个简单的链接标签,正常情况下,然后在href attr使用:

 <link rel="stylesheet" href="<?php echo asset('css/common.css')?>" type="text/css"> 

当然你需要把你的css文件放在public / css下

我们可以通过以下方式来做到这一点。

 <link href="{{ asset('/css/style.css') }}" rel="stylesheet"> {{ HTML::style('css/style.css', array('media' => 'print')) }} 

它将searchLaravel公用文件夹中的样式文件,然后将其渲染。

像Ahmad Sharif提到的,你可以通过http链接样式表

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

但是如果您使用的是https那么请求将被阻止,并出现混合内容错误,通过https使用它使用secure_asset

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

https://laravel.com/docs/5.1/helpers#method-secure-asset

由于Laravel 5的HTML类不再被默认包含在内。

如果您使用表单或HTML帮助程序,您将看到一个错误,指出未find类“表单”或未find类“Html”。 Form和HTML帮助程序在Laravel 5.0中已被弃用; 然而,还有社区驱动的替代品,比如Laravel集体维护的替代品。

您可以使用以下行来包含您的CSS或JS文件:

 <link href="{{ URL::asset('css/base.css') }}" rel="stylesheet"> <link href="{{ URL::asset('js/project.js') }}" rel="script"> 

这是不可能的兄弟,Laravel假设一切都在公共文件夹。

所以我的build议是:

  1. 转到公用文件夹。
  2. 创build一个文件夹,最好命名为css
  3. 创build相应的视图的文件夹,使事情组织。
  4. 把各自的CSS放在这些文件夹内,这对你来说会更容易。

要么

如果你真的坚持把CSS放在视图文件夹中,你可以尝试从你的css文件夹目录创build符号链接 (你是mac,所以这是可以的,但对于Windows,这只适用于Vista,Server 2008或更高版本)文件夹,你可以在你的视图文件中使用{{HTML::style('your_view_folder/myStyle.css')}} ,这里是一个代码,为了方便,在你发布的代码中,把这些放在return View::make()

 $css_file = 'myStyle.css'; $folder_name = 'your_view_folder'; $view_path = app_path() . '/views/' . $folder_name . '/' . $css_file; $public_css_path = public_path() . '/' . $folder_name; if(file_exists($public_css_path)) exec('rm -rf ' . $public_css_path); exec('mkdir ' . $public_css_path); exec('ln -s ' . $view_path .' ' . $public_css_path . '/' . $css_file); 

如果你真的想尝试做你的想法,试试这个:

 <link rel="stylesheet" href="<?php echo app_path() . 'views/your_view_folder/myStyle.css'?>" type="text/css"> 

但即使文件目录是正确的,因为Laravel不会为了安全目的而这样做,Laravel也不会那么有效。

把你的CSS文件在公用文件夹。 (public / css / bootstrap-responsive.css)和<link href="./css/bootstrap-responsive.css" rel="stylesheet">

更新laravel 5.4 —-

所有的答案已经使用了laravel的HTML类,但我想现在已经在laravel 5.4中折旧了,所以把你的css和js文件放在public-> css / js中然后在你的html中引用它们

 <link href="css/css.common.css" rel="stylesheet" > 

将要包含的css或js文件复制到公用文件夹,或者您可能希望将这些文件存储在public / css或public / js文件夹中。

例如。 你正在使用公共目录中的css文件夹的style.css文件,然后你可以使用

<link rel="stylesheet" href="{{ url() }}./css/style.css" type="text/css"/>

但在Laravel 5.2中,您将不得不使用

 <link rel="stylesheet" href="{{ url('/') }}./css/style.css" type="text/css"/> 

如果你想包含来自public / js文件夹的JavaScript文件,这也相当简单

 <script src="{{ url() }}./js/jquery.min.js"></script> 

在Laravel 5.2中你将不得不使用

 <script src="{{ url('/') }}./js/jquery.min.js"></script> 

函数url()是一个laravel帮助器函数,它将生成给定path的完全限定的URL。

对于Laravel 5.4,如果你正在使用混合助手,请使用

  <link href="{{ mix('/css/app.css') }}" rel="stylesheet"> <script src="{{ mix('/js/app.js') }}"></script> 

把它们放在public文件夹中,并在视图中用类似于href="{{ asset('public/css/style.css') }}"调用它。 请注意,您拨打资产时应该包括public

把你的CSS放在公用文件夹中,然后

添加这个在你的刀片文件

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

我认为最好的select路由到CSS&JS使用下面的代码:

 <link rel="stylesheet" type="text/css" href="{{ URL::to('route/to/css') }}"> 

所以如果你在公用文件夹的css文件夹里面有一个名为main.css的css文件,应该是这样的:

 <link rel="stylesheet" type="text/css" href="{{ URL::to('css/main.css') }}">