WinRoadのLaravel4初心者講座

次世代PHPフレームワークのLaravel4を初心者向けに解説して参ります。

Winroad徒然草の管理人がお届けします
Foundation4のHTMLテンプレート

Foundation4のHTMLテンプレート

このエントリーをはてなブックマークに追加

Foundation4には、便利なテンプレートが下記のサイトで公開されています。

http://foundation.zurb.com/templates.php

レイアウト画像をクリックすると、テンプレートの見本ページが表示されます。More infoをクリックすると詳細な説明があります(英語ですが)。HTMLをクリックすると、見本ページの<body></body>内のHTMLが表示されます。

laravel025

このHTMLをコピーして使用すれば、簡単にテンプレートが作成できます。

laravel026

Laravel4のテンプレートに適用

FoundationテンプレートのHTMLは、箇所ごと(ナビゲーションとか、コンテンツとかサイドバーとか)に、きちんとコメント分けしていますので、必要な箇所だけ使用することができます。

とりあえず、今回は、MarketingテンプレートとBlog Page TemplateからHTMLを拝借したいと思います。

Marketing Page Templateの<!– Navigation–>から、<!– End Top Bar –>までをコピーして、下記のように修正します。

app/views/layouts/topbar.blade.php
<!-- Navigation -->
<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>
<a href="#">
Top Bar Title
</a>
</h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li class="has-dropdown">
{{ HTML::link('#','Main Item 1') }}
<ul class="dropdown">
<li><label>Section Name</label></li>
<li class="has-dropdown">
{{ HTML::link('#','Has Dropdown, Level 1') }}
<ul class="dropdown">
<li>{{ HTML::link('#','Dropdown Options') }}</li>
<li>{{ HTML::link('#','Dropdown Options') }}</li>
<li>{{ HTML::link('#','Level 2') }}</li>
<li>{{ HTML::link('#','Subdropdown Option') }}</li>
<li>{{ HTML::link('#','Subdropdown Option') }}</li>
<li>{{ HTML::link('#','Subdropdown Option') }}</li>
</ul>
</li>
<li>{{ HTML::link('#','Dropdown Options') }}</li>
<li>{{ HTML::link('#','Dropdown Options') }}</li>
<li class="divider"></li>
<li><label>Section Name</label></li>
<li>{{ HTML::link('#','Dropdown Options') }}</li>
<li>{{ HTML::link('#','Dropdown Options') }}</li>
<li>{{ HTML::link('#','Dropdown Options') }}</li>
<li class="divider"></li>
<li>{{ HTML::link('#','See all &rarr;') }}</li>
</ul>
</li>
<li class="divider"></li>
<li><a href="#">Main Item 2</a></li>
<li class="divider"></li>
<li class="has-dropdown">
<a href="#">Main Item 3</a>
<ul class="dropdown">
<li>{{ HTML::link('#','Dropdown Options') }}</li>
<li>{{ HTML::link('#','Dropdown Options') }}</li>
<li>{{ HTML::link('#','Dropdown Options') }}</li>
<li class="divider"></li>
<li>{{ HTML::link('#','See all &rarr;') }}</li>
</ul>
</li>
</ul>
</section>
</nav>
<!-- End Top Bar -->

同じように、Blog Page Templateから、<!– Sidebar–>から、<!– End siebar–>迄の間をコピーして、sidebar.blade.phpを作成し、下記のように修正します。

app/views/layouts/f4/sidebar.blade.php
<!-- Sidebar -->

<aside class="large-3 columns">

<h5>Categories</h5>
<ul class="side-nav">
<li>{{ HTML::link('#','News') }}</li>
<li>{{ HTML::link('#','Code') }}</li>
<li>{{ HTML::link('#','Design') }}</li>
<li>{{ HTML::link('#','Fun') }}</li>
<li>{{ HTML::link('#','Weasels') }}</li>
</ul>

<div class="panel">
<h5>Featured</h5>
<p>Pork drumstick turkey fugiat. Tri-tip elit turducken pork chop in. Swine short ribs meatball irure bacon nulla pork belly cupidatat meatloaf cow.</p>
{{ HTML::link('#','Read More &rarr;') }}
</div>

</aside>

<!-- End Sidebar -->

次に、前回作成したbase.blade.phpも下記のように修正します。

<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="ja"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="ja"> <!--<![endif]-->

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Foundation 4</title>

{{ HTML::style('f4/css/normalize.css') }}
{{ HTML::style('f4/css/foundation.css') }}
{{ HTML::script('f4/js/vendor/custom.modernizr.js') }}

</head>
<body>

@section('topbar')
{{ View::make('layouts.f4.topbar') }}
@show

<!-- Main Page Content and Sidebar -->
<div class="row">
<!-- Main Content -->
<div class="large-9 columns" role="content">

@yield('content')

</div><!-- End Main Content -->

@section('sidebar')
{{ View::make('layouts.f4.sidebar') }}
@show

</div><!-- End Main Content and Sidebar -->

@section('footer')
<footer class="row">
<div class="large-12 columns">
<hr />
<div class="row">
<div class="large-6 columns">
<p>&copy; Copyright 2013 Builwing</p>
</div>
<div class="large-6 columns">
<ul class="inline-list right">
<li>{{ HTML::link('#','Link 1') }}</li>
<li>{{ HTML::link('#','Link 2') }}</li>
<li>{{ HTML::link('#','Link 3') }}</li>
<li>{{ HTML::link('#','Link 4') }}</li>
</ul>
</div>
</div>
</div>
</footer>
@show

{{ HTML::script('f4/js/foundation/foundation.js') }}
{{ HTML::script('f4/js/foundation/foundation.alerts.js') }}
{{ HTML::script('f4/js/foundation/foundation.clearing.js') }}
{{ HTML::script('f4/js/foundation/foundation.cookie.js') }}
{{ HTML::script('f4/js/foundation/foundation.dropdown.js') }}
{{ HTML::script('f4/js/foundation/foundation.forms.js') }}
{{ HTML::script('f4/js/foundation/foundation.joyride.js') }}
{{ HTML::script('f4/js/foundation/foundation.magellan.js') }}
{{ HTML::script('f4/js/foundation/foundation.orbit.js') }}
{{ HTML::script('f4/js/foundation/foundation.placeholder.js') }}
{{ HTML::script('f4/js/foundation/foundation.reveal.js') }}
{{ HTML::script('f4/js/foundation/foundation.section.js') }}
{{ HTML::script('f4/js/foundation/foundation.tooltips.js') }}
{{ HTML::script('f4/js/foundation/foundation.topbar.js') }}
{{ HTML::script('f4/js/foundation/foundation.interchange.js') }}

<script>
document.write('<script src="f4/js/vendor/'
+ ('__proto__' in {} ? 'zepto' : 'jquery')
+ '.js"><\/script>');
</script>
{{ HTML::script('f4/js/foundation.min.js') }}
<script>
$(document).foundation();
</script>

</body>
</html>

問題点

上記のコードでは、レンタルサーバー上では起動するのですが、ローカル環境では、topbarのドロップダウンメニュー(Javascript)が起動しません。

そこで、73-81行目を下記のように修正(相対指定から絶対指定に変更)すれば、ローカル環境でも、ドロップダウンメニューは起動します。

<script>
 document.write('<script src="http://bw.winroad.jp/f4/js/vendor/'
 + ('__proto__' in {} ? 'zepto' : 'jquery')
 + '.js"><\/script>');
 </script>
 {{ HTML::script('f4/js/foundation.min.js') }}
 <script>
 $(document).foundation();
 </script>

下記のようになりました。

laravel027

« »

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です