サイドバーのカテゴリー・タグをグループに分けし見出しを追加するJS

目的

muragonのカスタマイズ。
サイドバーのカテゴリー・タグは、カテゴリーと言う概念でなくタグでしかない。
また、件数順で表示される為、件数に応じ順序が変化する。
カテゴリー分けし見出しを追加する。

投稿記事に付加するカテゴリー・タグは、「カテゴリー-タグ」する。
カテゴリーを見出しとして表示する。

Javascript

$(function() {
var htm_ary = [];
var tag_ary = [];
var flg_ary = [];
var html = '';
var tag = '';

$("[data-part-type=category] li").each(function(i) {
var url = $(this).find("a").attr("href");

var tag = $(this).text();
var tag = tag.replace(/\r?\n/g,""); /* 改行削除 */
tag = tag.replace(/^\s+|\s+$/g,""); /* 前後空白削除 */

tag_ary[i] = tag.split("-")[0];
htm_ary[i] = '<li><a href="' + url + '">' + tag.split("-")[1] + '</a></li>';
flg_ary[i] = 0;
});


for (var i=0;i<tag_ary.length;i++) {

/* 新しいカテゴリ */
if (flg_ary[i] == 0) {
if(tag != tag_ary[i]) {
tag = tag_ary[i];
html = html + '<li class=u-title>' + tag_ary[i] + '</li>';
}

/* 同じカテゴリを出力 */
for (var j=i;j<tag_ary.length;j++) {

if ((flg_ary[j] == 0) && (tag == tag_ary[j])) {
html = html + htm_ary[j];
flg_ary[j] = 1;
}
}
}
}

/* HTML出力 */
$("[data-part-type=category] .aside-module-list").html(html);
});

CSS

/* 見出し */
[data-part-type="category"] .u-title {
font-weight : bold;
}

/* テーマ */
[data-part-type="category"] a {
margin-left : 1em;
color : #999;
}

[data-part-type="category"] a:hover {
color : #ff0000;
}