Gravでトップ(モジュラー)ページを作ってみる

思いの外、Gravでのシングルページ(1カラム個別記事)の作り方がよくわからなかったのでちょっと書いておこうかと思う。

Gravではテーマ(テンプレート)によりけりだけども色々なページフォーマットがあって、それを使い分けながらサイトを作っていく。

wordpressの場合、投稿記事と個別記事と言う具合で、設定でトップページを個別ページにも投稿ページにもできる。これはとてもわかり易くいずれも記事を書くだけだ。
しかしながらGravではまず記事を作る際に色々と設定しながらやる必要があって、それがちょっとわかりにくい。意味がわかれば設定が一目瞭然なのでタイプミスをしているぐらいしか間違わないはずだけれども、その最たるものがモジュラーページによるfrontmatterの設定と、テンプレートの選択だ。

前回の投稿で、ブログ記事を書く時には親ページをblogのフォーマットにして、子ページをitemにする必要があると書いた。これらはGravでは、単にblogというのではなく、Listingページという。つまり、wordpressのトップページの記事一覧のようなものはリストされているページになる。こういうのを指している。

XdomainでGravを使ってみる
世間ではCMSというとwordpressとまず思いつくぐらいにwordpressは有名になり、いろんなレンタルサーバーでも簡単にインストール...

モジュラーページの作り方など

wordpressで言う所の個別ページはGravでは二種類あって、スタンダートページとモジュラーページがある。例えばwordpressで自己紹介を書いたりする個別ページなどはスタンダードページに当たるだろうと思う。

一方、Gravの公式サイトのトップページは個別ページではあるけれどもこれはモジュラーページに当たる。モジュラーページとは、設定したモジュール(構成要素、あるいは交換可能なパーツの集合みたいな感じ)をテンプレートに従いつつ表示するというようなもので、これが最初どういうことなのかがわかりにくかった。

簡単に言うと通常のスタンダートページ(defaultテンプレート使用)は子ページを持てない単体のページだけれども、モジュラーページ(modularテンプレート使用)はモジュラーの子ページを持てる単体のページで、つまりは、その中身の構成要素(モジュール・子ページ)をモジュラーページ内に配置してひとつのページを作ってしまうというようなものだ。

ね?わかりにくいでしょう?(笑)

wordpress風に言うと、ウィジェットを設定しておいてそれで単体のページを構成してしまうという感じなので、そう言われたら簡単だけれども、作り方がwordpressのようにウィジェットエリアにウィジェットを配置するだけのように簡単ではなく、Gravではそのウィジットエリアに当たるモジュラー子ページをも作らないといけないという事だったりするわけだ。

モジュラー子ページ(長いのでモジュールとする)は、showcase、highlight、callout、featureという要素で構成される。Gravでは、まずページを作る際にページタイトル、フォルダ、テンプレートを選ぶ必要があり、それぞれのページはフォルダ分けされる。

つまり、

こういうフォルダとなる。この_(アンダーバー)から始まるフォルダはモジュールのフォルダで、01.homeはモジュラーの親ページになる。

手順

  • 何かしらのページをひとまずdefaultテンプレートで作っておく(最初からmodularでも良い)。トップページであればhomeとしてフォルダを作る(既にあると思うのでそれを流用)。
  • 次に新たにページを作る。
    • タイトルはわかりやすいもので良い(ここではshowcaseを作るのでtopとしておいた)。
    • フォルダはshowcaseとしておき、親をdefaultで作っておいたページ(あるいはhomeならhome)を選択。
    • テンプレートをmodularで選択して保存。
  • こうすると、ひとまずページができるが、ページタブの「高度」より、showcaseのフォルダの先頭に「_(アンダーバー)」を追加して保存。
    • 高度タブの中の表示が変わり、ページテンプレートに「features、showcase、text」がそれぞれ選択できるようになる。ここからshowcaseを選択する
  • モジュールの設定を行う

_showcaseモジュールでは、コンテンツタブによるテキストの編集と、_showcaseモジュールにだけあるボタンタブより、リンク用のボタンが作成できる。Grav公式のヘッダ部分の下にある「GET GRAV」などの角丸ボタンはこのような感じで作成されているだろうと思う。

ここまでの準備ができたら、モジュールの中身を作る。

各モジュールの説明

showcaseは、そのまま言えば陳列棚ということだけれども、何かしらを展示する、発表というような意味もあるらしい。つまり、そのページの目玉を集約したパーツだろうか。個人的には単に何かしらのページへのリンクボタンを入れるものと思っている。

highlightは特に注目して欲しい機能であったり、内容であったりを入れておくもの、内容を編集できるようにtextテンプレートを用いて説明するモジュールと考えて良いだろうと思う。

calloutは、例えば変更点を赤ペンでチェックして枠外に線を引き、変更内容を書くように、何が変わったのか、どのような機能や内容が追加されたのかなどの、細かな解説という感じだろうかと思う。

featuresは、特徴や注目ポイントというようなことだろう。

これらはひとまずAntimatterというテーマでの話なので他のテーマでは他の機能を持っているものもあるかも知れない。

フォルダ名は好きに付けられるがモジュールは必ず「_(アンダーバー)」を追加する必要がある。

2017/03/15 追記
Antimatterで利用できるテンプレートはshowcase、features、textの3種類で、これは_showcase、_features、_calloutにモジュールの機能からして対応していると思われる。これらを駆使して構成する。

ヘッダー画像の設定

ここでの説明では、_showcaseがヘッダ部分になるので、showcaseのモジュールを選択すると、そこに画像をdropできる欄ができる。そこにshowcase.jpgなどとして画像を入れる。

テンプレート側でどのように書かれているかにもよるけれどもたいていはこれでshowcase部分の背景画像は設定できる。

Front Matterの編集

Front Matterはyamlというもので書かれている。形式などからしてjsonと書き方は似ているので、意味合いとしてはわかりやすい。「パラメーター: 値」という感じで書き、インデントで構造を階層化している。

この手のものはwordpressしか使ったことがないとなんのこっちゃとなるが、連想配列を構造化したものとして考えればまぁ何となしに理解してもらえるかと思う。
パラメーターに関しては、Gravのテーマの値を利用していたりするので何がどうかわからない場合はテーマのテンプレートを読み解いたり、Skeleton Packagesをダウンロードして、user/pagesから、各フォルダの**.mdを参考にすると良い。

ページ編集画面で「オプション」や「高度」タブを編集していればある程度は追加されるが、モジュラーページを作成する場合は、frontmatterを編集するとページの構造の設定をできるようになる。

タブの右側に「上級者向け」というスイッチがある。これを押すと、「コンテンツ」タブの上にfrontmatter欄が表示される。

モジュラーの親になるページに設定する例としては、

こんな感じになる。

titleなどは既に入っているだろうけれども、モジュラーページで必要なのは、「onpage_menu」、「body_classes」、「order」あたり。

onpage_menuは、モジュラーページ内だけで機能するリンクで、通常のblogやlistingページとのメニューとは違う表示になり、クリックするとページ内スクロールで各セクションに移動できる。

body_classesは、ページのスタイルをするもので、これは「通常」編集画面で「高度」タブからも設定できる。上記サンプルのクラスはテーマによって異なる。

itemsの、@self.modularは、モジュラーの子ページのみを取得するという感じになる。つまり、ページ内のcontentは、モジュールだけで、並び順はorderの設定で、それはcustomの並びになるという感じだ。

内部の要素になるモジュールを作ったとしても、このfrontmatterが設定されていないと上手く表示されないので注意が必要。

まとめると

ここに書いたことは、wordpressしか利用したことがない場合ははじめて見るようなものもあって難しく感じるかも知れないけれども、一旦なれると構造がわかりやすく感じることができると思う。

普通はblogだけ書いてればだいたいは良いが、何かしら単体でページを作る時に、全てをcssでスタイルするのは大変なので、予めテーマが持っている機能で上手く利用できればランディングページなどが簡単に作れる。
ただ、簡単に作るまでに色々と下準備として知っておくべきことがあるので、そこが大変だろうか。

記事内でも書いたが、わからなくなれば、Skeleton Packagesで設定例を確認したり、公式のマニュアル(英語)を読むことになるだろう。英語なので敷居は高いが、参考になるサイトが日本語、英語にしても多くはないのでまずはここから始める必要がある。
公式のフォーラムを見るのも良いだろう。

スポンサーリンク

シェアする

フォローする