T.I.D.

Git や GitHub と戯れる、オレオレ的おとなの遊び場

Octopressのテーマ - Classicの構成

いつか Octopress をカスタマイズし、オリジナルのテーマを作るときのために、ファイル構成をヒモ解いた。

1. テーマの概要

テンプレートファイル

rake install の時点で、.themes/classic から source にコピーされる。

設定ファイル

  • _config.yml
    ここで定義された変数がテンプレート中 site.変数名 でアクセスされる。

構成の概要

source/
├── _layouts/    # トップページ、個別記事ページ、カテゴリアーカイブページのレイアウト
└── _includes/   # ページレイアウト用の部品
    ├── post/    # サイトのメタデータ、ソーシャルメディア、コメントシステム用部品
	├── asides/  # テーマのサイドバー用部品
	└── custom/  # カスタマイズ用部品（<head>、<header>、<navigation>、<aside>、<footer>）

2. テンプレートファイルの構成

ページ

└── _layouts/
    ├── default.html
    ├── page.html (layout: default)
    ├── post.html (layout: default, single: true)
    └── category_index.html (layout: page, footer: false)

<head>

└── _includes/
    ├── head.html
    ├── custom/head.html
    └── google_analytics.html

RSS

└── _includes/
    └── custom/category_feed.xml

ヘッダー

└── _includes/
    ├── header.html
    └── custom/header.html

ナビゲーション・メニュー

└── _includes/
    ├── navigation.html
    └── custom/navigation.html

記事

└── _includes/
    ├── article.html            # post.html、index.html から
    ├── post/author.html        # post.html、page.html から
    ├── post/categories.html    # post.html、page.html から
    ├── post/date.html          # post.html、page.html、index.html から
    ├── post/disqus_thread.html # post.html、page.html から
    └── post/sharing.html       # post.html、page.html から

サイドバー・パーツ

└── _includes/
    ├── custom/asides/about.html
    ├── asides/recent_posts.html
    ├── asides/github.html
    ├── asides/delicious.html
    ├── asides/googleplus.html
    ├── asides/pinboard.html
    └── asides/twitter.html

フッター

└── _includes/
    ├── footer.html
    └── custom/footer.html

ソーシャル・パーツ

└── _includes/
    ├── after_footer.html
    ├── custom/after_footer.html # コメントのみ
    ├── disqus.html              # after_footer.html から
    ├── facebook_like.html       # after_footer.html から
    ├── google_plus_one.html     # after_footer.html から
    └── twitter_sharing.html     # after_footer.html から

アーカイブ

└── _includes/
    └── archive_post.html # category_index.html、blog/archives/index.html から

3. 生成されるファイルの構成

├── index.html (layout: default)
├── atom.xml
├── blog/
│   └── archives/
│       └── index.html
├── sitemap.xml
├── favicon.png
├── images/
│   ├── bird_32_gray.png
│   ├── bird_32_gray_fail.png
│   ├── code_bg.png
│   ├── dotted-border.png
│   ├── email.png
│   ├── line-tile.png
│   ├── noise.png
│   ├── rss.png
│   └── search.png
├── javascripts/
│   ├── ender.js
│   ├── github.js
│   ├── libs/
│   │   ├── ender.js
│   │   ├── jXHR.js
│   │   └── swfobject-dynamic.js
│   ├── modernizr-2.0.js
│   ├── octopress.js
│   ├── pinboard.js
│   └── twitter.js
└── stylesheets/
	└── screen.css

4. Octopressの動作

–新規投稿–

コマンド
rake new_post['post title']
ファイル
└── _post/YYYY-MM-DD-post-title.markdown
YAMLブロック
---
layout: post
title: "post title"
date: YYYY-MM-DD hh:mm
comments: true
categories: [category1, ...]
---

–新規ページ–

コマンド
rake new_page[my-new-page]
rake new_page[my-new-page.html]
ファイル
├── my-new-page/index.markdown # rake new_page[my-new-page]
└── my-new-page/index.html     # rake new_page[my-new-page.html]
YAMLブロック
---
layout: page
title: 
date: YYYY-MM-DD hh:mm
comments: true
sharing: true
footer: true
---

Comments