Javascript 如何在laravel 5.2中使用HTML5引导模板
Master.blade.phpJavascript 如何在laravel 5.2中使用HTML5引导模板,javascript,php,css,html,laravel,Javascript,Php,Css,Html,Laravel,Master.blade.php <!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="description" content="software app site template" /> <meta na
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="software app site template" />
<meta name="keywords" content="corporate, software, app, business, marketing, site template, web marketing, internate marketing"/>
<meta name="author" content="Tansh" />
<link rel="icon" type="image/png" href="images/favicon.png"/>
<title>Tech-Marquee | @yield('title')</title>
<link href='http://fonts.googleapis.com/css?family=Arimo:400,400italic' rel='stylesheet' type='text/css'>
<!--style sheets-->
<link rel="stylesheet" media="screen" {!!asset('assets/css/style.css')!!}/>
<link rel="stylesheet" media="screen" {!!asset('assets/css/navigation.css')!!}/>
<link rel="stylesheet" media="screen" {!!asset('assets/css/jquery-ui-1.10.3.custom.css')!!}/>
<!--jquery libraries / others are at the bottom-->
<script {!!asset('assets/js/jquery-1.9.1.min.js')!!} type="text/javascript"></script>
<script {!!asset('assets/js/modernizr.js')!!} type="text/javascript"></script>
<!--flexslider scripts starts-->
<link rel="stylesheet" media="screen" {!!asset('assets/css/flexslider.css')!!}/>
<script {!!asset('assets/js/jquery.flexslider-min.js')!!} type="text/javascript" ></script>
<script type="text/javascript">
$(window).load(function () {
//Image Slider
$('.image-slider').flexslider({
animation: "slide",
slideshowSpeed: 4000,
animationDuration: 600,
controlNav: true,
keyboardNav: true,
directionNav: true,
pauseOnHover: true,
pauseOnAction: true,
});
});
</script>
<!--flexslider scripts end-->
<!--jcarousel scripts starts-->
<link rel="stylesheet" media="screen" {!!asset('assets/css/jcarousel.css')!!}/>
<script {!!asset('assets/js/jquery.jcarousel.min.js')!!} type="text/javascript"></script>
<script type="text/javascript">
//Image slider for gallery
$(document).ready(function() {
$('#mycarousel').jcarousel({
easing: 'easeInOutQuint',
animation: 600
});
});
</script>
<!--jcarousel scripts ends-->
<!--prettyphoto scripts starts-->
<link rel="stylesheet" media="screen" {!!asset('assets/css/prettyPhoto.css')!!}/>
<script {!!asset('assets/js/jquery.prettyPhoto.js')!!} type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a[data-rel]').each(function() {
$(this).attr('rel', $(this).data('rel'));
});
$("a[rel^='prettyPhoto[mixed]']").prettyPhoto({
animation_speed: 'fast',
slideshow: 5000,
autoplay_slideshow: false,
opacity: 0.80,
show_title: false,
theme: 'pp_default', /* light_rounded / dark_rounded / light_square / dark_square / facebook */
overlay_gallery: false,
social_tools: false
});
});
</script>
<!--prettyphoto scripts ends-->
<!--subscribe scripts starts-->
<script {!!asset('assets/js/jquery.validate.js')!!} type="text/javascript"></script>
<script {!!asset('assets/js/jquery.form.js')!!} type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(function() {
var v = $("#subform").validate({
submitHandler: function(form) {
$(form).ajaxSubmit({
target: "#result_sub",
clearForm: true
});
}
});
});
//To clear form field on page refresh
$('#subform #email').val('');
});
</script>
<!--subscribe scripts ends-->
</head>
<body>
@yield('header')
@yield('slider')
<!--section for features ends-->
<!--section for requirements and gallery starts-->
@yield('footer')
<script {!!asset('assets/js/jquery.supersubs.js')!!}></script>
<script {!!asset('assets/js/jquery.superfish.js')!!} type="text/javascript"></script>
<script {!!asset('assets/js/jquery.cycle.all.js')!!} type="text/javascript"></script>
<script {!!asset('assets/js/jquery-ui-1.10.3.custom.js')!!} type="text/javascript"></script>
<script {!!asset('assets/js/jquery.easing.1.3.js')!!} type="text/javascript"></script>
<script {!!asset('assets/js/twitter.js')!!} type="text/javascript"></script>
<script {!!asset('assets/js/custom.js')!!} type="text/javascript"></script>
</body>
</html>
@extends('Layout._master')
@section('title','Creating. Securing Virtual World')
@section('header')
@include('includes.header')
@endsection
@section('slider')
@include('includes.slider')
@endsection
@section('footer')
@include('includes.footer')
@endsection
Routes.php
Route::get("/",function(){
return view('home');
});
我仍然无法在主布局中加载css和js文件。我在public/assest文件夹中复制了css和js文件夹,但它不起作用
返回home.blade.php时没有加载css和js。我在代码中犯了一个愚蠢的错误
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="software app site template" />
<meta name="keywords" content="corporate, software, app, business, marketing, site template, web marketing, internate marketing"/>
<meta name="author" content="Tansh" />
<link rel="icon" type="image/png" href="images/favicon.png"/>
<title>Tech-Marquee | @yield('title')</title>
<link href='http://fonts.googleapis.com/css?family=Arimo:400,400italic' rel='stylesheet' type='text/css'>
<!--style sheets-->
<link rel="stylesheet" media="screen" {!!asset('assets/css/style.css')!!}/>
<link rel="stylesheet" media="screen" {!!asset('assets/css/navigation.css')!!}/>
<link rel="stylesheet" media="screen" {!!asset('assets/css/jquery-ui-1.10.3.custom.css')!!}/>
<!--jquery libraries / others are at the bottom-->
<script {!!asset('assets/js/jquery-1.9.1.min.js')!!} type="text/javascript"></script>
<script {!!asset('assets/js/modernizr.js')!!} type="text/javascript"></script>
<!--flexslider scripts starts-->
<link rel="stylesheet" media="screen" {!!asset('assets/css/flexslider.css')!!}/>
<script {!!asset('assets/js/jquery.flexslider-min.js')!!} type="text/javascript" ></script>
<script type="text/javascript">
$(window).load(function () {
//Image Slider
$('.image-slider').flexslider({
animation: "slide",
slideshowSpeed: 4000,
animationDuration: 600,
controlNav: true,
keyboardNav: true,
directionNav: true,
pauseOnHover: true,
pauseOnAction: true,
});
});
</script>
<!--flexslider scripts end-->
<!--jcarousel scripts starts-->
<link rel="stylesheet" media="screen" {!!asset('assets/css/jcarousel.css')!!}/>
<script {!!asset('assets/js/jquery.jcarousel.min.js')!!} type="text/javascript"></script>
<script type="text/javascript">
//Image slider for gallery
$(document).ready(function() {
$('#mycarousel').jcarousel({
easing: 'easeInOutQuint',
animation: 600
});
});
</script>
<!--jcarousel scripts ends-->
<!--prettyphoto scripts starts-->
<link rel="stylesheet" media="screen" {!!asset('assets/css/prettyPhoto.css')!!}/>
<script {!!asset('assets/js/jquery.prettyPhoto.js')!!} type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a[data-rel]').each(function() {
$(this).attr('rel', $(this).data('rel'));
});
$("a[rel^='prettyPhoto[mixed]']").prettyPhoto({
animation_speed: 'fast',
slideshow: 5000,
autoplay_slideshow: false,
opacity: 0.80,
show_title: false,
theme: 'pp_default', /* light_rounded / dark_rounded / light_square / dark_square / facebook */
overlay_gallery: false,
social_tools: false
});
});
</script>
<!--prettyphoto scripts ends-->
<!--subscribe scripts starts-->
<script {!!asset('assets/js/jquery.validate.js')!!} type="text/javascript"></script>
<script {!!asset('assets/js/jquery.form.js')!!} type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(function() {
var v = $("#subform").validate({
submitHandler: function(form) {
$(form).ajaxSubmit({
target: "#result_sub",
clearForm: true
});
}
});
});
//To clear form field on page refresh
$('#subform #email').val('');
});
</script>
<!--subscribe scripts ends-->
</head>
<body>
@yield('header')
@yield('slider')
<!--section for features ends-->
<!--section for requirements and gallery starts-->
@yield('footer')
<script {!!asset('assets/js/jquery.supersubs.js')!!}></script>
<script {!!asset('assets/js/jquery.superfish.js')!!} type="text/javascript"></script>
<script {!!asset('assets/js/jquery.cycle.all.js')!!} type="text/javascript"></script>
<script {!!asset('assets/js/jquery-ui-1.10.3.custom.js')!!} type="text/javascript"></script>
<script {!!asset('assets/js/jquery.easing.1.3.js')!!} type="text/javascript"></script>
<script {!!asset('assets/js/twitter.js')!!} type="text/javascript"></script>
<script {!!asset('assets/js/custom.js')!!} type="text/javascript"></script>
</body>
</html>
@extends('Layout._master')
@section('title','Creating. Securing Virtual World')
@section('header')
@include('includes.header')
@endsection
@section('slider')
@include('includes.slider')
@endsection
@section('footer')
@include('includes.footer')
@endsection
我应该用这个密码
src="{!!asset('assets/js/jquery.flexslider-min.js')!!}"
及
我假设您的css文件位于public/css文件夹中。 那你就写吧
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
同样,您的js文件位于public/js文件夹中
<script src="{{ asset('js/app.js') }}"></script>
或
尽量像wise一样包含所有文件。希望它能对您有所帮助。此外,您不需要转义asset函数,只需执行{{asset…}}或{!!asset…!}即可