1.@each 與 $loop
{{--$loop 中包含一些屬性 --}}
{{-- @each(entity in entities)
<small>
{{$loop.index + 1}}.
first: <i>{{$loop.first}}</i>
last: <i>{{$loop.last}}</i>
total: <i>{{$loop.total}}</i>
odd: <i>{{$loop.isOdd}}</i>
even: <i>{{$loop.isEven}}</i>
</small>
{{entity.title}}:{{entity.content}}
@endeach --}}
2.@layout 引用模板佈局
{{--@layout 引用模板佈局 --}}
@layout('layouts.main')
@section('header')
@super
<h1>{{pageTitle || 'untitle'}}</h1>
@endsection
@section('content')
{{--會 覆蓋 默認section中的內容 可以用@super保留默認內容 --}}
@each(entity in entities)
<small>
{{$loop.index + 1}}.
first: <i>{{$loop.first}}</i>
last: <i>{{$loop.last}}</i>
total: <i>{{$loop.total}}</i>
odd: <i>{{$loop.isOdd}}</i>
even: <i>{{$loop.isEven}}</i>
</small>
{{entity.title}}:{{entity.content}}
@endeach
@endsection
3.@include 引入局部佈局
//footer.edge
<div class="footer">
<hr style="border:none;border-bottom:1px solid #eee">
<small>©xiaoyang</small>
</div>
//main.edge
@include('partials.footer')
4.@component 引用組件並傳值
//index.edge
{{--會 覆蓋 默認section中的內容 可以用@super保留默認內容 --}}
{{--@component @endcomponent 與 @!component 自封閉 引入組件 並傳遞數據--}}
@!component('components.list',{entities:entities,border:true,borderColor:'#ccc'})
//list.edge
@each(entity in entities)
<div class="" style="padding:4px;
@if(!$loop.last && border)
border-bottom: 1px solid {{borderColor || '#eee'}}
@endif
">
{{--如果不是最後一個 並且 border爲true 添加底邊線 --}}
<small>
{{$loop.index + 1}}.
first: <i>{{$loop.first}}</i>
last: <i>{{$loop.last}}</i>
total: <i>{{$loop.total}}</i>
odd: <i>{{$loop.isOdd}}</i>
even: <i>{{$loop.isEven}}</i>
</small>
{{entity.title}}:{{entity.content}}
</div>
@endeach
5. @slot , @yield
//compontent/list.edge
@yield($slot.notes)
{{-- 設置slot 的默認內容 --}}
<small>Put some notes here.</small>
@endyield
//index.edge
@section('content')
{{--會 覆蓋 默認section中的內容 可以用@super保留默認內容 --}}
{{--@component @endcomponent 與 @!component 自封閉 引入組件 並傳遞數據--}}
@component('components.list',{entities:entities,border:true,borderColor:'#ccc'})
@slot('notes')
<small>Eat some fruites</small>
@endslot
@endcomponent
@endsection
6. 請求相關信息
<div class="">
{{--request.originalUrl 包含 查詢參數 --}}
<small>URL:</small>{{request.url()}} <br>
<small>OriginalURL:</small>{{request.originalUrl()}} <br>
<small>Method:</small>{{request.method()}} <br>
<small>Protocol:</small>{{request.protocol()}} <br>
</div>
7. css 、js、img 資源鏈接
//public/css/mian.css
//public/js/mian.js
//public/splash.png
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{pageTitle || 'xiaoyang'}}</title>
{{--css js img 公共資源 都放在 public 下 --}}
{{css('css/mian')}}
{{script('js/mian')}}
</head>
<body style="background:url({{assetsUrl('splash.png')}})">