アーカイブガジェットの日付表示を変更する方法について自分の中では確定したので再び記事にしたいと思います。もし以前の記事を読んだ人達が知ったら「まだそんなことやってたの？」というツッコミを頂戴しそうだ。実際のところBLOGGER独自タグでどうにかならないかある程度あがいた後は一旦満足して放置していました。しかし最近JavaScriptで最新の投稿を表示するコードを自作して遊んでいるとdocument.write()を使用するのは非常に宜しくないという情報を目にしました。そこで以前のコードを書き換えることに。書き換えたコードがこちら。
<b:includable id='flat' var='data'>
<ul class='flat'>
<b:loop index='j' values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url' expr:id='"arc_date_change" + data:j'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
<script type='text/javascript'>
for(let i=0; i < <data:data.length/>; i++){
let jsdate1 = document.getElementById("arc_date_change"+i).textContent;
jsdate1 = jsdate1.replace( /(\d{2}\D)\s(\w+)/, '$2年$1' ).replace( /(\d\D)\s(\w+)/, '$2年0$1' );
document.getElementById("arc_date_change"+i).textContent = jsdate1;}
</script>
</b:includable>
黄色の下線を引いた部分が変更コードです。以前はループの中に入れていたスクリプトタグをループの外に置いたので多少は処理的にはマシかも？もしかしたらJSONデータの読み込みをしないのならJavaScriptを使用しようがBLOGGER独自タグで処理しようが速度は変わらないのかもしれませんが。どちらにせよ知識が少ないのでコードの効率的には微妙かもしれませんが。MENU形式も変更内容は同じ。ID設定をaタグじゃなくoptionタグにするだけです。そしてHIERARCHY(階層)形式については…よくよく考えると変更いりませんよね。階層形式の表示を改めてみていると設定で月だけを表示するようにしておくのが一番自然じゃないかな？と思いました。ただ二桁月と一桁月で表示を揃えるために「09月」みたいに0を追加したい場合は関数intervalのコードでaタグの箇所に以下のように条件分岐のコードを追加しておけば可能です。
<a class='post-count-link' expr:href='data:interval.url'>
<b:if cond='data:interval.name.length == 4'>
<b:eval expr='data:interval.name + "年"'/>
<b:elseif cond='data:interval.name.length == 3'/>
<data:interval.name/>
<b:else/>
<b:eval expr='"0" + data:interval.name'/>
</b:if>
</a>
JavaScriptを使わずに独自タグのみで解決できるなんて…もう階層形式でいいじゃないか！と思いました。でも知識が少し補充されたいまならFLATやMENU形式も独自タグでなんとかなりそうな気もする。もう階層形式に変更する気満々だし…やる意味ないだろうなぁ、と思いながらもモヤモヤを残さないために再挑戦…してみた結果なんとかなりました。まずはFLAT用のコードから。
<b:includable id='flat2' var='intervalData'>
<b:loop values='data:intervalData' var='interval'>
<ul class='flat'>
<b:if cond='data:intervalData.length > 0'>
<b:loop values='0 to data:intervalData.length - 1' var='i'>
<b:loop values='0 to data:intervalData[i].data.length - 1' var='j'>
<li expr:class='"archivedate"'>
<a expr:href='data:intervalData[i].data[j].url'>
<b:if cond='data:intervalData[i].data[j].name.length == 3'>
<b:eval expr='data:intervalData[i].name + "年" + data:intervalData[i].data[j].name'/>
<b:else/>
<b:eval expr='data:intervalData[i].name + "年" + "0" + data:intervalData[i].data[j].name'/>
</b:if>
</a><span class='post-count' dir='ltr'>(<b:eval expr='data:intervalData[i].data[j].post-count'/>)</span>
</li>
</b:loop>
</b:loop>
</b:if>
</ul>
</b:loop>
</b:includable>
次はMENU用のコード↓。
<b:includable id='menu2' var='intervalData'>
<select expr:id='data:widget.instanceId + "_ArchiveMenu"'>
<!--<option value=''><data:title/></option>-->
<b:loop values='data:intervalData' var='interval'>
<b:if cond='data:intervalData.length > 0'>
<b:loop values='0 to data:intervalData.length - 1' var='i'>
<b:loop values='0 to data:intervalData[i].data.length - 1' var='j'>
<option expr:value='data:intervalData[i].data[j].url'>
<b:if cond='data:intervalData[i].data[j].name.length == 3'>
<b:eval expr='data:intervalData[i].name + "年" + data:intervalData[i].data[j].name'/> (<b:eval expr='data:intervalData[i].data[j].post-count'/>)
<b:else/>
<b:eval expr='data:intervalData[i].name + "年" + "0" + data:intervalData[i].data[j].name'/> (<b:eval expr='data:intervalData[i].data[j].post-count'/>)
</b:if>
</option>
</b:loop>
</b:loop>
</b:if>
</b:loop>
</select>
</b:includable>
それぞれid名をflat2とmenu2にしておきました。使用方法としてはまずはアーカイブの設定で階層表示に変更、日付も月表示だけに変更してください。わかるひとならコードのwidget-settingの部分から直接書き換えて変更することも可能ですが。次に必要なほうのコードあるいは両方をアーカイブガジェット内のmainのincludableタブが閉じられた後あたりに貼り付ける（他の関数のincludableタグ内に入れてしまわないように注意！）。そして表示スタイルHIERARCHYに対する関数呼び出しのためのnameを「flat2」あるいは「menu2」の使用したい方に変更して保存で終了です。貼り付ける場所は元々flatやらintervalやらの関数が設置されてある場所なのでみたらわかると思います。わからなければ絶対に使用しないでください。事前にバックアップをとってプレビューで表示を確認したのちの保存を激しく推奨します。以下のコード部分の黄色下線部分がnameの変更箇所です。呼び出しの順番は同じ書かれ方だと思うのですが、念のために横のstyleがHIERARCHYで間違いないことを確認してから書き換えてください。
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:include cond='data:style == "HIERARCHY"' data='data' name='interval'/>
<b:include cond='data:style == "FLAT"' data='data' name='flat'/>
<b:include cond='data:style == "MENU"' data='data' name='menu'/>
</div>
以上の作業で変更できていると思います。HIERARCHYスタイルが使用できるデータが多いことからこのような形になりました。実際のところこれくらいの処理ならJavaScriptと独自タグで速度的には体感変わらないのかもしれないですけれど、僕的にはモヤっとしたものがなくなりスッキリして大満足です。ブラウザのJavaScript非対応を気にしなくても良いですし。一つ不安要素があるとすれば僕のブログには年をまたいだ記事データがないので、そこの表示確認が取れていないこと。複数年にわたった記事データの場合ちゃんと表示されるかなぁ？と。たぶんコード的に問題ないとは思っているのですけれど不確かではあるので不安に思う方は使用を控えて下さい。実はもう一つ不安要素があったのですが、そちらは念のためにコードを追加することで打ち消しておきました。一切記事データがない状態でこのコードを使用されると表示がバグる可能性があったのです。BLOGGERを始めたばかりで一つも記事を書いていないのに僕のコードを使用しようと思うレアで変なひといるはずないのですが…まぁ念のため。あとは僕が階層形式に変更してみて不満に思った点の変更方法も記載しておきます。初期表示で最初の月の階層が開かれているのが微妙だったのです。僕は毎日記事を書いているので月の終わり頃には表示が邪魔くさくなってしまう。ということで変更コードを以下に。
<li expr:class='"archivedate " + (data:interval.name.length == 4 && data:intervalData.first.expclass ? "expanded" : "collapsed")'>
<!--↑がintervalの関数内部の<li>クラス名変更-->
<b:includable id='toggle' var='interval'>
<a class='toggle' href='javascript:void(0)'>
<span expr:class='"zippy" + (data:interval.expclass == "expanded" ? " toggle-open" : "")'>
<b:if cond='data:intervalData.first.expclass && data:interval.name.length == 4'>
▼ 
<b:elseif cond='data:blog.languageDirection == "rtl"'/>
◄ 
<b:else/>
► 
</b:if>
</span>
</a>
</b:includable>
最初のliタグのクラス名変更はidがintervalの関数内部のliタグです。クラス名にexpandedかcollapsedのどちらを設定するかで階層を閉じている状態にするか開いている状態にするかが決まるようです。なので最初の年だけ階層を開いて表示して後は全部閉じた状態で初期表示されるように条件付けしました。ただこのままだと▼や◄や►などの初期表示が少しおかしくなるのでtoggle関数内部も黄色下線部のように条件文を変更。以上で終了です。書き換えを間違えると表示がおかしくなると思うので自信が無い方はバックアップを超推奨します。自信がなくてもバックアップをほぼとらない僕のようなひとがいるかもしれませんが…お気をつけて。まぁ時間はかかりましたが満足いく結果になって良かった。BLOGGER独自タグへの理解も少し深まりましたし。次は何のコードをいじって遊ぼうかな。やっぱりJSONデータの読み込みについて調べるべきかな…う～んまぁ気が向いたら調べよう。
0 件のコメント:
コメントを投稿
認証キャプチャは指示された画像を全てチェック後に確認ボタンを押すと公開できるようになります。