IT the Best

HTML/CSS/JSに関する情報やはてなブログのカスタマイズに関する情報を掲載しています。

【はてなブログ】カテゴリー別記事一覧のサイトマップページを作る |【カスタマイズ】

f:id:Surprisedblog:20190619185106j:plain

 

カテゴリー別の記事一覧ページを固定ページで作りました。

html,css,javascriptそしてphpを利用して表示させています。

※固定ページは、はてなブログPROのみ作成できます。

 

カテゴリーを取得 

var category_list = []
var category = $(".hatena-module-category .hatena-module-body>ul>li")
category.each(function (i, e) {
    if (e.style.display != "none") {
        /*カテゴリーの記事数を消す*/
        var c_name = $(e).find(">a").text()
        c_name = c_name.replace(/[\s]/g, "")
        c_name = c_name.replace(/(\(.*\)$)/, "")
        /*カテゴリーの記事数を消す*/
        category_list.push(c_name)
    }
})

※階層カテゴリーの場合は、最上位カテゴリーのみを取得しています

 

カテゴリー別に記事を取得

for (var i of category_list) {
    var url = phpapi + "https://www.it-the-best.com/archive/category/" + i
    $.ajax({
        type: 'POST',
        url: url,
        dataType: "html",
    }).always((data) => {
        var data_element = $($.parseHTML(data));//parse
        var main = data_element.find("#main-inner")

        $("#main-inner")[0].append(main[0])
    });
}

 ajaxを使用して、カテゴリーの記事一覧ページ(/archive/category/...)から記事の一覧を取得します。

 

 

※JavaScriptから直接取得しようとするとうまくいかないので、PHP経由で一覧の取得をしています。変数phpapiにはそのphpファイルが置いてあるURLが入ります。

<?php 
    $entry_url = $_GET["entry_url"] ;
    $page = @file_get_contents($entry_url);

    echo ($page);
?>

変数entry_urlは、取得したいカテゴリー別ページのURLが入ります。

 

 

取得したページをそのまま表示させて、前述のJavaScriptのajaxで記事を取得しています。

 

 

表示

はてなモジュールのカテゴリー一覧からカテゴリーを取得しているため、ページ読み込み後に処理を行っています。

$(function () {
var category_list = []
var category = $(".hatena-module-category .hatena-module-body>ul>li")
category.each(function (i, e) {
    if (e.style.display != "none") {
        /*カテゴリーの記事数を消す*/
        var c_name = $(e).find(">a").text()
        c_name = c_name.replace(/[\s]/g, "")
        c_name = c_name.replace(/(\(.*\)$)/, "")
        /*カテゴリーの記事数を消す*/
        category_list.push(c_name)
    }
})

for (var i of category_list) {
    var url = phpapi + "https://www.it-the-best.com/archive/category/" + i
    $.ajax({
        type: 'POST',
        url: url,
        dataType: "html",
    }).always((data) => {
        var data_element = $($.parseHTML(data));//parse
        var main = data_element.find("#main-inner")

        $("#main-inner")[0].append(main[0])
    });
}
})

固定ページにこのようなスクリプトを埋め込んで表示させています。

 

 

 //作成したカテゴリー別記事一覧ページ

www.it-the-best.com

 

 

記事を取得するためのアクセス(jsのajax通信)は、制約によってはじかれる可能性があるので、今回のはてなブログカスタマイズはすべての環境でできるものではありません。