我们使用外部的模板文件比自己写前端模板更方便。一般,下载的模板文件结构类似如下:
- 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
- button
- font
- index.html
- login.html
<!-- index.html文件部分代码片段 -->
<link rel="stylesheet" href="assets/css/style.css">
<script type="text/javascript" src="assets/js/app.js"></script>
如果就这样访问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')}}
的形式也可以引入文件成功。
但是这没完,由于存在嵌套引用问题。
比如:
<!-- js/app.js文件部分代码片段 -->
<script type="text/javascript" src="assets/js/button/button.js"></script>
<script type="text/javascript" src="assets/js/tip/tip.js"></script>
button.js和tip.js文件也没引用成功。同时,js文件内部也有路径引用问题。
<!-- js/button/button.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文件不需要改路径。