テンプレートのカスタマイズ

せりか式 - カスタマイズ - adiary - テンプレートのカスタマイズ

テンプレートのカスタマイズ

ここでは,adiaryのテンプレートレベルでのカスタマイズについて載せています.

基礎知識

カスタマイズを始める前の基礎知識です.これを知らないとカスタマイズどころではありません.

カスタマイズしたら動作しなくなった.表示がおかしくなった.というときは,最初にifexecbeginelseendの数を確認してください. この対応関係が間違えている可能性大です.

Satsukiシステム

adiaryを動作させている基本システムです.
感覚的には,PHPに似ていますので,PHPを使ったことのある方は直感的に分かると思います.

<$<@で始まる部分は,命令部分です.
<@>だけの場合は行コメントです.
<@に続いて変数名がある場合,その変数が出力されます.

<@if(条件)><@ifexec(条件,begin[,begin])>は条件分岐です.
<$end>とペアになっています.
<@ifexec(条件,begin[,begin])>はelseがあるか無いかでbeginの数が違います.

テンプレートの読み方
 1: <@ifexec(v.exsits_daybook, begin)>  v.exsits_daybookが真であれば,endまでを実行する
 2: <!--RSS=========================================-->
 3: <div class="hatena-module">
 4: <div class="hatena-modulebody">
 5: <ul class="hatena-section">
 6: <@if(set.description, "<li><@set.description>\n")>    set.descriptionが真であれば,"<li><@set.description>\n"を出力する
 7: <@> set.category_name_list がある = 日記が存在する
 8: <@ifexec(set.diaries, begin)>    set.diariesが真であれば,endまでを実行する
 9: <li><a href="<@v.this_archive_dir><@v.rss_file>">RSS</a>, 
10: <a href="<@v.this_archive_dir>lirs.txt<@v.use_gzip>">LIRS</a>, 
11: <a href="<@v.this_archive_dir>di.txt">hina-di</a>
12: <li><a href="<@v.myself>?diary_list">過去日記の一覧</a>
13: <$end> 8行目のifexecに対応
14: </ul>
15: </div> <!-- hatena-modulebody -->
16: </div> <!-- hatena-module -->
17: <$end> 1行目のifexecに対応
ディレクトリの構造
adiary/
|-- diary.skel       adiaryのスケルトンファイル
|-- diary.user.skel  ユーザがカスタマイズしたスケルトンファイル.diary.skelよりも優先して読み込まれる.
|-- lib
|   `-- Satsuki      adiaryを動作させるSatsukiシステム.ここにDiary用モジュール(Diary.pm)が入っている.
`-- theme            テーマファイルを入れるフォルダ

テンプレートのカスタマイズは,diary.skelのファイルをdiary.user.skelにコピーして,こちらを編集することになります.

カスタマイズ


サイドバーの編集

サイドバーは,普段利用する_sidebar.htmlと,システムメニューの時に利用される_sidebar_sys.htmlの2種類あります.

サイドバーの項目

サイドバーには,標準で以下の項目が入っています.

順番を入れ替えたい場合,この辺の項目をごっそりと移動してしまえばすみます.

項目の追加

新規で項目を増やす場合,はてなのスタイルシートを利用していることを前提に編集する必要があります.

はてなスタイルシートに準拠した項目の追加
<div class="hatena-module">
<div class="hatena-moduletitle">項目のタイトル:必要なければ,この行は省略することができます</div>
<div class="hatena-modulebody">
この位置に項目の内容を書き加えます.
</div>
</div>

サンプル

トップへ