Jeansにおける、スキンの継承
2010年5月31日
今回Jeansで構築したブログでは、デフォルトスキン(default)をそのまま使うわけではないので、新しいスキン(default2)を作成して、それで表示するようにした。
デフォルトスキンの中で変更したかった部分は
1)サイドバーを左に表示させる
2)インデックスページで、リンク集と最新コメントのリストを表示させる
3)「いままでの記事」のリストを、すべてではなく10か月分だけ表示させる。
4)ページング機能を使い、インデックスページで最新10件より前の記事も表示させる
これらの設定は、デフォルトスキンではどのファイルでされているかというと、
1)skins/default/styles/base.css
2)skins/default/index.inc
3)skins/default/template/menu_archive.inc
4)skins/default/template/short.inc
である。
もっとも分かりやすい方法は、skins/default/ディレクトリ全体を、skins/default2/ディレクトリとしてコピーし、該当部分を変更するというもの。だが、この方法では、Jeansのバージョンアップでデフォルトスキンが変更になった場合、必要があれば、skins/default2/の該当部分をすべて修正しなければならない。Jeansではスキンの継承機能を用いて、こういったことに対処することができる。新しく記述するスキンでは、変更したいファイルだけ記述すればよい。
手順として、まずskins/default2/ディレクトリを作成し、上で紹介したリンク先に従って、次の内容でskins/default2/skin.incを作成した。
1)skins/default/styles/base.cssファイルをskins/default2/styles/base.cssにコピーし、編集。編集箇所は、「左メニューにする時はコメントを解除してください。」と書かれた部分のコメントを解除。
2)skins/default/index.incファイルをskins/default2/index.incにコピーし、編集。次の2行を適当な場所にそれぞれ追加した。
3)skins/default/template/menu_archive.incを、skins/defaul2/template/menu_archive.incにコピーし、次の内容になるように編集。
4)skins/default/template/short.incをskins/default2/template/short.incにコピーし、次の内容を途中に追加。
デフォルトスキンの中で変更したかった部分は
1)サイドバーを左に表示させる
2)インデックスページで、リンク集と最新コメントのリストを表示させる
3)「いままでの記事」のリストを、すべてではなく10か月分だけ表示させる。
4)ページング機能を使い、インデックスページで最新10件より前の記事も表示させる
これらの設定は、デフォルトスキンではどのファイルでされているかというと、
1)skins/default/styles/base.css
2)skins/default/index.inc
3)skins/default/template/menu_archive.inc
4)skins/default/template/short.inc
である。
もっとも分かりやすい方法は、skins/default/ディレクトリ全体を、skins/default2/ディレクトリとしてコピーし、該当部分を変更するというもの。だが、この方法では、Jeansのバージョンアップでデフォルトスキンが変更になった場合、必要があれば、skins/default2/の該当部分をすべて修正しなければならない。Jeansではスキンの継承機能を用いて、こういったことに対処することができる。新しく記述するスキンでは、変更したいファイルだけ記述すればよい。
手順として、まずskins/default2/ディレクトリを作成し、上で紹介したリンク先に従って、次の内容でskins/default2/skin.incを作成した。
<%view.extends(default)%> <%view.include(/default/skin.inc)%>この段階で、default2スキンが使用可能になっている(defaultスキンとまったく同じではあるが)。つづけて、次のように新しいファイルを作成し、編集した。
1)skins/default/styles/base.cssファイルをskins/default2/styles/base.cssにコピーし、編集。編集箇所は、「左メニューにする時はコメントを解除してください。」と書かれた部分のコメントを解除。
2)skins/default/index.incファイルをskins/default2/index.incにコピーし、編集。次の2行を適当な場所にそれぞれ追加した。
<%view.parse(/jp/sticky/bookmarks.inc,789)%> <%view.parse(/jp/latestcomments/comments.inc,10)%>それぞれ、jp_stickyと、jp_LatestCommentsというプラグインを用いている。これら2つのプラグインの使い方は、後ほど。
3)skins/default/template/menu_archive.incを、skins/defaul2/template/menu_archive.incにコピーし、次の内容になるように編集。
<%select(template)%> <%case(body)%> <%if.data.islessthan(11,counter)%> <dd><a href="<%data(link)%>"><%view.strftime(date)%></a></dd> <%elseif.data.is(11,counter)%> <dd><a href="<%blog.link(archivelist)%>">もっと前の記事</a></dd> <%endif%> <%case(date)%> %Y.%m <%endselect%>テンプレートを利用した表示中は、counterというデーターが1から順に増えてゆくので、これを用いて表示を10個までに制限した。
4)skins/default/template/short.incをskins/default2/template/short.incにコピーし、次の内容を途中に追加。
<%case(foot)%> <%page.init%> <div style="text-align:center;"> <%if.page.next%><a href="<%data(libs,page,link,next)%>"><<前の記事</a><%endif%> <%if.page.prev%> <a href="<%data(libs,page,link,prev)%>">後の記事>></a><%endif%> </div>ここでは、<%page%>というJeans本体の持つ機能を用いた。Jeansでは、ページングについては色々カスタマイズできるようにしてあるので、また後ほど紹介したい。
コメント
Kat (2010年6月6日 14:54:56)
新たにdefault3スキンを作成し、skins/default3/skin.incを次のようにした。
<%view.extends(defaul2,default)%>
<%view.include(/default/skin.inc)%>
これはdefault2の派生スキンである。変更点があるindex.incだけ、skins/default3/index.incとしてファイルを持たせてある。つまり、skins/default3/ディレクトリには、skins.incとindex.incの2つのファイルだけが存在する。
<%view.extends(defaul2,default)%>
<%view.include(/default/skin.inc)%>
これはdefault2の派生スキンである。変更点があるindex.incだけ、skins/default3/index.incとしてファイルを持たせてある。つまり、skins/default3/ディレクトリには、skins.incとindex.incの2つのファイルだけが存在する。