すたすた式
Blogger QooQ
ラベルウィジェットの既存のタグにJavaScriptを追加した簡便なものです。
先頭に#があるラベルだけを振り分けます。Bloggerのタグだけで振り分けることもできますが、この場合先頭以外の#も拾ってしまうみたいです。
#
あまりないと思いますが先頭以外に#がある場面を想定しました。
いずれかの方法で設置してください。
カテゴリー用とタグ（ハッシュタグ）用のコードは条件分岐のcheckSrtingの値が違うだけです。
checkSrting
カテゴリー checkSrting == false タグ（ハッシュタグ） checkSrting == true
正規表現で先頭の#を設定しています。regexpの値を変更すればいろいろな文字や文字の場所（位置）を設定できます。
regexp
regexp = /^#/;
リスト表示とクラウド表示を両方用意しましたが、自分が使用している方だけ書き換えてもOKです。
QooQ v2.00（Widget version1）で確認しました。
HTMLを編集します。必ずバックアップを取ってから作業してください。
変更箇所（リスト）
変更箇所（クラウド）
それぞれの<b:loop values='data:labels' var='label'> ~ </b:loop>を変更後のコードに置き換えます。
<b:loop values='data:labels' var='label'> ~ </b:loop>
変更前
<b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'><data:label.name/></span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> </b:if> <b:if cond='data:showFreqNumbers'> <span dir='ltr'>(<data:label.count/>)</span> </b:if> </li> </b:loop>
変更後
<!-- ラベルを振り分ける カテゴリー リスト表示 --> <script> (function showCategoryList() { /** * 正規表現で先頭の#を設定 */ const regexp = /^#/; let checkSrting; <b:loop values='data:labels' var='label'> /** * ラベル名に#があるか判定 * @type {boolean} */ checkSrting = regexp.test("<data:label.name/>"); if (checkSrting == false) { const labelElm = ` <li> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'> <data:label.name/> </span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'> <data:label.name/> </a> </b:if> <b:if cond='data:showFreqNumbers'> <span dir='ltr'>(<data:label.count/>)</span> </b:if> </li>`; document.currentScript.insertAdjacentHTML("beforebegin", labelElm); } </b:loop> })(); </script> <!-- End ラベルを振り分ける カテゴリー リスト表示 -->
<b:loop values='data:labels' var='label'> <span expr:class='"label-size label-size-" + data:label.cssSize'> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'><data:label.name/></span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> </b:if> <b:if cond='data:showFreqNumbers'> <span class='label-count' dir='ltr'>(<data:label.count/>)</span> </b:if> </span> </b:loop>
<!-- ラベルを振り分ける カテゴリー クラウド表示 --> <script> (function showCategoryCloud() { /** * 正規表現で先頭の#を設定 */ const regexp = /^#/; let checkSrting; <b:loop values='data:labels' var='label'> /** * ラベル名に#があるか判定 * @type {boolean} */ checkSrting = regexp.test("<data:label.name/>"); if (checkSrting == false) { const labelElm = ` <span expr:class='"label-size label-size-" + data:label.cssSize'> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'><data:label.name/></span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> </b:if> <b:if cond='data:showFreqNumbers'> <span class='label-count' dir='ltr'>(<data:label.count/>)</span> </b:if> </span>`; document.currentScript.insertAdjacentHTML("beforebegin", labelElm); } </b:loop> })(); </script> <!-- End ラベルを振り分ける カテゴリー クラウド表示 -->
<!-- ラベルを振り分ける タグ リスト表示 --> <script> (function showTagList() { /** * 正規表現で先頭の#を設定 */ const regexp = /^#/; let checkSrting; <b:loop values='data:labels' var='label'> /** * ラベル名に#があるか判定 * @type {boolean} */ checkSrting = regexp.test("<data:label.name/>"); if (checkSrting == true) { const labelElm = ` <li> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'> <data:label.name/> </span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'> <data:label.name/> </a> </b:if> <b:if cond='data:showFreqNumbers'> <span dir='ltr'>(<data:label.count/>)</span> </b:if> </li>`; document.currentScript.insertAdjacentHTML("beforebegin", labelElm); } </b:loop> })(); </script> <!-- End ラベルを振り分ける タグ リスト表示 -->
<!-- ラベルを振り分ける タグ クラウド表示 --> <script> (function showTagCloud() { /** * 正規表現で先頭の#を設定 */ const regexp = /^#/; let checkSrting; <b:loop values='data:labels' var='label'> /** * ラベル名に#があるか判定 * @type {boolean} */ checkSrting = regexp.test("<data:label.name/>"); if (checkSrting == true) { const labelElm = ` <span expr:class='"label-size label-size-" + data:label.cssSize'> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'><data:label.name/></span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> </b:if> <b:if cond='data:showFreqNumbers'> <span class='label-count' dir='ltr'>(<data:label.count/>)</span> </b:if> </span>`; document.currentScript.insertAdjacentHTML("beforebegin", labelElm); } </b:loop> })(); </script> <!-- End ラベルを振り分ける タグ クラウド表示 -->
通常？、ラベルの振り分けはBloggerのタグだけで可能。スマートなやり方です。
L'opérateur de contenu / Contains operator : contains - Blogger Code PE
#がついてるラベルは
<b:loop values='data:labels' var='label'> <b:if cond='data:label.name contains "#"'> </b:if> </b:loop>
notをつければ#がついていないラベルを振り分けることができます
not
<b:loop values='data:labels' var='label'> <b:if cond='data:label.name not contains "#"'> </b:if> </b:loop>
または、ラムダ式を使用して振り分けることもできます
【Blogger】ラベルをカテゴリーラベルと#タグ風に分けてみた | 勉強でもするか
【Blogger】ラベル表示をカテゴリーとハッシュタグに分ける方法 - IB-Note
ただ、この方法だと先頭以外の#も拾ってしまうようです:(
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
コメントなし:
コメントを投稿