htmlファイル＋TS(TypoScript) : TYPO3 UsersGroup JAPAN

ホーム › TUGJ › ブログ

ブログ

2007年 6月20日

01:07

htmlファイル＋TS(TypoScript)

本日はHTMLファイルとTS(TypoScript)による設定についてを書いてみます。
参考にしたサイトは http://journal.mycom.co.jp/column/yetanother/112/index.html です。

まず、BE(バックエンド)にログインします。

メニューからテンプレート＞ページツリーから対象のページを選択＞

すでにセットアップされたテンプレートが表示される場合と、新しくテンプレートを作成する画面が表示されるかと思います。
まだ作成していなければ、デフォルトで構いませんので作成してください。作成方法については、このブログの以前の記事を参考に作成してみてください。

Resources という項目名の左に鉛筆アイコンがありますのでそちらをクリックしてください。
この画面では、新しくファイルを作成する場合に利用できます。例えば、htmlやcssファイルなど。

New text resource (enter name) のところに、入力ボックスがあるので、そちらに適当な名前を入力します。ここで入力した文字がそのままファイル名として保存されます。次にファイルの拡張子を選択します。今回は、htmlを選択してください。次にupdateボタンを押します。

これで空のファイルが作成されました。
作成されたファイル名のあたりに、鉛筆アイコンがあるはずですので、それをクリックしてください。
入力ボックスの中に、下記のソースを入れてください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>

<h1>

Header of the page

</h1>

</body>
</html>

そして、updateボタンを押します。
これで、htmlファイルが作成されました。

次は、TSの設定です。
現在の画面で、一旦、cancelボタンを押します。Template informationというページに戻ります。
Setupという項目横の鉛筆アイコンを押します。
現在入っているTSの上に次のものを入れ替えてください。

page = PAGE
page.typeNum = 0
page.10 = TEMPLATE
page.10 {
template = FILE
template.file = test.html
}

※下線を引いた、「test.html」という部分は、先ほど作成したhtmlファイル名を入力してくださいね。私の場合は、test.htmlというファイルを作成したので、それを入力しました。

ここまでの作業で、htmlファイルをTSで読み込む設定が完了しました。
このテンプレートを設定したページのFE(フロントエンド)を開き、確認してください。

画面には、

Header of the page

という文字だけが表示されたと思います。
これは、先ほど作成したhtmlファイルに Header of the page　という文章部分がありますが、単純にそれだけが表示されることになります。

次回は、 　などの、独自タグの設定方法をやります。予定ですが。

菅野史樹