SiteGeneratorで生成される全てのファイルは以下の構成をとる.

siteGenerator_header.templateから生成される情報
<div class="main">
    各ページ毎の部分.
</div>
<div class="navigator">
    ナビゲータ部
</div>
siteGenerator_footer.templateから生成される情報

スタイルシートはsiteGenerator_header.templateで通常のHTMLファイルと同様に指定する.もちろんsiteGenerator_footer.templateとsiteGenerator_footer.templateでdivタグを指定しても構わないが,SiteGeneratorで使用されるdivタグについてよく把握しておいた方がよい.各ページ毎の部分では,以下の5種類のうちのいずれかが入る.

• topページ
• 最新の日記と月々の日記へのリンクページ
• 月々の日記毎のページ
• featureのカテゴリ毎のインデクス
• featureの各記事

topページはテンプレート方式をとるので,SiteGeneratorは(テンプレートファイルにない限り)新着記事部分以外にdivタグを記述しない.したがって,ここでは新着記事のdivタグの構成を示す.

<div class="whatIsNew">
    <div class="item-caption">
    記事のタイトル
    </div>
    <div class="date-author">
    記事の執筆日時と筆者名
    </div>
    <div class="summery">
    概要
    </div>

    <div class="item-caption">
    記事のタイトル
    </div>
    <div class="date-author">
    記事の執筆日時と筆者名
    </div>
    <div class="summery">
    概要
    </div>
    ....
</div>

記事のタイトルには記事XML文書の要素titleの内容が一つずつ入る.記事の執筆日時と筆者名には記事XML文書の要素dateとauthorの内容が一つずつ入る.概要には記事XML文書の要素summeryの内容が一つずつはいる.

このページはナビゲータ部の日記コーナーへのリンクをたどると最初に表示されるページである.このページのdivタグ構成を以下に示す.

<div class="title">
日記ページのタイトル
</div>
<div class="year">
最新の日付の日記の年
</div>
<div class="month">
最新の日付の日記の月
</div>
<div class="day">
最新の日付の日記の日付
</div>
<div class="time">
最新の日付の日記の書き込みの時間
</div>
<div class="item-caption">
最新の日付の日記の書き込みの見出し
</div>
<div class="mainText">
最新の日付の日記の書き込みの本文
</div>
<div class="time">
最新の日付の日記の書き込みの時間
</div>
<div class="item-caption">
最新の日付の日記の書き込みの見出し
</div>
<div class="mainText">
最新の日付の日記の書き込みの本文
</div>
.....

<div class="year">
過去の日記の年
</div>
<div class="month">
過去の日記の月(該当年月の日記へのリンク)
</div>
<div class="month">
過去の日記の月(該当年月の日記へのリンク)
</div>
....
<div class="year">
過去の日記の年
</div>
<div class="month">
過去の日記の月(該当年月の日記へのリンク)
</div>
<div class="month">
過去の日記の月(該当年月の日記へのリンク)
</div>
....

最初に最新の日付の日記があって,そのあとに過去の日記へのリンクが並ぶ構成である.

このページで使用されるdivタグは最新の日記と月々の日記へのリンクページで使用されるdivタグとclass名前,意味,展開される内容が同じである.以下にこのページでのdivタグの構造を示す.

<div class="title">
日記ページのタイトル
</div>
<div class="year">
該当年
</div>
<div class="month">
該当月
</div>

<div class="day">
日記の日付
</div>
<div class="time">
日付の日記の書き込みの時間
</div>
<div class="item-caption">
日付の日記の書き込みの見出し
</div>
<div class="mainText">
日付の日記の書き込みの本文
</div>
<div class="time">
日付の日記の書き込みの時間
</div>
<div class="item-caption">
日付の日記の書き込みの見出し
</div>
<div class="mainText">
日付の日記の書き込みの本文
</div>
.....

<div class="day">
日付の日記の日付
</div>
<div class="time">
日付の日記の書き込みの時間
</div>
<div class="item-caption">
日付の日記の書き込みの見出し
</div>
<div class="mainText">
日付の日記の書き込みの本文
</div>
<div class="time">
日付の日記の書き込みの時間
</div>
<div class="item-caption">
日付の日記の書き込みの見出し
</div>
<div class="mainText">
日付の日記の書き込みの本文
</div>
.....

一月分の日記が表示されること,別の日記へのリンクがないこと以外は最新の日記と月々の日記へのリンクページと同じである.

このページはサブカテゴリ,サブカテゴリの下の記事ファイルへのインデクスである.ナビゲータ部のカテゴリのリンクをたどった時に最初に表示されるページである.このページでのdivタグの構造を以下に示す.

<div class="title">
カテゴリ名
</div>
<div class="mainText">
カテゴリの概要
</div>

<div class="subCategory">
サブカテゴリ名
</div>
<div class="mainText">
サブカテゴリの概要
</div>
<div class="item-caption">
記事(記事へのリンク)
</div>
<div class="item-caption">
記事(記事へのリンク)
</div>
....

<div class="subCategory">
サブカテゴリ名
</div>
<div class="mainText">
サブカテゴリの概要
</div>
<div class="item-caption">
記事(記事へのリンク)
</div>
<div class="item-caption">
記事(記事へのリンク)
</div>
....

....

各記事ページのdivタグの構造を以下に示す.

<div class="pathNavi">
カテゴリ名/サブカテゴリ名(リンク)
</div>
<div class="title">
記事のタイトル
</div>
<div class="date-author">
執筆日時と執筆者名
</div>
<div class="summery">
記事の概要
</div>
<div class="innerPageIndex">
ページ内インデクス(各見出しへのページ内リンク)
</div>

<div class="item-caption">
見出し
</div>
<div class="mainText">
本文
</div>
<div class="footnote">
脚注
</div>
<div class="item-caption">
見出し
</div>
<div class="mainText">
本文
</div>
<div class="footnote">
脚注
</div>
....

ナビゲータ部は,SiteGeneratorが生成するすべてのファイルで同一である.ナビゲータ部で使用されるdivタグの構成例を以下にしめす.

<div class="navigator">
    <div class="corner">
        コーナーの名前
    </div>
    <div class="corner">
        コーナーの名前
    </div>
    <div class="corner">
        コーナーの名前
	<div class="category">
	    カテゴリの名前
	</div>
	<div class="category">
	    カテゴリの名前
	</div>
	....
    </div>
    ....
</div>

上は例であり,実際のdivタグの数はsite.xmlに依存する.ナビゲータ部は全体がnavigatorクラスのdivタグで囲われている.そしてその中でいくつかのcornerクラスのdivタグが並ぶ.これはsite.xmlにおける要素contentsの子要素のレベルに該当する.すなわちこのdivタグの中に要素contentsの孫要素nameの内容が一つずつ記述される.3番目のclass="corner"のdivの様に,要素contentsの子要素がfeatureだった場合,さらに入れ子でclass="category"のdivタグが挿入される.このタグの中には,要素featureの子要素categoryの名前が一つずつ記述される.