如何在laravel 5.2中使用HTML5引导程序模板

Question

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 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>

我正在使用上面的代码来掌握布局

在home.blade.php中

@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文件。 我将css和js文件夹复制到public / assest文件夹中，但是它不起作用css，并且去home.blade.php时js无法加载

Answer 1

我假设您的css文件位于public / css文件夹内。 那你就写

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

同样，您的js文件位于public / js文件夹中

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

要么

<script src="/js/jquery-3.1.1.js" ></script>

尝试像明智地包括所有文件。 希望对您有帮助。

Answer 2

我在代码中犯了一个愚蠢的错误。

我应该使用此代码

src="{!!asset('assets/js/jquery.flexslider-min.js')!!}"

和

href="{!!asset('assets/css/style.css')!!}"

如何在laravel 5.2中使用HTML5引导程序模板

问题描述

2 个解决方案

解决方案1
1 已采纳 2017-03-21 13:15:56

解决方案2
0 2017-03-21 13:13:48

如何在laravel 5.2中使用HTML5引导程序模板

问题描述

2 个解决方案

解决方案1 1 已采纳 2017-03-21 13:15:56

解决方案2 0 2017-03-21 13:13:48

解决方案1
1 已采纳 2017-03-21 13:15:56

解决方案2
0 2017-03-21 13:13:48