我如何在 lumen 上的 blade 文件中导入库?
How do i import libraries in a blade file on lumen?
所以我有这个 php.blade 视图,我想要 return 流明。
layout.blade.php
<head>
<!--AXIOS-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--JQUERY-->
<script src="{{ asset("libraries/go-debug.js") }}"></script>
<script src="{{ asset("libraries/jquery-3.2.1.min.js") }}"></script>
<!--MATERIALIZE-->
<link type="text/css" rel="stylesheet" href="{{ asset("libraries/materialize/css/materialize.min.css") }}" media="screen,projection"/>
<script type="text/javascript" src="{{ asset("libraries/materialize/js/materialize.min.js") }}"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!--ICONE MATERIALIZE-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--CSS IMPORTATO-->
<link type="text/css" rel="stylesheet" href="{{ asset("loginPage/login.css") }}">
@yield('head')
</head>
<body>
@yield('body')
</body>
</html>
login.blade.php
@extends('layout')
@section('imports')
<title>Login Page</title>
@stop
@section('body')
<script src="{{ asset("loginPage/login.js") }}"></script>
<!--NAVBAR-->
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo center">Logo</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="index.html"><i class="material-icons" style="font-size:36px;">home</i></a></li>
</ul>
</div>
</nav>
<div class="row">
<div class="col s12 m2" id="center">
<div class="card">
<div class="card-image">
<img src="image/logo.jpg" class="responsive-img" id="logo" style="width:200px; height:200px;">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
<div class="fb-login-button" data-width="">
</div>
</div>
<div class="card-action">
</div>
</div>
</div>
</div>
@stop
在这个视图中,您可以看到我正在尝试导入像 materialize、css 和 js 脚本这样的库。
问题是 lumen 在他的路径中找不到这个文件,甚至无法通过互联网调用它们。
这是路径的图片
我该如何解决这个问题?
据我所知,所有资源必须在public文件夹中。
例如
public/js/libraries/jquery-3.2.1.min.js
移动它们之后,按照以下方式更改代码:
layout.blade.php
<script src="{{ asset("js/libraries/jquery-3.2.1.min.js") }}"></script>
注意,在你的情况下你必须移动到 public:
- 图书馆
- bootstrap
- 登录页面
如果相反,你有自己的 scss 或 js 来编译看看这里:https://laravel.com/docs/5.6/mix
编辑
Lumen 不提供您可能想要使用的 asset 辅助函数 url
例如
<script src="{{ url("js/libraries/jquery-3.2.1.min.js") }}"></script>
如果您愿意,当然可以创建自己的资产助手函数,请看这里:
https://laracasts.com/discuss/channels/lumen/extend-helper-functions-to-lumen?page=0
或
所以我有这个 php.blade 视图,我想要 return 流明。
layout.blade.php
<head>
<!--AXIOS-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--JQUERY-->
<script src="{{ asset("libraries/go-debug.js") }}"></script>
<script src="{{ asset("libraries/jquery-3.2.1.min.js") }}"></script>
<!--MATERIALIZE-->
<link type="text/css" rel="stylesheet" href="{{ asset("libraries/materialize/css/materialize.min.css") }}" media="screen,projection"/>
<script type="text/javascript" src="{{ asset("libraries/materialize/js/materialize.min.js") }}"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!--ICONE MATERIALIZE-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--CSS IMPORTATO-->
<link type="text/css" rel="stylesheet" href="{{ asset("loginPage/login.css") }}">
@yield('head')
</head>
<body>
@yield('body')
</body>
</html>
login.blade.php
@extends('layout')
@section('imports')
<title>Login Page</title>
@stop
@section('body')
<script src="{{ asset("loginPage/login.js") }}"></script>
<!--NAVBAR-->
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo center">Logo</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="index.html"><i class="material-icons" style="font-size:36px;">home</i></a></li>
</ul>
</div>
</nav>
<div class="row">
<div class="col s12 m2" id="center">
<div class="card">
<div class="card-image">
<img src="image/logo.jpg" class="responsive-img" id="logo" style="width:200px; height:200px;">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
<div class="fb-login-button" data-width="">
</div>
</div>
<div class="card-action">
</div>
</div>
</div>
</div>
@stop
在这个视图中,您可以看到我正在尝试导入像 materialize、css 和 js 脚本这样的库。
问题是 lumen 在他的路径中找不到这个文件,甚至无法通过互联网调用它们。
这是路径的图片
我该如何解决这个问题?
据我所知,所有资源必须在public文件夹中。
例如
public/js/libraries/jquery-3.2.1.min.js
移动它们之后,按照以下方式更改代码:
layout.blade.php
<script src="{{ asset("js/libraries/jquery-3.2.1.min.js") }}"></script>
注意,在你的情况下你必须移动到 public:
- 图书馆
- bootstrap
- 登录页面
如果相反,你有自己的 scss 或 js 来编译看看这里:https://laravel.com/docs/5.6/mix
编辑
Lumen 不提供您可能想要使用的 asset 辅助函数 url 例如
<script src="{{ url("js/libraries/jquery-3.2.1.min.js") }}"></script>
如果您愿意,当然可以创建自己的资产助手函数,请看这里:
https://laracasts.com/discuss/channels/lumen/extend-helper-functions-to-lumen?page=0
或