にたまごほうれん草アーカイブ

はてなダイアリーで書いてた「にたまごほうれん草」という日記のアーカイブです。現在は「にたまごほうれん草ブログ」を運営中です。

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タグの後にテーブルタグで区切ってサムネイルとタイトルを別にしました。はてブ件数はタイトルの後に表示するようにしています。