記事を書く

Grav ページの構造

この項は基本的な情報の概説ですから,興味がなければ飛ばしても構いません。ただ,目を通しておくと Grav での記事の作成・管理が理解しやすくなるかもしれません。

Grav におけるページは,基本的にディレクトリ(フォルダ)ひとつと Markdown ファイルひとつからなります。

このページであれば,01.write-an-article というディレクトリと,その中にある Deafult.md というファイルからなります。".md" という拡張子は Markdown を意味し,データとしてはプレーンテキストです。これが Grav におけるページのファシルシステム上の実体です。文字通りフラットなファイルであることがわかりますね。

ディレクトリ名の先頭にある 01. は Grav が自動的に割り当てたもので,メニュー等での表示順序を決定します。基本的に意識する必要はありません。

Default.md の中は,メタデータと記事本文が入っています。メタデータは以下のようなもので,記事の基本的な性質が記録されています。この部分を frontmatter と言います。

---
title: 記事を書く
---

このデータは,html の <head> 内のメタデータを生成するときなどに利用されます。この記事ではややこしいことは何もしていないのでタイトルがあるだけですが,出力される html に複雑なメタデータを付けたい場合には,以下のように複雑になります。

---
title: Blog Post Title
publish_date: Date the blog post will go live
date: Date the blog post was written
metadata:
    'og:title': Blog Post Title
    'og:type': article
    'og:description': Description of what your blog post is covering.  This will be visible when people share your post on social media.
    'og:url': The URL of the blog post
    'og:site_name': The name of the overall site the blog post belongs to. 
    'og:locale': The language your blog post is written in
    'og:image': The image you reference here will be visible when shared on social media. 
    'twitter:card' : The type of Twitter card that should be used. 
    'twitter:site' : Your Twitter handle
    'twitter:title' : Blog Post Title
    'twitter:description' : Description of what your blog post is covering.  This will be visible when people share your post on social media.
    'twitter:image' : The image you reference here will be visible when shared on social media. 
    'twitter:creator': The twitter handle of the blog post author. 
taxonomy:
    category: [Blog post category]
    tag: [Tag 1, Tag 2, Tag 3, Tag 4]
    author: Author's name
---

Blogging Metadata | Grav Documentation

記事を作成する

退屈な話はこのへんにして,実際に記事を作ってみましょう。

Grav での記事作成は直感的とは言えませんので,少し慣れが必要です。

まずはサイドバーの "ページ" を開きましょう。

スクリーンショット メニュー ページ

すると,ページを管理する画面が開きます。初期状態であれば,"Home" と "Typography" だけが並んでいるはずです。

スクリーンショット ページ管理画面

管理の話は後でするとして,今回は右上に佇んでいる「追加」ボタンを押します。

スクリーンショット 追加ボタン

すると,新規ページを追加するダイアログが表示されます。

スクリーンショット ページ追加ダイアログ

"ページタイトル" にはそのまま新しいページのタイトル(正確に言えば html の title 属性で,ページに表示されるタイトルは別途 Markdown で書く必要がある)を書きます。

"フォルダー名" は新しいページのファイルシステム上での名前で,英語などであれば自動的に生成されるのですが,日本語などのマルチバイト文字には対応していません。自分で入力する必要があります。

"親ページ" は新しいページをどのページの配下に置くかです。メニューの表示と URL に関係します。このページでは,"Grav をつかう" (gettingstarted) というページの下に置いています。

"ページテンプレート" は固定ページからなるサイトを作る場合には Default のままで構いません。ブログにする場合などに選択が必要です(ここでは触れません)。

"表示可能" は通常は "自動" のままでよいでしょう。

"続ける" をクリックすると,さあ,エディタが開きました。

スクリーンショット エディタ

思う存分書きましょう。

画像を載せたい場合は,"ページメディア" の欄にドラッグ&ドロップし,マウスオーバで表示される "+" アイコンをクリックして挿入します。

スクリーンショット ページメディア欄

終わったら,右上の "保存" ボタンをクリックします。

スクリーンショット 保存ボタン

これであなたの記事が公開されました。おめでとうございます!

キャッシュを有効化している場合で,すぐに確認したい場合は,更新ボタンを押してキャッシュを更新します。そうしないと,変更が表示に反映されません。

スクリーンショット サイドバー 更新ボタン