Blogger ラベル頻度順パンくずリスト

English»

前回の記事「Blogger パンくずリスト（構造化データ対応）の作成」でBlogger のパンくずリストで複数のラベルを表示する場合、アルファベット順になることを書きました。

ラベルがツリー構造になっている場合、上位の階層にあるラベルほど使用頻度が高くなりますので、パンくずリストをラベル頻度順に並べることで「ほぼ」階層順に表示することができます。

アルファベット順のパンくずリストを JavaScript でラベル頻度順に並べ替えてみます。

前提

• ラベルガジェットを表示し、「ラベル毎の投稿数」を表示していること。
• ラベルガジェットの ID が Label1 であること
• パンくずリストの ID が breadcrumb であること
• パンくずリストが <li> タグを使用し、構造化データの形式が RDFa であること

参考

• ラベルガジェットからラベル数を取得する方法については、

  How to get Label Count outside the widget in Blogger

• 構造化データに対応したパンくずリストについては、

  Blogger パンくずリスト（構造化データ対応）の作成

を参照してください。

JavaScript

次の JavaScript を HTML の編集で </body> の前に挿入してください。

JavaScript

<script type='text/javascript'>
//<![CDATA[
(function(){
  var label = document.getElementById('Label1');
  if (label == null) return;
  var breadcrumb = document.getElementById('breadcrumb');
  if (breadcrumb == null) return;
  // store label name and count into object
  var labelCounts = {};
  // 'div ul li' is for List, 'div>span' is for Cloud 
  var elms = label.querySelectorAll('div ul li, div>span');
  [].forEach.call(elms, function(elm) {
    if (elm.childElementCount == 2) {
      labelCounts[elm.children[0].innerHTML] = Number(elm.children[1].innerHTML.replace(/[()]/g, ''));
    }
  });
  // sort breadcrumbs by label frequency
  var i = 0;
  [].slice.call(breadcrumb.querySelectorAll('li'))
    .sort(function (a, b) {
      var a = a.textContent.replace(/\r?\n/g, '');
      var b = b.textContent.replace(/\r?\n/g, '');
      if (labelCounts[a] == null || labelCounts[b] == null) return 0;
      if (labelCounts[a] > labelCounts[b]) return -1;
      if (labelCounts[a] < labelCounts[b]) return 1;
    }).forEach(function(li) {
      // set content attribute for RDFa
      pos = li.querySelector('[property="position"]');
      if (pos != null) {
        pos.setAttribute('content', ++i);
      }
      breadcrumb.appendChild(li);
    });
})();
//]]>
</script>

パンくずリストがラベル頻度順にソートされて表示されます。

注

ラベルの頻度が同じ場合は、アルファベット順（元のまま）となります。