🐥

Bloggerの<b:data>タグを利用する

2022/05/04に公開約2,400字

Bloggerの<b:data>を利用する方法

Blogger のテンプレートを作るために、この情報が一番重要と言っても過言ではありませんが、情報が少ないため挫折する原因になっているように感じます。

まず、アクセスできるデータには、大きく分けて『グローバルな設定値』『現在の表示状態』『ウィジェットのデータ』の 3 つがあります。 これらは、プロパティが多いだけでなく、画面の表示状態やウィジェットの設定によって参照できるプロパティが異なるため、分かりにくさの原因になっています。 Blogger のヘルプでは、『ウィジェットのデータ』のプロパティは網羅的に説明されていますが、『グローバルな設定値』『現在の表示状態』の説明が簡素になっていますので、この記事では主にその部分を補足します。

なお、これらのデータにアクセスし、コンテンツとして表示する場合は <data:blog.title />、タグの属性に含める場合は <img expr:alt='data:blog.title'> のように記述します。

グローバルな設定値にアクセスする

グローバルな設定値とは、全てのページでいつでもアクセスできるデータで、blogtemplate プロパティで定義されています。 blog プロパティは、ブログウィジェットのプロパティです。

'blog': {
    'title': ブログのタイトル,
    'locale': 言語設定,
    'languageDirection': <html>タグのdir属性, 
    'pageType': item|archive|index,
    'homepageUrl': ブログのホームのURL,
    'encoding': 文字のエンコーディング,
    'url': 表示しているページのURL,
    'pageTitle': 表示しているブログ記事やページコンテンツのタイトル,
    'pageName': 表示しているページの名前,
    'feedLinks': 表示しているページのフィードのリンク,
    'metaDescription': ブログの説明,
    'searchUrl': ブログの検索結果アクションを実行するURL
}

template プロパティは、テンプレートのメタ情報ですので、あまり利用することはありません。

現在の表示状態にアクセスする

現在の表示状態とは、『記事の一覧』『検索結果の一覧』『個別記事の表示』『ページコンテンツの表示』などを表し、view プロパティで定義されます。 ブログの表示内容を切り替える場合には、isFoo プロパティを<b:if>で利用します。 また、一部のプロパティは、blog と重複しています。

'view' : {
    'isMobile': true|false,
    'title': ブログのタイトル,
    'description': このページの要約,
    'url': 表示しているページのURL,
    'type': item|archive|index,
    'isSingleItem': true|true,
    'isMultipleItems': true|false,
    'isError': true|false,
    'isPage': true|false,
    'isPost': true|true,
    'isHomepage': true|false,
    'isArchive': true|false,
    'isLabelSearch': true|false,
}

『グローバルな設定値』と『現在の表示状態』の調べ方

『グローバルな設定値』と『現在の表示状態』で利用できるプロパティを調べる場合は、ブラウザの開発者画面のコンソールで、_WidgetManager._GetAllData() を実行することで、blogviwe で利用できる全てのプロパティを取得可能です。

ウィジェットのデータにアクセスする

ウィジェットのデータは、Bloggerのヘルプの説明を参照してください。 ヘルプで説明されていないプロパティもありますが、それらは公式テンプレートを参考にするのが確実です。 各プロパティは、それぞれのウィジェットの中でのみ利用できます。

レベルウィジェットのカスタマイズで利用した例は、以下の通りです。

https://github.com/kittybbit/blogger-templates/blob/b0dbeb0f68956ffc1292257c4cfb33121bac7161/tech-blog-template.xml#L649-L655


https://zenn.dev/kittybbit/articles/bf8417d19876cf

https://zenn.dev/kittybbit/articles/818c3477a155d0

https://zenn.dev/kittybbit/articles/de8e59b2ba5559

Discussion

ログインするとコメントできます