2023年に行ったBlogger(QooQ)のカスタマイズです。
関連記事を生成して表示する
関連記事を生成・出力表示するプログラム。
先行事例と比べてとくに新しい手法や機能はありませんが、自分なりに理解できる形、構成にしてみました。
【Blogger】関連記事を生成・出力表示するプログラム
Blogger用に関連記事を生成・出力表示するプログラムを書いてみました。 関連記事を生成するためのデータはラベルをもとにフィードから取得しました。 実験的にですがIntersectionObserverでページの任意の位置でプログラムが実行可能です。
sutasutashiki.blogspot.comBloggerが挿入する標準JS（widgets.jsなど）をイベント後に生成
クリックやタップをトリガーにして標準JS（widgets.jsなど）読み込むプログラムです。
b:js='true'のときに標準JSの読み込みを遅らせたかったので作成しました。
【実験】Bloggerが挿入する標準JS（widgets.jsなど）をイベント後に生成する【遅延読み込み】
Bloggerがbody終了タグの上に挿入するwidgets.jsなどのJavaScriptをコメントアウトしたあとで内容を正規表現で取得して新しくJavaScriptをつくりました
sutasutashiki.blogspot.comランダムポストウィジェットを作成
Blogger用のランダムポストウィジェットを作成しました。
データは関連記事を生成したときと同様にフィードから取得しました。
do while文を使いました。
Blogger用のランダムポストウィジェットを作成しました
Blogger用のランダムポストウィジェットを作成しました。 投稿をまとめて表示するタイプと、ひとつずつ表示するタイプ2種類を作成しました。 HTML/JavaScriptガジェット（ウィジェット）での使用を想定しています。
sutasutashiki.blogspot.comクリックでコメントフォームを読み込む
コメントが「埋め込み」の場合のコメントフォームを読み込む時の転送量、約500kBを節約するために作成しました。
既存のコードを流用しているので面倒なことになっています。
【節約】クリックでコメントフォームを読み込む【Blogger】
Bloggerのコメントフォームをクリックで読み込むプログラムです。 コメントをしない場合もコメントフォームの転送量が発生します。そこで転送量を節約するプログラムを書いてみました。
sutasutashiki.blogspot.com覚え書きです。
【Blogger】ボタンクリックでコメントフォームを読み込むプログラム作成の覚え書き-すたすた式
ラベルをカテゴリーと#タグ（ハッシュタグ）に分けて表示する
独自タグだけで作成するのがスマートですが、ラベルがC#など、#が先頭にない場合も拾ってしまいます。
そこでラベルの先頭に#があるものだけを振り分けるために作成しました。
ラベルウィジェットの既存のコードにJavaScriptを追加した簡便なものです。
【Blogger】ラベルをカテゴリーと#タグ（ハッシュタグ）に分けて表示する
先頭に#があるラベルだけを条件としてカテゴリーとタグにわけて表示するプログラムです
sutasutashiki.blogspot.comその他
記事にはしていませんが、以下を行いました。
コピーライトの更新年を自動更新する
コピーライトの更新年を自動更新するコードです。
コピーライトの更新年、さらにはコピーライトそのものも不要のようですが、興味があったので追加してみました。
参考サイト：コピーライト表記に年号は必要？ ©の意味と書き方とは ― コラム ー ベイクロスマーケティング株式会社
JavaScriptが無効の状態でも発行年だけは表示されるようにしました。
<span class="copyright-year">© 2015</span>
<script>
//<![CDATA[
(function autoUpdateYear() {
// 現在の年を取得
const thisYear = new Date().getFullYear();
// 現在の年を挿入したHTMLを作成
const yearUpdated = `<span class="copyright-year-updated"> - ${thisYear}</span>`;
// HTMLを出力
document.currentScript.insertAdjacentHTML("beforebegin", yearUpdated);
})();
//]]>
</script>
新年のあいさつを毎年表示する
サイドバーの「お知らせ」（HTML/JavaScriptウィジェット）に毎年1月1日から1月7日まで新年のあいさつを表示するコードです。
<div id="sidebarInfo" class="sidebar__info">
<ul class="sidebar__info--info-mark">
<script>
//<![CDATA[
(function showGreeting() {
// 現在の日付を取得する
const today = new Date();
// 1月1日から1月7日までの期間かどうかを判定する
// 特定の年のみの場合はコメントアウトを取る
const isNewYear =
// today.getFullYear() === 2024 &&
today.getMonth() === 0 && today.getDate() >= 1 && today.getDate() <= 7;
// 期間内であれば あけましておめでとうございます を表示する
if (isNewYear) {
const greeting = `<li class="greeting">🎍🎌新年あけまして<br>おめでとうございます<br>本年もよろしくお願いいたします</li>`;
document.currentScript.insertAdjacentHTML("beforebegin", greeting);
}
})();
//]]>
</script>
</ul>
</div>
コメントなし:
コメントを投稿