スクロール時に付いてくるサイドバー

記事が長くなった時にサイドバーがあると、下の方に行った時に寂しくなるので下の方のコンテンツが着いてくる様なサイトが良くありますが、 ~~jquery–ex-flex-fiex~~というプラグインを使ってOctopressへ導入してみました。基本となっているテーマはデフォルトのClassicです。

jquery.ex-flex-fixedのインストール
_config.ymlで着いてくる要素の数を決めれるようにする
その他似たようなプラグイン

jquery.ex-flex-fixedのインストール

この~~レポジトリ~~ から直接取ってくるかclone:

git clone git://github.com/cyokodog/jquery.ex-flex-fixed.git

して、取ってきたjquery.exflexfixed-0.3.0.jsをsource/javascripts/へ入れます。

これをsource/_includes/custom/head.htmlへ次の行を加えて読み込み、さらに下記の様なスクリプトも.side-scrollというクラスに関して作っておきます。

<script src="{{root_url}}/javascripts/jquery.exflexfixed-0.3.0.js" type="text/javascript"></script>
<script>
  jQuery(function($){
    $('.scroll-fixed').exFlexFixed({
      watchPosition: true,
      container : '#content'
    });
  });
</script>

#contentはsource/_layouts/default.htmlにあるコンテンツ用のdiv要素に対するIDです。 (これがスクロールしたりするときにどこからどこまでを見るか、という全体をになる。)

watchPositionについては作者さんのページに説明がありますが、少なくとも自分の今の状態だと入れておかないと最初に表示した時に要素がかぶってしまうので必要でした。

_config.ymlで着いてくる要素の数を決めれるようにする

サイドバーを構築する時に使われるplugins/include_array.rbを下の様に変更して<div class="scroll-fixed">~<\div>で好きな数(n_scroll_fixed)だけサイドバーの要素を囲める様にします。

include_array.rb.diff

diff --git a/plugins/include_array.rb b/plugins/include_array.rb
index 000040f..0758e53 100644
--- a/plugins/include_array.rb
+++ b/plugins/include_array.rb
@@ -31,6 +31,11 @@ module Jekyll
       end
-
       rtn = ''
+      n_files = context.environments.first['site'][@array_name].size ? \
+        context.environments.first['site'][@array_name].size : 0
+      n_files_count = n_files
+      n_last_fixed = context.registers[:site].config['n_scroll_fixed'] ? \
+        context.registers[:site].config['n_scroll_fixed'] : 0
       (context.environments.first['site'][@array_name] || []).each do |file|
         if file !~ /^[a-zA-Z0-9_\/\.-]+$/ || file =~ /\.\// || file =~ /\/\./
           rtn = rtn + "Include file '#{file}' contains invalid characters or sequences"
@@ -42,11 +47,19 @@ module Jekyll
             source = File.read(file)
             partial = Liquid::Template.parse(source)
             context.stack do
+              if n_files_count == n_last_fixed
+                rtn = rtn + "<div class=\"scroll-fixed\">"
+              end
+
               rtn = rtn + partial.render(context)
+              if n_last_fixed != 0 and n_files_count == 1
+                rtn = rtn + "</div>"
+              end
             end
           else
             rtn = rtn + "Included file '#{file}' not found in _includes directory"
           end
+          n_files_count -= 1
         end
       end
       rtn
@@ -56,3 +69,4 @@ module Jekyll
 end