Scuttleの見栄えを変更する
以前自分のサーバにScuttleをインストールしましたが、単にブックマークが羅列されているだけのシンプルなものなので、いまいち見ていて楽しくないという問題がありました。というわけで、SimpleAPIのウェブサイトサムネイル化ツールを使ってページのサムネイルを表示し、当該ブックマークのはてブでのブクマ件数も表示することにしました。
修正する箇所
とりあえず見た目はこんな感じです。
結構手抜きでちょちょいと作成したのですが、それなりに見た目がにぎやかになったと思います。
追加箇所は、scuttleディレクトリのtemplates/bookmark.tpl.phpです。
私は、SimpleAPIとはてブ件数を別ソースに追加しました。そのファイルの内容は以下の通り。
<?php function addThumbnailImage($url) { $simpleapi = 'http://img.simpleapi.net/small/'; $str = ''; $str .= '<a href="'. $url . '"><img src="' . $simpleapi . $url .'" alt="" width="128" height="128" hspace="4" vspace="4" align="left" border="0"></a>'; return $str; } function addHatenaUsers($url) { $hateb = 'http://b.hatena.ne.jp/entry/'; $str = ''; $str .= '<a href="' . $hateb . $url . '"><img src="' . $hateb . 'image/' . $url . '"/></a>'."\n"; return $str; } ?>
いやまー本当にたったこれだけのファイルなんですけどね。私はこれをoptional.phpというファイル名で保存しました。
で、templates/bookmark.tpl.phpの修正ですが、元ファイルにコメントで//Outputと書いてあるので、そこ以下を修正します。(だいたい107行目ぐらい)
<?php ... include_once('optional.php');//added echo '<li class="xfolkentry'. $access .'">'."\n"; echo '<table><tr><td>'; echo addThumbnailImage($address); echo '</td><td>'; echo '<div class="link"><a href="'. $address .'"'. $rel .' class="taggedlink">'. filter($row['bTitle']) ."</a></div>\n"; if ($row['bDescription'] != '') { echo '<div class="description">'. filter($row['bDescription']) ."</div>\n"; } echo '<div class="meta">'. date($GLOBALS['shortdate'], strtotime($row['bDatetime'])) . $cats . $copy . $edit ."</div>\n"; echo addHatenaUsers($address); echo '</td></tr></table>'; echo "</li>\n"; ... ?>
サムネイルは、レイアウトをはみ出してしまわないように、LIタグの後にテーブルタグで区切ってサムネイルとタイトルを別にしました。はてブ件数はタイトルの後に表示するようにしています。