Octopressのテーマをclassicからoctostrap3に変更してみる

デフォルトテーマ

Octopressではデザインテーマをinstallタスクにてインストールします。デフォルトでインストールされるテーマはclassicです。

installタスクの動作を理解する

Octopressでテーマを適用するinstallタスクの動作を見てみようと思います。

下記コードはOctopressのRakefileに記述されたinstallタスクです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

task :install, :theme do |t, args|
  if File.directory?(source_dir) || File.directory?("sass")
    abort("rake aborted!") if ask("A theme is already installed, proceeding will overwrite existing files. Are you sure?", ['y', 'n']) == 'n'
  end
  # copy theme into working Jekyll directories
  theme = args.theme || 'classic'
  puts "## Copying "+theme+" theme into ./#{source_dir} and ./sass"
  mkdir_p source_dir
  cp_r "#{themes_dir}/#{theme}/source/.", source_dir
  mkdir_p "sass"
  cp_r "#{themes_dir}/#{theme}/sass/.", "sass"
  mkdir_p "#{source_dir}/#{posts_dir}"
  mkdir_p public_dir
end

コードを見ても分かる通り、installタスクで実行していることは以下の6つの事だけで、とてもシンプルな動作です。#{theme}はデフォルトではclassicが代入される変数です(上記コードの6行目)。

  1. sourceディレクトリを作成
  2. .themes/#{theme}/sourceディレクトリ以下のファイルやディレクトリを再帰的にsourceディレクトリにコピー
  3. sassディレクトリを作成
  4. .themes/#{theme}/sassディレクトリ以下のファイルやディレクトリを再帰的にsassディレクトリにコピー
  5. source/_postsディレクトリを作成
  6. publicディレクトリを作成

テーマのインストール

テーマのインストールに必要な作業は以下の3つだけです。

  1. .themesディレクトリ以下にインストールしたいテーマをプロジェクトごとコピーする
    • .themes/octostrap3/のようになる
  2. installタスクをインストールしたいテーマを明示して実行する
    • rake 'install[octostrap3]'のようになる
  3. generateタスクを実行して静的ファイルを生成する

octostrap3テーマをインストールする

今回はOctostrap3をテーマとしてインストールしてみます。

octostrap3プロジェクトを.themesディレクトリ以下にcloneしてきます。

1

git clone https://github.com/kAworu/octostrap3 .themes/octostrap3

.themesディレクトリ以下はこのようなディレクトリ構成になるはずです。

### octostrap3テーマをローカル環境にcloneした状態
octopress
└── .themes/
    ├── classic
    └── octostrap3

Octopressのinstallタスクをテーマを指定して実行

1

rake 'install[octostrap3]'

Octopressのgenerateタスクを実行して静的コンテンツを生成

1

rake generate


これでサイトのデザインテーマをoctostrap3に変更できました！


と思ったらサイドサイドメニューのoctopress-tagcloud プラグインで生成されているulタグのデザインがoctostrap3に合っていない...


これはoctopress-tagcloudプラグインをインストールした際に置いたテンプレートファイルの書き方を修正することで対応できます。

octopress-tagcloud プラグイン向けのHTMLテンプレートファイルを修正

プラグインを利用してコンテンツを生成している場合、source/_includes/custom/asidesディレクトリ以下にコンテンツ生成用のHTMLテンプレートファイルを配置していると思います。

今回、デザインテンプレートをclassicからoctostrap3に変更したので、追加したテンプレートファイルのdivなどのブロック構成、classやidなどのデザインに関わるコードもoctostrap3のデザインに合う様に修正しようと思います。

ちょうど、octostrap3のブログページにCategory List Asideという記事でサイドメニューにカテゴリーリストを追加するためのテンプレートコードが掲載されていましたのでそのまま利用させて頂きます。

修正対象ファイル

以下のディレクトリツリーにある2つのHTMLファイルを修正します。

### octostrap3導入にあたって修正するテンプレートファイルのパス
octopress
└── source/
    └── _includes
        └── custom
            └── asides
                ├── category_list.html
                └── tag_cloud.html

修正

source/_includes/custom/asides/category_list.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<section class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Categories</h3>
  </div>
  <div class="list-group">
    {% for category in site.categories %}
    {% capture category_url %}//{% endcapture %}
    <a class="list-group-item " href="">
        <span class="badge"></span>
        
      </a>
    {% endfor %}
  </div>
</section>
source/_includes/custom/asides/tag_cloud.html
1
2
3
4
5
6

<section class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Tag cloud</h3>
  </div>
  <span id="tag-cloud">{% tag_cloud counter:true %}</span>
</section>


簡単でした！