April 5, 2014

Bloggerのテンプレートの構造と編集方法(2)-テンプレートの全体像-

Bloggerテンプレートの理解を進める第2弾です。
まだテンプレートの中身の話にはなっていません。テンプレート全体のコードがどうなっているか、それが何に対応しているのか、を示します。
  1. Bloggerのテンプレートの構造と編集方法(1)-ブログシステム全体像-
  2. Bloggerのテンプレートの構造と編集方法(2)-テンプレートの全体像-(この記事)
  3. Bloggerのテンプレートの構造と編集方法(3)-実際の記述-

テンプレートの全体像

テンプレート自体は、一つのxml文書で、以下のような構造をしています。 ネスティングしたタグによってページの各部分のパーツが表現される仕組みです。

それぞれの部品の中にブログシステムが実際のコンテンツを埋め込んでくれます。

テンプレートの実際のコードはhtmlで記載されている部分と、googleが定義した独自タグであるb:から始まるタグで記載されている部分が混在した形になっています。
それについては次の記事に記載します。
<?xml version="1.0" encoding="UTF-8" ?>
<html>
<head>
<b:skin>...</b:skin>
</head>
<body>
 
  <b:section id='header'>
    <b:widget id='header'></b:widget>
  </b:section>
 
  <b:section id='main'>...</b:section>
 
  <b:section id='sidebar'>...</b:section>
 
 
 
 
 
 
 
 
 
 
 
 
  <b:section id='footer'>...</b:section>
</body>

</html>


Outer wrapperBodyTempleteMain wrapperPostFooter
Widget 2
Widget 3
Sidebar
Widget 1
Header
Widget 3

How to design blogger template on XML code ~ Digital Hub Inc.
http://www.digitalhubinc.com/2013/03/How-to-design-blogger-template-on-XML-code.html

No comments :

Post a Comment