html模板引入php文件路径,laravel引入外部模板文件的路径问题

我们使用外部的模板文件比自己写前端模板更方便。一般，下载的模板文件结构类似如下：

assets

font

entypo.ttf

css

style.css

bootstrap.css

img

bg1.jpg

bg2.jpg

js

button

button.css

button.js

tip

tip.css

tip.js

jquery.js

app.js

index.html

login.html

如果就这样访问html文件，当然一切都正常。

但是，在laravel中

Public 目录 public 目录包含了入口文件 index.php ，它是进入应用程序的所有请求的入口点。此目录还包含了一些你的资源文件(如图片、JavaScript 和 CSS)。

Resources 目录 resources 目录包含了视图和未编译的资源文件(如 LESS、SASS 或 JavaScript)。此目录还包含你所有的语言文件。

所以需要将index.html文件改写成index.blade.php文件，并放在Resources /views目录或更深层目录中。

这样运行时，视图文件和js，css文件并不在同一目录，当然未将文件引入成功。

我们将路径

“assets/css/style.css"改成”/assets/css/style.css"

“assets/js/app.js"改成”/assets/js/app.js"

这样就能引入css和js文件，这样就将相对路径改为了绝对路径，"/"是相当于站点根目录。

当然，也可以改成带域名的形式{{asset('assets/css/style.css')}}的形式也可以引入文件成功。

但是这没完，由于存在嵌套引用问题。

比如：

button.js和tip.js文件也没引用成功。同时，js文件内部也有路径引用问题。

$("#button-bg").click(function() {

$("body").css({

"background": "url('assets/img/bg1.jpg')"

});

});

这将导致js文件没有将图片引用成功，也需要修改图片的引入路径。这很繁琐。

这是由于文件的相对路径，

在css文件中，是以css文件所在路径为基准。

在js文件中，是以导入此js的网页文件所在的位置为基准。

因此，如果在“域名/admin”访问图片，程序找的是“域名/assets/img/bg1.jpg”，在“域名/admin/blog”访问图片，程序找的是“域名/admin/assets/img/bg1.jpg”。所以路径错误。

而模板文件创作者设置成相对路径的原因是，提前并不知道你将模板文件放在何处，为保证在哪儿都可以正常访问静态网页文件，所以设置成相对路径。但是由于我们的静态网页文件位置变了。

所以没办法，只有改成绝对路径吧！

好消息是，css文件寻找路径并不随网页文件所在位置变动，所以css文件不需要改路径。