ゴミ箱.net

汚物は消毒

webgen導入メモ (3) ページ作成編

このページの情報はwebgen 1.4.0をもとにしています。

ひととおりフォルダ構成を作成したら、ウェブページの元データを作っていこう。

ソースフォルダsrcにウェブサイトの元データとなるファイルを配置していく。以降、ソースフォルダに置くファイルを便宜上ソースファイルと呼ぶ。
ソースファイルには以下の種類がある。
ページファイル
ウェブページの内容をMarkdown記法で記述するファイル。最終的なHTMLファイルと(ほぼ)1対1で対応する。
テンプレートファイル
すべてのHTMLファイルの雛形となるファイル。テンプレートファイルを枠とし、その中の所定の位置にページファイルの内容をはめ込んだものが最終的なHTMLファイルとなる。HTMLのヘッダ部、全画面共通のロゴやメニュー、CSSやJavaScriptのタグなどといった、すべてのHTMLファイルに共通する要素をここに記述する。
その他のファイル
CSS、JavaScript、画像など。

まず最初にページファイルを作る。

好きなテキストエディタを使い、拡張子が.pageとなるテキストファイルを作成してソースフォルダsrcの下に保存する。
文字コードはUTF-8にしておく。
ソースフォルダの下にさらにフォルダを作成し、その下にページファイルを作成してもよい。その場合、出力フォルダにも同じフォルダ階層が再現される。

ページファイルの書式は以下のとおり。

---
title: ○○
template: ○○
---
※ここにMarkdown記法でページの内容を書く

---で区切られた領域はブロックと呼ばれる。
最初のブロックはmetainfo(メタ情報)ブロックといい、ここにYAMLのハッシュの書式でページの属性を指定する。例として、
属性名1: 属性値1
属性名2: 属性値2
属性名3: 属性値3
のように記述する。属性名の前に空白を入れないことと、コロンの後ろに半角空白を入れることに注意。
主な属性は以下のとおり。
title
ページのタイトル。後で紹介するが、見出しを自動生成するときにも用いる。
template
このページファイルで用いるテンプレートファイルのパス。絶対パスの場合はソースフォルダ、相対パスの場合はこのソースファイルを基準とする。
省略時は同じフォルダのdefault.template、それがない場合はひとつ上のフォルダのdefault.template、それもない場合はさらにひとつ上のフォルダの、…が用いられる。
テンプレートを用いない場合は明示的にnullを指定すること。
draft
ページが下書き状態かどうか。trueに指定するとページフォルダは下書きであるとみなされ、HTMLへの変換の対象外となる。

2番目のブロックはコンテンツブロックという。
コンテンツブロックにはウェブページの内容をMarkdownで記述する。Markdownで書ききれない複雑な書式は、直接HTMLタグを書けばそのまま出力してくれる。
コンテンツブロックでは、webgenの独自形式のタグによってメタ情報ブロックに指定した属性を埋め込むことができる。{属性名:}のように記述すると、HTMLに変換したときにその部分がメタ情報の対応する属性値に置き換えられる。

以下にページファイルの例を示す。
---
title: テスト
template: test.template
---
{title:}
======

これはテストです。
このファイルはテンプレートファイルtest.templateを使ってHTMLに変換され、見出しとして「テスト」と表示される。

次にテンプレートファイルを作成する。
テキストエディタで拡張子が.templateとなるテキストファイルを作成し、ページファイルと同じくソースフォルダsrcの下に保存する。
文字コードも同じくUTF-8にしておく。
テンプレートファイルにはページに共通するHTMLを記述する。そしてページファイルの内容が埋め込まれる場所に
<webgen:block name="content" />
というタグを記述する。
テンプレートファイルでも、ページファイルと同じく{属性名:}という独自形式のタグでページのメタ情報を埋め込むことができる。

テンプレートファイルにおいてもメタ情報ブロックを定義することができる。その場合、ページファイルと同じ書式でメタ情報ブロックとコンテンツブロックに分けて記述する。
その場合のテンプレートファイルの書式は以下のとおり。
---
template: ○○
---
※ここにHTMLのテンプレートを書く

特にテンプレートファイルを複数作り、default.templateとそれ以外の名称のテンプレートファイルがある場合は、後述するがそのままだとテンプレートが入れ子になってしまう。その動作が不要な場合は、他のテンプレートが適用されないよう、テンプレートファイルのメタ情報ブロックにおいて明示的に属性templateにnullを指定する必要がある。
---
template: null
---
※ここにHTMLのテンプレートを書く

最後に、ページファイル、テンプレートファイル以外のファイルを配置する。
ソースフォルダsrcの下に置けば出力フォルダoutの同じ階層にそのままコピーされる。
ただし、コピーされるのはCSSファイル、JavaScriptファイル、画像ファイル(※bmpは対象外)のみなので注意が必要。それ以外のファイルを対象にしたい場合については後述する。
スポンサーサイト

PageTop

コメント


管理者にだけ表示を許可する