Mojoliciousの学習
今日は疲れている
なんか体調が優れない…体力が戻るまでちょっとずつやろう
テンプレートを外部ファイル化
全体構成
. |-- README.md |-- app.psgi |-- cpanfile |-- lib |-- public | |-- css | | |-- app.css | | |-- bootstrap-theme.min.css | | |-- bootstrap.min.css | | |-- docs.css | | -- pygments-manni.css | |-- fonts | | |-- glyphicons-halflings-regular.eot | | |-- glyphicons-halflings-regular.svg | | |-- glyphicons-halflings-regular.ttf | | -- glyphicons-halflings-regular.woff | -- js | |-- app.js | |-- bootstrap.min.js | |-- html5shiv.js | |-- jquery-1.10.2.min.map | |-- jquery.js | --- respond.min.js --- templates |-- index.html.ep |-- layouts | -- default.html.ep --- rsslist.html.ep
templatesにファイルを作成する
index
layout 'default'; <div class="row-fluid"> <div class="col-12"> <div> <div> デザインセンスが破滅的に変だけどとりあえず、形にだけしておく </div> <ul> <li><a href="/rsslist">RSSの一覧を表示</a></li> </ul> </div> <hr /> <div> <div> 履歴 </div> <ul> <li>はろーわーるどを配置</li> <li>RSSリストを追加</li> <li>テンプレート化してファイルを分割</li> </ul> </div> </div> </div> </div>
rsslist
% layout 'default'; <div class="row-fluid"> <div class="col-12"> <div class="list"> <div class="list_area"> % for my $item(@$rssList){ <a target="_blank" href="<%= $item->{url} %>"> <div class="bookmark_link"> <p> <%= $item->{title} %> </p> <em><%= $item->{count} %> users</em> </div> </a> % } </div> </div> <div style="clear: both;"></div> </div> </div> </div>
共通テンプレートは「templates/layouts」へ配置
<!DOCTYPE html> <html lang="ja"> <head> <title><%= $title %></title> <link href="/css/bootstrap.min.css" rel="stylesheet"> <link href="/css/bootstrap-theme.min.css" rel="stylesheet"> <!-- <link href="/css/docs.css" rel="stylesheet"> --> <!-- <link href="/css/pygments-manni.css" rel="stylesheet"> --> <link href="/css/app.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="/js/html5shiv.js"></script> <script src="/js/respond.min.js"></script> <![endif]--> </head> <body data-twttr-rendered="true"> <div class="navbar navbar-inverse bs-docs-nav"> <div class="container"> <a href="/" class="navbar-brand"><strong><%= $title %></strong></a> </div> </div> <div class="container-fluid"> <div class="row-fluid"> <div class="col-12"> <h2> <%= $description %> </h2> </div> </div> <div class="row-fluid"> <div class="col-12"> <div> <h4><%= $subTitle %></h4> <a target="_blank" href="<%= $github %>">Github</a> </div> </div> </div> <!-- content start --> <%= content %> <!-- content end --> </div> <div class="footer"> Created By <a target="_blank" href="https://twitter.com/m_shige1979">@m_shige1979</a> </div> <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/bootstrap.min.js"></script> <script type="text/javascript" src="/js/app.js"></script> </body> </html>
app.psgiはテンプレート名を指定
#!/usr/bin/env perl use strict; use warnings; use Mojolicious::Lite; use XML::FeedPP; use URI; use utf8; use Encode; get '/' => sub { # パラメータを取得 my $self = shift; # 変数をセット my $title = 'Mojoliciousのテストサイト'; my $description = 'm_shige1979がなんかいろいろやる目的のテストサイト'; my $sub_title = 'テスト一覧'; my $github = "https://github.com/mshige1979/heroku-perl-test01"; # テンプレート変数をセット $self->stash('title', $title); $self->stash('description', $description); $self->stash('subTitle', $sub_title); $self->stash('github', $github); # indexを割り当て $self->render('index'); }; get '/rsslist' => sub { # パラメータを取得 my $self = shift; # 変数をセット my $title = 'Mojoliciousのテストサイト'; my $description = 'm_shige1979がなんかいろいろやる目的のテストサイト'; my $sub_title = '今回のやることはRSSを読み込んでリストを表示'; my $github = "https://github.com/mshige1979/heroku-perl-test01"; # 最初は配列をリファレンスで定義 my $rss_list = []; # rssを取得 my $rss_url = "http://b.hatena.ne.jp/entrylist/it?sort=hot&threshold=&mode=rss"; my $feed = XML::FeedPP->new($rss_url, utf8_flag => 1) or die XML::Feed->errstr; # リストに格納 for my $entry($feed->get_item()){ push @$rss_list, { title => ( $entry->title), url => $entry->link, count => $entry->get("hatena:bookmarkcount") } } # テンプレート変数をセット $self->stash('title', $title); $self->stash('description', $description); $self->stash('subTitle', $sub_title); $self->stash('github', $github); $self->stash('rssList', $rss_list); # indexを割り当て $self->render('rsslist'); }; app->start;
確認すること
・templateを使用する場合は「templates」ディレクトリを作成して「hogehoge.html.ep」で作成する
・複数のテンプレートで共通のテンプレートを使用したい場合は「templates」配下に「layouts」ディレクトリを作成して配置
確認していないこと
・templates配下に別のサブディレクトリなどを作成してテンプレートを作成できるか?