README - Beautiful JBake

概要

Beautiful JBake は Beautiful Jekyll を参考にして作成した JBakeテンプレートです。
できるだけ近づくようには頑張ってみましたが JBake は設定ファイルに階層構造が持てないのでイマイチ残念な結果になっているような気がしないでもないです。
JBake v2.5.1 で開発したので他のバージョンで動くかどうかは不明です。

クイックスタート

とりあえずこことか見ながらJBakeをインストールしてください。
英語は苦手だけれど、いいかげんな翻訳でも怒らない大らかな心をお持ちな方であればこちらが役に立つかもしれません。

次に git clone してベイクしてサーバーモードで起動してください。多分こんな。

$ git clone https://github.com/Yamane/beautiful-jbake.git [適当なディレクトリ]
$ cd [適当なディレクトリ]
$ jbake -b -s

それでもって http://localhost:8820 にアクセスすればなんかが見えるようになってるハズです。

デフォルトテンプレートとは違う部分

インデックスページのページングに対応しています。
インデックスページにコンテンツの内容全部ではなく、HTMLタグを除去したあと規定の文字数までを表示します。
サイトのコンテンツ内で使用されているタグの一覧ページを生成します。
テキスト色や背景色など一部デザインの変更を設定ファイルによって行うことができます。
ほとんどのページヘッダ部分に背景画像を指定することができます。

独自メタデータヘッダ

項目名	説明
subtitle	コンテンツのサブタイトル。タイトルの下の行に表示されたりする。
image	インデックスページとかに表示されたりする。
bigimg	コンテンツのタイトル、サブタイトルの背景として大きく表示されたりする。

項目名

説明

subtitle

コンテンツのサブタイトル。タイトルの下の行に表示されたりする。

image

インデックスページとかに表示されたりする。

bigimg

コンテンツのタイトル、サブタイトルの背景として大きく表示されたりする。

jbake.properties 設定項目

設定ファイル jbake.properties には以下の項目が定義されてます。
これらの記述を変えることで、それなりにカスタマイズすることができる気がします。書い出しておいてなんですが、ここを見るより同梱されているファイルの中身をを見たほうが理解しやすい気がします。
しかしなあ、いまどきユーザーが触る想定の設定がプロパティファイルはないよなあ。エスケープめんどいから日本語でコメントも書き込む気にもならないし。

項目名必須説明

項目名	必須	説明
site.host	○	RSSフィードのLINK生成とかで使うURIの接頭辞。
site.lang	○	htmlタグとかに入れる言語指定。
site.title	○	サイトのタイトル。index.html に大きく表示されてるやつ。
site.subtitle		サイトのサブタイトル。index.html のタイトルの下の行に表示されているやつ。
site.avatar		サイトの上中央に表示されているアバターアイコン。
index.bigimg		インデックスページのタイトルの後ろに表示される画像。
index.paginate		インデックスページをページングするかどうか。
index.posts_per_page	*	インデックスページをページングする場合、１ページに何件表示するか。`index.paginate` をtrueにする場合は必須。
index.excerpt.size	○	インデックスページや、タグ一覧ページに表示するコンテンツ内容の抜粋の文字数。
archive.title		アーカイブページのタイトル。指定しない場合は「Archive」。
archive.subtitle		アーカイブページのサブタイトル。
archive.bigimg		アーカイブページのタイトルの後ろに表示される画像。
tags.title		タグ一覧ページのタイトル。指定しない場合は「Tags」。
tags.subtitle		タグ一覧ページのサブタイトル。
tags.bigimg		タグ一覧ページのタイトルの後ろに表示される画像。
date.format	○	日付を表示する部分のフォーマット。
month.format	○	月を表示する部分のフォーマット。
day.format	○	日を表示する部分のフォーマット。
navbar_col	○	ナビゲーション部分の背景色。
navbar_text_col	○	ナビゲーション部分のテキスト色。
navbar_children_col	○	ナビゲーションのドロップダウン背景色。
page_col	○	コンテンツ部分の背景色。
link_col	○	リンクの文字色。
hover_col	○	リンク選択時の文字色。
footer_col	○	フッター部分の背景色。
footer_text_col	○	フッター部分の文字色。
footer_link_col	○	フッター部分のリンク色。
navbar_img		ナビゲーション部分の背景画像。
page_img		コンテンツ部分の背景画像。
footer_img		フッター部分の背景画像。
author.name		フッターの©の部分に表示するやつ。
author.email		フッターのアイコンでリンクするメールアドレス。
author.facebook		フッターのメールアイコンでリンクするFacebookアカウント。
author.twitter		フッターのメールアイコンでリンクするTwitterアカウント。
author.github		フッターのメールアイコンでリンクするGitHubアカウント。
template.simple.file	-	コンテンツヘッダ部分にあまり装飾がないページタイプ `simple` のためのテンプレート定義。このページで使ってます。
template.tag-list.file	-	タグ一覧ページのためのテンプレート定義。書き換えないこと推奨。
template.maincss.file	-	スタイルシートの一部記述を `jbake.properties` で書き換えられるようにするために作ったテンプレート定義。書き換えないこと推奨。
template.maincss.extension	-
remove_tag.regex	-	HTML記述からタグ部分を削除する正規表現。テンプレートファイル内に書くとエスケープがめんどいのでここに退避してある感じ。

site.host

○

RSSフィードのLINK生成とかで使うURIの接頭辞。

site.lang

○

htmlタグとかに入れる言語指定。

site.title

○

サイトのタイトル。index.html に大きく表示されてるやつ。

site.subtitle

サイトのサブタイトル。index.html のタイトルの下の行に表示されているやつ。

site.avatar

サイトの上中央に表示されているアバターアイコン。

index.bigimg

インデックスページのタイトルの後ろに表示される画像。

index.paginate

インデックスページをページングするかどうか。

index.posts_per_page

インデックスページをページングする場合、１ページに何件表示するか。index.paginate をtrueにする場合は必須。

index.excerpt.size

○

インデックスページや、タグ一覧ページに表示するコンテンツ内容の抜粋の文字数。

archive.title

アーカイブページのタイトル。指定しない場合は「Archive」。

archive.subtitle

アーカイブページのサブタイトル。

archive.bigimg

アーカイブページのタイトルの後ろに表示される画像。

tags.title

タグ一覧ページのタイトル。指定しない場合は「Tags」。

tags.subtitle

タグ一覧ページのサブタイトル。

tags.bigimg

タグ一覧ページのタイトルの後ろに表示される画像。

date.format

○

日付を表示する部分のフォーマット。

month.format

○

月を表示する部分のフォーマット。

day.format

○

日を表示する部分のフォーマット。

navbar_col

○

ナビゲーション部分の背景色。

navbar_text_col

○

ナビゲーション部分のテキスト色。

navbar_children_col

○

ナビゲーションのドロップダウン背景色。

page_col

○

コンテンツ部分の背景色。

link_col

○

リンクの文字色。

hover_col

○

リンク選択時の文字色。

footer_col

○

フッター部分の背景色。

footer_text_col

○

フッター部分の文字色。

footer_link_col

○

フッター部分のリンク色。

navbar_img

ナビゲーション部分の背景画像。

page_img

コンテンツ部分の背景画像。

footer_img

フッター部分の背景画像。

author.name

author.email

フッターのアイコンでリンクするメールアドレス。

author.facebook

フッターのメールアイコンでリンクするFacebookアカウント。

author.twitter

フッターのメールアイコンでリンクするTwitterアカウント。

author.github

フッターのメールアイコンでリンクするGitHubアカウント。

template.simple.file

コンテンツヘッダ部分にあまり装飾がないページタイプ simple のためのテンプレート定義。このページで使ってます。

template.tag-list.file

タグ一覧ページのためのテンプレート定義。書き換えないこと推奨。

template.maincss.file

スタイルシートの一部記述を jbake.properties で書き換えられるようにするために作ったテンプレート定義。書き換えないこと推奨。

template.maincss.extension

remove_tag.regex

HTML記述からタグ部分を削除する正規表現。テンプレートファイル内に書くとエスケープがめんどいのでここに退避してある感じ。

その他

サンプルサイトで利用している画像ファイルには、京都フリー写真素材にて配布されているものを利用させて頂いています。とてもきれい。