🐥

Bloggerの構造を理解する

2022/04/30に公開約2,200字

テンプレートを構成する要素

Blogger には、あらかじめ用意されている、26 種類(2022 年 4 月時点)のブログパーツがあり、これをウィジェットと言います。 独自タグは、このウィジェットの定義に使われています。 独自属性は、独自タグや HTML タグの属性をウィジェットの状態に合わせて変更する場合や、ウィジェットが持つデータを、属性に動的にセットする場合に利用します。 つまり、独自タグと独自属性は、Blogger が持っているウィジェットの機能やデータへのアクセスを提供する、インタフェースです。

独自タグの構成

初めは複雑に見えますが、それぞれのタグの役割を理解すれば、一般的なテンプレートエンジンと変わりありません。 次の snippet は、テンプレートとして正しくありませんが、主要な独自タグを利用できる位置を表しています。これを見れば、独自タグの意味を、なんとなく把握できるのではないでしょうか。 それぞれの独自タグについては、1つずつ記事にしますので、詳細はそちらを参照してください。

<head>
    <b:skin>
        <![CDATA[
            /*
            <Variable />
            <Group>
                <Variable />
            </Group>
            */
        ]]>
    </b:skin>
    <b:defaultmarkups>
        <b:defaultmarkup>
            <b:includable>
                <!-- 制御関連 -->
                <b:if><b:elseif /><b:else /></b:if>
                <b:switch><b:case /><b:default /></b:switch>
                <b:loop></b:loop>
                <!-- データ参照 -->
                <data: />
                <b:eval />
                <b:with />
                <!-- HTML生成 -->
                <b:tag />
                <b:attr />
                <!-- 他で定義したincludableをここで使う -->
                <b:include></b:include>
            </b:includable>
        </b:defaultmarkup>
    <b:defaultmarkups>
</head>
<body>
    <b:section>
        <b:widget>
            <b:widget-settings>
            </b:widget-settings>
            <!-- 制御関連 -->
            <b:if><b:elseif /><b:else /></b:if>
            <b:switch><b:case /><b:default /></b:switch>
            <b:loop></b:loop>
            <!-- データ参照 -->
            <data: />
            <b:eval />
            <!-- HTML生成 -->
            <b:tag />
            <b:attr />
            <b:with />
            <!-- 他で定義したincludableをここで使う -->
            <b:include></b:include>
        </b:widget>
    </b:section>
</body>

独自属性の構成

独自属性は、独自タグだけでなく、HTML 標準タグの属性でも利用できます。 利用方法は非常にシンプルで、expr:属性名='式' と書くだけです。 例えば、現在の記事の URL へのリンクは、<a expr:href='data:post.url'> となります。



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

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

https://zenn.dev/kittybbit/articles/9a7518ac4dfadf

Discussion

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