前回最低限のテーマの作り方を紹介しました。今回は無くてもいいけど使うと便利なテンプレートタイプについて紹介します。

Lokkaにはデフォルトのentry, entries以外に様々なテンプレートタイプがあります。テンプレートは一覧、個別、その他のどれかに分類されます。

テンプレートタイプ

一覧

  • index --- トップページのテンプレート
  • category --- カテゴリー別の一覧ページのテンプレート
  • tag --- タグ別の一覧ページのテンプレート
  • yearly --- 年別の一覧ページのテンプレート
  • monthly --- 月別の一覧ページのテンプレート
  • search --- 検索結果の一覧ページのテンプレート
  • entries --- 一覧ページのテンプレート。上記のテンプレートが無い場合に使われる。

個別

  • post --- 投稿(Post)の個別ページのテンプレート
  • page --- ページ(Page)の個別ページのテンプレート
  • entry --- 個別ページのテンプレート

その他

  • partial --- テンプレートの一部分を共有するテンプレート
  • layout --- テンプレートの外枠を共有するテンプレート

一覧テンプレート

一覧はentries、個別はentryというテンプレートがありますが、例えば一覧で"検索結果だけに必要なもの"があった場合、entriesの中がごちゃごちゃしてしまうのでsearchという名前でテンプレートを作っておくと、検索結果の場合はそちらが優先して使われます。

個別テンプレート

同じようにentryとpostというテンプレートがあった場合投稿(Post)の場合はpostが優先的に表示されます。投稿とそれ以外で別の内容にしたい時に便利です。

どのテンプレートが選ばれるかはURLで決まります。実際には厳密なルールがありますが長くなるので代表的な例を紹介します。

  • index --- /
  • category --- /category/foo/
  • tag --- /tag/foo/
  • yearly --- /2011/
  • monthly --- /2011/01/
  • search --- /search/foo/
  • post --- /1
  • page --- /2

(postやpageやcategoryはIDの他にスラッグと呼ばれる自由なURLを持つことができます。そちらでもアクセスすることも可能です。)

上記以外に特殊なテンプレートタイプが存在します。それがpartialとlayoutです。

partialテンプレート

partialは複数のテンプレートで共通の部分等を別ファイルとして作成して共有するためのテンプレートです。好きな名前で作成することができます。

例えば、Copyright部分をpartialテンプレートとして下記のように作成し、別のテンプレートから読み込む事ができます。

copyright.erb:

<p>Copyright FJORD, LLC</p>

entries.erb:

(省略)
<%= partial 'copyright' %>

entry.erb:

(省略)
<%= partial 'copyright' %>

同じ内容が複数のテンプレートで出てくる場合にpartialを使うと楽でしょう。

layoutテンプレート

もう一つのlayoutテンプレートはpartialとは逆に、テンプレートの一部分を共有するのではなく、外枠の殆どを共有するイメージです。

layout.erb:

<h1 id="header">Title</h1>
<%= yield %>
<div id="footer">Powered by Lokka</div>

entry.erb:

<h2>Post Title 1</h2>
<div class="body">body ...</div>

yieldの部分にentryやentriesのテンプレートの結果が全部入るイメージです。layoutテンプレートはWordPressなどには無い機能なので多少取っ付きづらいですが、テンプレートの大部分を共有できる非常に便利な機能で、上手く使うとテーマコーディングが大幅に楽になります。数多くのフレームワークに採用されている機能なので是非とも活用してみてください。

public/theme/(Mac版の場合はLokka.app/Contents/Resources/public/theme/) ディレクトリにテーマ名でディレクトリを作ります。

既存のテーマのディレクトリをコピーして修正しても構いませんが、ゼロからexampleというテーマ作ってみます。

テーマディレクトリの作成

exampleディレクトリの作成

theme

テーマのディレクトリの中にテンプレートファイルを作成します。テンプレートの形式は複数から選べますが、一番簡単なerbで作ってみます。

Lokkaのテーマに最低限必要なテンプレートは下記の二つだけです。

  • entry.erb --- 個別(Individual)ページのテンプレート
  • entries.erb --- 一覧(List)ページのテンプレート

個別ページのテンプレートの作成

まずは個別ページのテンプレートを書いてみます。

entry.erb — untitled

exampleテーマを使うように設定します。themeディレクトリにexampleディレクトリを作成した時点でテーマが認識されているので、管理画面の"テーマ"から"example"のテーマを選択します。

Test Site - Lokka

そして、個別ページを見てみましょう。(最初から1エントリーある筈なので http://localhost:9646/1 にアクセスします。)

Example Individual Page

単なるHTMLですが、ちゃんと表示されました。

しかし、静的なHTMLを表示するだけではつまらないのでサイトのタイトルを表示してみましょう。

entry.erb — untitled

h1タグの部分にサイトのタイトルを表示するように変更しました。<% と %>を囲うのがerb形式のテンプレートの記法です。<%= %>のように=が最初に付くと内容を表示するという意味になります。(これはphp/wordpressの<?= ?>と同じです。)

また http://localhost:9646/1 にアクセスして確認してみましょう。

Example Individual Page

サイトのタイトルが表示されました。この内容は管理画面の"設定" > "タイトル" で変更することが出来ます。同じようにサイトの詳細も <%= @site.description %>と書けば表示されます。

今度は個別ページなので、エントリーの内容を表示してみましょう。

entry.erb — untitled

http://localhost:9646/1 というURLからわかるように、IDが1のエントリーを表示するためのテンプレート内容になっています。

上記URLから判断して、IDが1のエントリーが@entryという変数の中に自動的に入っているので、@entry.titleや@entry.bodyでそれぞれエントリーのタイトルと本文が取り出せます。

Example Individual Page

表示されました。

一覧ページのテンプレートの作成

一覧ページのテンプレートを作る前に、エントリーが一個だけでは一覧になっているかわからないので管理画面の"投稿" > "登録" から幾つか適当に投稿(Post)を登録しておきます。

entries.erbというファイル名で一覧のページのテンプレートを作成します。

entries.erb — untitled

一覧は個別より少し複雑です。<% @posts.each do |post| %>から<% end %>の書き方に注目して下さい。do ~ endは一組になっていて、@posts.each do ~ end は@postsの個数分だけdo ~ endを繰り返すという構文です。投稿(Post)が3個あれば3回繰り返されます。

結果は下記のように表示されます。

Example List Page

画像やCSS等の外部リソースの使い方

画像やCSS、Javascriptといった外部リソースはテーマフォルダに含めることができます。

例えば、example/logo.png は <img src="/theme/example/logo.png"> のようにテンプレート中で指定できます。下記のようにディレクトリを作っても構いません。

example/
 images/
  logo.png
 stylesheets/
  style.css
 javascripts/
  jquery.js

また、テーマまでのパスは下記のように書くこともできます。

<img src="<%= @theme.path %>/logo.png" />

テーマ作成に最低限の知識はこれだけです。Lokkaにはその他に柔軟なテンプレートタイプとテーマAPIを持っていますが、それは別のエントリーで紹介したいと思います。

Lokkaのデフォルトテーマを@machidaさんに作って頂きました。

jarvi

デフォルトテーマjärvi(ジャルビ)。

これまでdefaultという名前だったテーマはvicuna-monoという名前に変更されました。互換性の為に年内はdefaultという名前のテーマも残して置きますが、既にインストール時のデフォルトはjarviになっているのでdefaultは非推奨です。

テンプレもデザイナーの@machidaさんが書いてくれたのですが、ちょっと面白くて、ブログの投稿に使うPostではなく個別ページなどの為にあるPageでページを作成すると上の"ミニプロフィール"みたいにメニューに自動的に並ぶようになっています。

public/theme/jarvi/layout.erb at master from komagata's lokka - GitHub