HTMLテンプレートとは。

2006.05.03 水曜日
HTMLテンプレートファイルは、HTML そのものであり、従来のホームページを作成するときの HTML とほぼ変わりはありません。
※厳密には『HTML』でなくとも、『XHTML』であっても構いません。RGT は読み込んだものをそのまま出力するだけの、ティーバッグの「ろ過紙」のようなものです。

RGT はページを表示する前にテンプレートファイルを読み込み、登録されたデータをどこに表示すれば良いのか、テンプレートの内容を探します。
そのため、テンプレートの中に、データを表示させるための目印である独自タグを記述しておく必要があります。（そうでないと、それはただの HTML ファイルです）

実際はどのようになるのかというと...

テンプレートファイル
....
...
<h2>!name!</h2>
<p>!comment!</p>
...
....

▼


実際に表示されるページのHTML
....
...
<h2>ria</h2>
<p>エリンの明日の天気をお知らせします。</p>
...
....


このようになります。
基本的にテンプレートは、通常ホームページを作成するときのように作っていきます。その後、独自タグを入れてあげるだけです。
※『!name!』や『!comment!』が独自タグです。
（あくまで「基本的には」です。実際の使い方としては、RoStatのようなJavaScriptと連動させたり、など使い道はいろいろあるでしょう）

RGT ではこの独自タグを自由に作ることができます。独自タグを入れる箇所は、テンプレート内のどこでも構いません。レイアウトはユーザに任されているからです。

main.html

2006.05.03 水曜日
このファイルは、メインページのテンプレートです。
rgt.cgi（以下 RGT）にアクセスしたときに最初に表示され、通常、最もよく使われます。

このテンプレートは、ヘッダー、エントリ、フッターと、ブロックごとに分けられます。
以下のように、必ずブロックの区切りを記述しておく必要があります。

[ヘッダー部]
<!-- Header END -->　←ココ（区切り
[エントリ部]
<!-- Member END -->
[フッター部]

エントリ部は、skin.cgi のランク設定で区切る文字列が変化します。
@rank = ('GuildMaster', 'Member'); と設定されている場合、

[ヘッダー部]
<!-- Header END -->
[エントリ部]（GuildMaster)
<!-- GuildMaster END -->
[エントリ部]（Member)
<!-- Member END -->
[フッター部]

というように記述します。

RGT はヘッダー部から順に、エントリ、フッターと出力（表示）していきます。エントリ部は、表示するエントリ数の回数分、繰り返し出力します。

用意されている独自タグ
ヘッダー部

!copyright!
RGT の著作権表記が表示されます

!ver!
スキンのバージョンが表示されます

!skindir!
skin ディレクトリのパスが表示されます

!script!
rgt.cgi のパスが表示されます

!home!
ホームページの URI が表示されます

!add_f!
登録ページの URI が表示されます

!edif_f!
編集ページの URI が表示されます

!del_f!
削除ページの URI が表示されます

!cgititle!
スクリプトのタイトル名が表示されます

!subtitle!
スクリプトのサブタイトル名が表示されます

!reg!
エントリの登録数が表示されます

!yr!
データファイル dat.cgi の更新日時「年数」が表示されます

!mo!
（同上）の、「月」（数字表記）が表示されます

!mon!
（同上）の、「月」（文字表記）が表示されます

!da!
（同上）の、「日」が表示されます

!wd!
（同上）の、「曜日」が表示されます



エントリ部

!skindir!
skin ディレクトリのパスが表示されます

!edit!
エントリを編集するページの URI が表示されます

!del!
エントリを削除するページの URI が表示されます

!permal!
エントリの URI が表示されます（特定エントリのみ表示する)

!id!
エントリの ID が表示されます

!rank!
エントリのランク名が表示されます

!img!
登録された画像ファイル（imgタグ）が表示されます

!yr!
エントリの更新日時「年数」が表示されます

!mo!
（同上）の、「月」（数字表記）が表示されます

!mon!
（同上）の、「月」（文字表記）が表示されます

!da!
（同上）の、「日」が表示されます

!wd!
（同上）の、「曜日」が表示されます

ほか、skin.cgi で設定しただけの項目が使用できます。



フッター部

!log!
他のページへ移動するリンクが表示されます

ほか、ヘッダー部と同じタグが使用できます。

reg.html

2006.05.03 水曜日
このファイルは、登録ページのテンプレートです。
ヘッダ部・フッタ部などのブロック分けはありません。
登録情報を入力するフォームを用意する必要があります。

用意されている独自タグ

!skindir!
skinディレクトリのパスが表示されます

!script!
rgt.cgiのパスが表示されます

!cgititle!
スクリプトのタイトル名が表示されます

!subtitle!
スクリプトのサブタイトル名が表示されます

!rank!
ランクの選択メニュー（selectタグ）が表示されます

!img!
画像ファイル（imgタグ）が表示されます

!maxd!
登録できる最大キロバイト数が表示されます

!maxw!
登録できる画像の最大横幅が表示されます

!maxh!
登録できる画像の最大縦幅が表示されます

!imgtype!
登録できる画像のファイルタイプが表示されます

!imglock!
登録した画像の扱い（分かりにくいですが）が表示されます

!hidden!
フォームに必要なデータが表示されます（必ず、<form>～</form>の間に入れてください）

!pwdmax!
パスワードの最大文字数が表示されます

!ver!
スキンのバージョンが表示されます。


ほか、skin.cgi で設定しただけの項目が使用できます。

edit.html

2006.05.03 水曜日
このファイルは、編集ページのHTMLテンプレートです。
ヘッダ部、フッタ部などのブロック分けはありません。
登録情報を編集するフォームを用意する必要があります。

reg.html と同じタグが使用できます。

sys.css

2006.05.03 水曜日
このファイルは、その他ページで使用する『カスケーディング・スタイル・シート（CSS）』です。
実際に中を見たほうが分かりやすいでしょう。

カスタマイズできることは多くありませんので、オプション程度のものだと思ってください。

テンプレート内で外部ファイルを使用する

2006.05.03 水曜日
テンプレート内で、独自の画像ファイルやCSSファイルなど外部ファイルを使用する（参照する）場合、 直接参照せずにスキンディレクトリを示す !skindir! を使うことをオススメします。 これでユーザがスキンディレクトリを変更した場合にも対応できます。

<img src="!skindir!/img/test.gif">

<link href="!skindir!/style.css">　など。


エントリのソート

2006.05.03 水曜日
main.html では、エントリを並び替えて表示させることができます。『ソート』とは、ある１つの項目を「種」に、任意の規則でエントリを並び替える機能です。
ランクとは異なり、ランクは絶対的なソートであるのに対し、ソートは一時的なものです。

config.cgi の $default_sort にて標準のソートを設定することができますが、ここに設定する書式も同じものです。

main.html でエントリをソートさせたい場合、ソートの実行ボタンとメニューを main.html 内に置く必要があります。 ソートの「種」に使える項目は標準のものに加え、 skin.cgi で設定した項目も対象にすることができます。
以下が、ソートフォームの HTML 記述例です。

<form action="!script!">
<input type="submit" value="ソート">
<select name="sort">
<option value="date_fig_z">新しい順</option>
<option value="no_fig_a">登録順</option>
</select>
</form>

注目するポイントは、<option> タグに指定している value の値です。 これがソートさせる形式で、ここを変更することで任意の規則でソートさせることができます。

date_fig_z を分解すると「date」は日時で、「fig」は数字として、「z」は降順で、 つまり「日時を対象に、数字と判断して降順でソートする」ということになります。 ソート形式には標準で以下が指定できます。


1つめの規則

no
エントリ番号を対象に

rank
ランク名を対象に

date
更新日時を対象に

name
名前を対象に

ほか、skin.cgi で設定しただけの項目が使用できます。
$name{'read'} の項目を対象にしたいのであれば、「read」と指定するだけです。


2つめの規則

fig
数値として

txt
文字列として（文字コード順）



3つめの規則

a
昇順でソートする

z
降順でソートする



go top.
RSS 1.0