テンプレートファイル

テキストエディタでウェブサイトの制作を行う場合 「他のページから似ている部分をコピーしてそれを修正する」 というのはよくあることだと思いますが、 フォルダの階層が変わるとリンクが外れたり、メニューに現在のページの位置を示す CSS クラスを付与する必要があったりと、手間がかかる上にミスが起きやすいです。

First ではテンプレートファイルにメニューやリンクを組み込んで自動生成できるので、 それらを利用すれば手間を大幅に低減できミスも防げます。

また、複数のテンプレートファイルを使用する場合でも共通する部分は切り出して parts フォルダ内に保存すれば [[ First ファイル挿入 #ファイル名# ]] とすることで読み込むことができますので、 修正があった時にいくつものファイルを変更する手間が省けます。

ここでは簡単な例の紹介と適用ルールの説明をします。

目次

テンプレートファイルの例

First は各ページのメインコンテンツをデータベースから読み込んだ後、 そのページに適用するテンプレートファイルを探して読み込みます。

読み込んだテンプレートファイル内の [[ First メインコンテンツ ]] をメインコンテンツと置換した後、 その他の独自タグを処理し、ページをファイルへ書き出します。

非常にシンプルな例ですが、プロジェクトフォルダの templates フォルダの中に default.html として以下のファイルがあったとします。

templates\default.html

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="description" content="[[ First ページ概要 ]]">
 <title>[[ First ページタイトル ]]:[[ First サイト名 ]]</title>
 <link href="[[ First トップまでの相対パス ]]css/style.css" rel="stylesheet">
</head>
<body>
 [[ First メインコンテンツ ]]
</body>
</html>

上の例では、title にページのタイトル、description にページの概要をはめ込み、 CSS ファイルへはどこの階層で使ってもリンクが切れないように相対パスが入るようにしています。 これで、後はページ構成を登録した後メインコンテンツを入力して生成実行すれば First で入力されたデータが title や description に自動ではめ込まれ、 css ファイルへのリンクも外れる事なくページが生成されます。

どのファイルが使われるか？

トップページとその他のページ等、ページによってレイアウトを変えたりするのはよくあることだと思います。
First は以下に示すルールでテンプレートファイルを選択するので、 必要に応じてファイルを作成することで、特定のページやフォルダ、index ページに適用するテンプレートファイルを切り替えることができます。

トップページと同階層のページ

トップページと同階層になるページの場合は、 以下の優先順位でテンプレートファイルを探します。

  1. 生成するファイル名が index.html （つまりトップページ）で、テンプレートファイル「top.html」が存在する場合、これを使用。
  2. 生成するファイル名と同じテンプレートファイルが存在する場合これを使用
  3. 上記に該当しない場合 default.html を使用

下の階層のページ

ルートフォルダよりも下の階層のページの場合、 ファイル名が index.html かそうでないかでルールが変わりますので注意してください。

index.html の場合

フォルダ名とファイル名を「-」(ハイフン)で連結し、フォルダ名を除外しながらファイルを探し、 該当がない場合は「親フォルダ名.html」、それもない場合は「category.html」それもない場合は default.html となります。

例）\products\foods\index.html の場合の優先順位は下のリストのようになります。

  1. products-foods-index.html
  2. products-index.html
  3. index.html
  4. products.html
  5. category.html
  6. default.html

index.html 以外の場合

フォルダ名とファイル名を「-」(ハイフン)で連結し、ファイル名、フォルダ名を除外しながらファイルを探し、 該当がない場合は category.html それもない場合は default.html となります。

例）\products\foods\page1.html の場合の優先順位は下のリストのようになります。

  1. products-foods-page1.html
  2. products-foods.html
  3. products.html
  4. category.html
  5. default.html

元々は index.html とそれ以外を区別せずに全て「index.html 以外」と同じルールで適用していましたが、 フォルダ名.html を作ると index.html もそれが適用されてしまうのが少し使いづらい感じがしたので変更しました。

確認する方法

テンプレートファイルの適用状況を確認する方法が2通りあります。

使われるファイルの確認

ページから見てどのテンプレートが使用されるか見たい場合は「ページ」タブの左側のページ構成ツリーで任意のノードを選択し、 右側「ノード情報と設定」タブのテンプレートファイルリストを確認します。

テンプレートファイルリストの画像

選択されたページノードに適用されるテンプレートファイル名を優先順位の高いほうからリスト表示して、 ファイルの状態によってアイコンが表示されます。

テンプレートファイルの適用状況画像

画像の例だと、index.html が適用されて、他に2つのファイルがあることがわかります。
また、表示されているリスト項目を右クリックするとメニューが表示されファイルを作成できます。

使用されるページの確認

テンプレートファイルからみてどのページに適用されるか確認したい場合は、 テンプレートファイルを開き、左パネル内の「ノード」タブを選択します。

テンプレートファイルの適用状況画像

エディタで開いているテンプレートファイルが適用されるノードに背景色が付きます。

最終更新日：2020 年 02月 23 日