このソフトウェアはマジおすすめ。
機能がすっごい豊富なのに3150円と格安です。ここだけの話、このソフトがあるとパソコンが動いたりするらしいです。
Mac App Storeも使えるようになるらしいです。
・・・っていう宣伝してもやっぱりLokkaのLoepard対応はやった方がいいですよね・・・。
public/theme/(Mac版の場合はLokka.app/Contents/Resources/public/theme/) ディレクトリにテーマ名でディレクトリを作ります。
既存のテーマのディレクトリをコピーして修正しても構いませんが、ゼロからexampleというテーマ作ってみます。
テーマディレクトリの作成
exampleディレクトリの作成
テーマのディレクトリの中にテンプレートファイルを作成します。テンプレートの形式は複数から選べますが、一番簡単なerbで作ってみます。
Lokkaのテーマに最低限必要なテンプレートは下記の二つだけです。
- entry.erb --- 個別(Individual)ページのテンプレート
- entries.erb --- 一覧(List)ページのテンプレート
個別ページのテンプレートの作成
まずは個別ページのテンプレートを書いてみます。
exampleテーマを使うように設定します。themeディレクトリにexampleディレクトリを作成した時点でテーマが認識されているので、管理画面の"テーマ"から"example"のテーマを選択します。
そして、個別ページを見てみましょう。(最初から1エントリーある筈なので http://localhost:9646/1 にアクセスします。)
単なるHTMLですが、ちゃんと表示されました。
しかし、静的なHTMLを表示するだけではつまらないのでサイトのタイトルを表示してみましょう。
h1タグの部分にサイトのタイトルを表示するように変更しました。<% と %>を囲うのがerb形式のテンプレートの記法です。<%= %>のように=が最初に付くと内容を表示するという意味になります。(これはphp/wordpressの<?= ?>と同じです。)
また http://localhost:9646/1 にアクセスして確認してみましょう。
サイトのタイトルが表示されました。この内容は管理画面の"設定" > "タイトル" で変更することが出来ます。同じようにサイトの詳細も <%= @site.description %>と書けば表示されます。
今度は個別ページなので、エントリーの内容を表示してみましょう。
http://localhost:9646/1 というURLからわかるように、IDが1のエントリーを表示するためのテンプレート内容になっています。
上記URLから判断して、IDが1のエントリーが@entryという変数の中に自動的に入っているので、@entry.titleや@entry.bodyでそれぞれエントリーのタイトルと本文が取り出せます。
表示されました。
一覧ページのテンプレートの作成
一覧ページのテンプレートを作る前に、エントリーが一個だけでは一覧になっているかわからないので管理画面の"投稿" > "登録" から幾つか適当に投稿(Post)を登録しておきます。
entries.erbというファイル名で一覧のページのテンプレートを作成します。
一覧は個別より少し複雑です。<% @posts.each do |post| %>から<% end %>の書き方に注目して下さい。do ~ endは一組になっていて、@posts.each do ~ end は@postsの個数分だけdo ~ endを繰り返すという構文です。投稿(Post)が3個あれば3回繰り返されます。
結果は下記のように表示されます。
画像や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を持っていますが、それは別のエントリーで紹介したいと思います。
いつもググってる気がするのでシリーズ。
require 'rubygems'
require 'active_record'
ActiveRecord::Base.establish_connection(
:adapter => 'postgresql',
:host => 'localhost',
:username => 'komagata',
:password => '',
:database => 'foo',
:port => 5432
)
class Post < ActiveRecord::Base
end
puts Post.first.nameLokka 0.2.0をリリースしました。
今回からMac版のLokka.appの配布を始めました。
MacのSnow Leopard(多分Leopardも)であれば、真っさらの状態でも、zipを解凍して、ダブルクリックし、http://localhost:9646/ にブラウザからアクセスすればCMSが使えます。
XcodeやMac PortsやTerminalが必要無いのでデザイナーの方でも簡単に使えるようになったと思います。(Lokka.appを右クリックして"パッケージの内容を表示"すればテーマなどの編集が出来ます。)
% cd /Applications/TextMate.app/Contents/SharedSupport/BundlesHaml
% git clone git://github.com/textmate/ruby-haml.tmbundle.git "Ruby Haml.tmbundle"Sass
% git clone git://github.com/seaofclouds/sass-textmate-bundle.git "Ruby Saas.tmbundle"Xcode(Developer Tools)をインストールするとIcon Composerというソフトが/Developer/Applications/Utilitiesに入ってる。
アイコンにしたい画像をドラッグする。
サイズ毎に別の画像にしたい場合はそれぞれのサイズの場所にドラッグする。必要なければ一番大きなサイズだけ設定しておけばいい。(ベクター形式でもそれぞれのサイズ用に人間が最適化した方が良いらしい)
保存すると.icnsという拡張子でアイコンファイルができる。
ブログをhtml5にする勇気がまだ無い糞野郎です。
Slimのソースを見てみると、!から始まるディレクティブ？にはdoctypeしか無いように見える。とりあえずこんな感じでしのいでいるが・・・。
% slimrb
| <?xml version="1.0" encoding="utf-8" ?>
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="utf-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">きんもー！
rubycommitters.orgやslim-lang.comのデザインをやってみているdeveloper/designerの方のページ。中華な感じが面白いなあ。日本のイラストともちょっと違うし、アメリカの方だとシンプソンズとかサウスパークとかもっと崩した感じのイメージがある。その中間って感じ。
