はてなブログ: フィルタ機能付きカテゴリ一覧ページを作った

https://blog.kyanny.me/_categories

作り方

1. サイドバーにカテゴリーモジュールを設置する。表示件数「全て」を選択すること。
2. デザイン→カスタマイズ→デザイン CSS に↓の CSS を追記する。カテゴリが大量にある場合に全部表示されてブログトップページや記事ページが縦長になっても構わないならこの手順はスキップして良い。

/* https://stackoverflow.com/a/28118696/374851 */
[class~='hatena-module-category']:last-of-type {
  display: none;
}

1. 固定ページを作成する。URL も名前もなんでも良い。
2. 固定ページに以下の HTML コードを貼り付ける。JavaScript でブログトップページの HTML を取得し、手順 2 で非表示にしたカテゴリ一覧のデータを抽出し、固定ページ内にリンクを追加して、カテゴリ名を動的にフィルタする機能も実装している。

<input type="text" id="filter" placeholder="filter by category name" />
<div id="_categories">
    Fetching..
</div>
<script>
var _categories = document.getElementById("_categories");
fetch("https://blog.kyanny.me/").then(response => response.text()).then(html => {
    var parser = new DOMParser();
    var doc = parser.parseFromString(html, "text/html");
    var categories = Array.from(doc.querySelectorAll('[class~="hatena-module-category"]:last-of-type a'));
    var ul = document.createElement("ul");
    categories.forEach(category => {
        var a = document.createElement("a");
        a.setAttribute("href", category.href);
        a.textContent = category.innerText.trim();
        var li = document.createElement("li");
        li.appendChild(a);
        ul.appendChild(li);
    });
    _categories.innerHTML = "";
    _categories.appendChild(ul);
});

var filter = document.getElementById("filter");
filter.addEventListener("keyup", (e) => {
    var re = new RegExp(filter.value, "i");
    _categories.querySelectorAll("li").forEach(li => li.style.display = "");
    if (filter.value !== "") {
        _categories.querySelectorAll("li").forEach(li => {
            if (re.test(li.innerText)) {
                console.log('hi');
            } else {
                li.style.display = "none";
            }
        });
    }
});
</script>

デモ

youtu.be