FC2ブログをやっているのですが、カテゴリごとのランダムページを作りたいです。

記事一覧の URL に特別な指定を付けたときに、カテゴリ別に記事をいくつかランダムに抽出して表示するようなスクリプトを仕込んでみました。

まずは、見た目から。

• 普通の記事一覧
  http://jimsie.blog57.fc2.com/archives.html
• カテゴリ別にランダムに記事を抽出
  http://jimsie.blog57.fc2.com/archives.html?random=true

※記事一覧の archives.html のお尻に ?random=true を付けたときにだけ、スクリプトがうごくようにしています。



記事一覧の HTML を加工して作っているので、使っているテンプレートによって、微妙にコードを書き分けてあげる必要があります。
ぼくが使っているテンプレートは mushroom_liquid というやつなのですが、記事一覧の部分はこんな感じになっています。

    <!--titlelist_area-->
	<div class="content">
		<p class="sub_header">title list</p>
		<!--titlelist-->
		<div class="list_body">
			<%titlelist_year>/<%titlelist_month>/<%titlelist_day> : <a href="<%titlelist_category_url>" title="<%template_view_category>"><%titlelist_category></a> : <h2 class="listtitle"><a href="<%titlelist_url>" title="<%titlelist_body>"><%titlelist_title></a></h2>
		</div>
		<!--/titlelist-->
	   	<div class="pagetop"><a href="#container" title="<%template_go_top>">@</a></div>
	</div>
    <!--/titlelist_area-->

これを踏まえて、テンプレートで HTML に二ヶ所、スタイルシートに一ヶ所、コードを追加しました。

まずは、HTML の一ヶ所目。
jQuery を使っているので、それの読み込みです。
head のブロックの最後に、コメント抜きで一行追加しました。

<!-- jquery -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

次は、HTML の二ヶ所目で、スクリプトの本体です。
titlelist_area の最後の方に、javascript のコードをどかんと追加です。

<script type="text/javascript">
$(function() {

    var N = 2;  /* 表示する記事の件数 */

    if (document.location.search.indexOf("random=true") < 0) {
        return;
    }

    function pickup(list, n) {
        if (list.length <= n) {
            return list.slice();
        }
        var ret = []
        for (var i = 0 ; i < n ; ++i) {
            var idx = Math.floor(Math.random() * list.length);
            ret.push(list[idx]);
            list.splice(idx, 1);
        }
        return ret;
    }

    var cate = [];
    /* ★ この辺りが、使っているテンプレートによって違ってくる */
    $(".content DIV.list_body").each(function() {
        var link = $("A", this);
        var c = link.get(0);
        var u = link.get(1);
        var list = cate[c.innerHTML];
        if (! list) {
            list = [];
            cate[c.innerHTML] = list;
            cate[c.innerHTML].cate = c;
        }
        list.push(u);
    })

    var target = $(".content").get(0);
    target.innerHTML = "";
    var ul = document.createElement("UL");
    for (var i in cate) {
        var li = document.createElement("LI");
        ul.appendChild(li);
        li.appendChild(cate[i].cate);
        li.className = "randomlist_category";
        var ul2 = document.createElement("UL");
        li.appendChild(ul2);
        var list = cate[i];
        sub = pickup(list, N);
        for (var j in sub) {
            var li2 = document.createElement("LI");
            ul2.appendChild(li2);
            li2.appendChild(sub[j]);
            li2.className = "randomlist_item";
        }
    }

    target.appendChild(ul);

});
</script>

スタイルシートの最後に以下を追加します。

li.randomlist_category {
    list-style-type : square;
    list-style-position : outside;
    margin-left : 3ex;
}
li.randomlist_item {
    list-style-type : circle;
    list-style-position : outside;
    margin-left : 3ex;
}