php 如何在 Laravel 5.1 项目中链接外部 CSS 和脚本（资产）

How to link external CSS and Script (assets) in Laravel 5.1 project

提问by Josh L. Minga

Hi guys am new to Laravel and this is my first project to do in laravel, I had trouble linking my assets(CSS & Js) file on my views.. I did a research an found if I will use {{URL::asset('assets/plugins/bootstrap/css/bootstrap.min.css')}}in Laravel 5.1 it will work. I did succeed when it was just a single link, but when I add other links..

大家好，我是 Laravel 的新手，这是我在 Laravel 中做的第一个项目，我无法在我的视图中链接我的资产（CSS 和 Js）文件。我做了一项研究，发现如果我将{{URL::asset('assets/plugins/bootstrap/css/bootstrap.min.css')}}在 Laravel 5.1 中使用它会起作用. 当它只是一个链接时我确实成功了，但是当我添加其他链接时..

<link rel="stylesheet" href="{{URL::asset('assets/plugins/animate.css')}}">
<link rel="stylesheet" href="{{URL::asset('assets/plugins/line-icons/line-icons.css')}}">
<link rel="stylesheet" href="{{URL::asset('assets/plugins/parallax-slider/css/parallax-slider.css')}}">
<link rel="stylesheet" href="{{URL::asset('assets/css/custom.css')}}">

The server denied the access to all files in assets folder Access forbidden!. My .htaccess file code is..

服务器拒绝访问 assets 文件夹中的所有文件Access forbidden!。我的 .htaccess 文件代码是..

<IfModule mod_rewrite.c>
<IfModule mod_negotiation.c>
    Options -MultiViews
</IfModule>
RewriteEngine On

# Redirect Trailing Slashes If Not A Folder...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)/$ / [L,R=301]

# Handle Front Controller...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]
</IfModule>

Question is if .htaccess file had a problem why when I put one asset link it accept? Or what is the proper way of linking the files? Am using XAMPP as my local server. *Guy I just learned Laravel yesterday so be easy on me... Thanks in advance

问题是如果 .htaccess 文件有问题，为什么当我放置一个资产链接时它会接受？或者链接文件的正确方法是什么？我使用 XAMPP 作为我的本地服务器。*伙计，我昨天刚学了 Laravel，所以请对我放轻松...提前致谢

采纳答案by Josh L. Minga

Thanks guys for a help I did solve my problem.

谢谢你们的帮助，我确实解决了我的问题。

1. I went again at http://laravel.com/docs/5.1/helpers#method-asset
   • there I found they say $url = asset('img/photo.jpg');will give me the url to my asset file.

2. So I Route...

   Route::get('check', function () {
   
   $url = asset('assets/css/headers/header-default.css');
   
   return $url;
   }); 
   

   I got the link http://localhost/Dentist/public/assets/css/headers/header-default.css

3. So i just violate the rule if there was any and I did this in my stylesheet.

1. 我又去了 http://laravel.com/docs/5.1/helpers#method-asset
   • 在那里我发现他们说$url = asset('img/photo.jpg');会给我我的资产文件的网址。

2. 所以我路由...

   Route::get('check', function () {
   
   $url = asset('assets/css/headers/header-default.css');
   
   return $url;
   }); 
   

   我得到了链接 http://localhost/Dentist/public/assets/css/headers/header-default.css

3. 所以我只是违反了规则，如果有的话，我在我的样式表中做了这个。

<link rel="stylesheet" href="<?php echo $url = asset('assets/css/style.css'); ?>">

<link rel="stylesheet" href="<?php echo $url = asset('assets/css/style.css'); ?>">

--> ** Apart from that you can do this **

--> ** 除此之外你可以这样做**

{!!asset('assets/plugins/jquery/jquery.min.js')!!}

because as the said if you use blade, then there is no need of using <?php echo ; ?>command... so I replaced <?php echo $url = ; ?>with {!! asset('assets/css/...') !!}Make sure your files are in public/assets/directory

因为如前所述，如果您使用刀片，则不需要使用<?php echo ; ?>命令...所以我替换<?php echo $url = ; ?>为{!! asset('assets/css/...') !!}确保您的文件在public/assets/目录中

Thanks all

谢谢大家

回答by

You can use laravel blade template method

您可以使用 laravel 刀片模板方法

{!! HTML::style('css/style.css') !!}

{!! HTML::script('js/script.js') !!}

Note :you should add css files into public folder means in my example it will be like public/cssfolder. same will be applied to jquery files also.

注意：您应该将 css 文件添加到 public 文件夹中，这意味着在我的示例中它将类似于public/css文件夹。同样将应用于 jquery 文件。

also you can add following way if you are using online links

如果您使用在线链接，也可以添加以下方式

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

or else

要不然

<link rel="stylesheet" href="{{ URL::asset('css/style.css') }}" />
<script type="text/javascript" src="{{ URL::asset('js/jquery.js') }}"></script>

回答by mdamia

try this and replace css with your folder name.

试试这个并用你的文件夹名称替换 css 。

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

回答by Naing Win

Use Laravel Collective HTML Package

使用Laravel 集体 HTML 包

After installed this package you can use like this

安装此软件包后，您可以像这样使用

{!! Html::style('your/css/file.css') !!}
{!! Html::script('your/js/file.js') !!}
{!! Html::image('your/image/file.jpg') !!}

回答by ARIF MAHMUD RANA

When adding assets it's best to use assets helper http://laravel.com/docs/5.1/helpers#urls

添加资产时最好使用资产助手 http://laravel.com/docs/5.1/helpers#urls

For external

对于外部

<link rel="stylesheet" href="{{asset('//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css')}}">

and also laravel ships with an htaccess file try replace it with yours https://github.com/laravel/laravel/blob/master/public/.htaccess

并且 Laravel 附带一个 htaccess 文件尝试用你的https://github.com/laravel/laravel/blob/master/public/.htaccess替换它

Also give correct permissions to your directories

还要为您的目录提供正确的权限

Folders 755

Files 644

Apart from;

app/storage 777 (or 755 with owner as webserver user)

回答by CodeToLife

In my case me looked upper of the place dropped the error. I found me has missed a " ' " character in a same looked declaration:

在我的情况下，我看着上面的地方丢弃了错误。我发现我在同一个外观声明中遗漏了一个“'”字符：

<script src="{{asset('js/bootstrap.min.js)}}"></script>

somewhere up there. As you can see there missed character " ' " after ".js" So that all underneath declarations havent " ' " pair until this error place

那里的某个地方。正如你所看到的，在“.js”之后有遗漏的字符“'”所以所有下面的声明都没有“'”对，直到这个错误位置