Octopressテーマの作り方

ディレクトリ構成

仕組みとしては超単純で、 .themes 以下に掘ったディレクトリに対して、

1

rake install['テーマ名']

すると .themes/hogehoge 以下の内容が現在のディレクトリに上書きされる。それだけ。

実際に開発する場合は scss, source以下のファイルをpreview状態で編集して、最後にsourceとscssだけ抜いたディレクトリをコピーして終わり

たとえばこれは、ほぼslashテーマのクローンだが

1
2
3
4
5
6
7
8
9
10

.themes/mizchi/
├── README.md
├── sass
... ├── _includes
... (中略)
└── source
    ├── _includes
... (中略)

16 directories, 76 files

sassとsourceが上書きされる

エントリポイント

たぶん source/_layout/default.html

ページを作成する際は、yamlのメタ情報で展開するテンプレートを指定する。(defaultはたぶん指定しなかった時も展開されるんだろう) たとえばこのページのyamlはこうなっている

1
2
3
4
5

layout: post
title: "Octopressテーマの作り方"
date: 2012-09-23 21:07
comments: true
categories:

で、postは

1
2

layout: default
single: true

singleはなんだろう…　あとで調べる

include

includeされるテンプレートは_include以下におく。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

.themes/mizchi/source/_includes/
├── after_footer.html
├── archive_post.html
├── article.html
├── banner.html
├── custom
│   ├── after_footer.html
│   ├── category_feed.xml
│   ├── footer.html
│   ├── head.html
│   ├── header.html
│   └── navigation.html
├── disqus.html
├── fancybox.html
├── footer.html
├── google_analytics.html
├── head.html
├── header.html
├── navigation.html
└── post
    ├── author.html
    ├── categories.html
    ├── date.html
    ├── disqus_thread.html
    └── sharing.html

2 directories, 22 files

まあ色々と入っているけど、includeされた順に追っていけばそんなに難しくない。あとはファイル名から適当に類推できる。

octopress