Ghost 2.0 について

Ghostというブログについては、以下の記事で書かせていただきました。

Ghostというブログについて

Ghostを見つけて決めた理由 みなさん[esa.io](http://esa.io)といウェブアプリをご存知でしょうか? 先日、会社の同期に進められて触ってみたのですが、このウェブアプリ、、かなり素晴らしいです。 「情報を育てる」と謳っており、とりあえず書いて共有しよう、という「ドキュメント作成」に対する姿

今年の8月21日にバージョン2.0がリリースされたみたいなんですよね。。。
ブログの記事の更新スピードが落ちていたので、気づいたのは昨日w

さっそくアップデートしてみました。
アップデートは簡単でしたが、この記事の最後にいちおう記載したいと思います。

まず、気になるのは変更点ですよね。
公式サイトを見る限り、主な変更点は以下とのこと。

  • 編集方法の変更
  • 多言語サイト化
  • パスのカスタム構造化、ブログのルート変更
  • コンテンツコレクション
  • 時系列コンテンツ

それでは、これらの変更点について、ひとつずつ具体的に見ていきましょう~。


編集方法の変更

まず編集方法。
こちらですがかなり変わった印象を受けますが、すばらしい変更だと自分は感じていますね。

概念として「カード」が加わったように思います。

今までMarkDownとWYSIWYGをカスタマイズしたようなUIでしたが、すべてひとつの編集カードの中に収めていくようなイメージでした。
たとえば、マークダウンとHTMLと画像、Embedのような明確に異なるコンテンツを、ひとつのカードの中で編集しなければなりません。

しかし、今回のアップデートではそれぞれがひとつのカードとして表現され、組み合わせることができるようになりました。

もちろん、MarkDownやWYSIWYGのような書き方はカードとして残っているので、今までのような書き方も可能です。

2.0のバージョンでは、以下のカードが選べるようになっています。

選択可能なカード

Primaryカード

  • image
    • 画像の挿入です
  • MarkDown
    • 今までの編集方法です
  • HTML
    • HTMLコードを利用する場合
  • Divider
    • 区切り線ですね

EMBEDカード

  • Youtube
  • Twitter
  • Instagram
  • Unsplash
  • Vimeo
  • CodePen
  • Spotify
  • SoundCloud
  • Other...

カードの呼び出しは「+」ボタンをクリックするか、「/」を入力することで現れます。

MarkDownの選択

画像の選択

このカードの概念が追加されたとしても、ショートカットキーの利用がわかりやすく、まったく不便を感じることはありませんね。いまのところ。。

ちなみにMarkDownのようなテキストエディタのカードの場合は、Ctrl+Enterでカードを閉じたり編集したりすることが可能です。
で、SlackやNotionのように「/」でカードの呼び出しを行うことができまっせ。

公式でも言ってますが、Ghostが目指しているのはMediumやSlackのような編集体験とのことです。


多言語サイト化(Wip)

基本サイトルーティングの機能を利用するのですが、テンプレート側の反映(プルダウンとかの機能)がわからず。。。こちらは情報が見つけられず、わかり次第書きます。

※追記:プルダウンとかの切り替え機能はテーマのテンプレートが対応しているかカスタマイズするものになるのかも。。。?


パスのカスタム構造化、ルートの変更

独自のサイトルーティングを定義できるようになったようですね。
あ、違いますね、1.xでも使えてたみたいですが、機能が増えたという感じみたいです。

今までは、「ルート」と呼ぶURLの「/」終わりには記事一覧のようになっており、コンテンツの分類分けを行うにはタグを定義して以下のような構造にするしかありませんでした。

基本構造

ー / :サイトトップ(すべての記事一覧)
 └ path/postname : 記事詳細

コンテンツの分類

ー / :サイトトップ(すべての記事一覧)
 └ path/postname : 記事詳細
 └ tag/hogehoge : タグごとの記事一覧

上記など2.0でサイトルーティングを利用して解決すると・・・

サイトルーティングを利用した場合

ー / :サイトトップ(固定テンプレート利用)
 ├ blog-a/ : ブログAトップ(すべての記事一覧)
  ├ tag/ : タグごとの記事一覧
  └ path/postname : 記事詳細
 ├ blog-b/ : ブログBトップ(すべての記事一覧)
  ├ tag/ : タグごとの記事一覧
  └ path/postname : 記事詳細

このような構造がYAML形式で自由度高めに設定ができるとのことです。
自由度高めというのは、ブログAとブログBでテンプレートを変更したりすることも可能のようですね。

テンプレートは拡張子hbsで、themeファイルの直下に置かれています。

詳細は以下を見ていただければと思いますが、結構ハードル高いっすね。。これ。
https://docs.ghost.org/docs/dynamic-routing#section--routing-configurations-

初期状態をダウンロードしてみたら以下のように記載されていました。

routes:

collections:
  /:
    permalink: /{year}/{month}/{day}/{slug}/ 
    template:
      - index

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

ハードル高いとはいえ、YAMLの記述は見やすいので扱いやすいほうかと思います。

記述方法の詳細は省きますが、

routesは、固定といいますか単一ページを対象に利用するみたいですね。
collectionsは、filterに該当する記事すべてに対して、テンプレートとURLを書き換えるようです。なので上で表現したブログAとブログBはこちらで設定可能のようですね。
taxonomiesは、以下のようにTagやAuthorの一覧ページのパスを変更できます。ただし、記事詳細のURLは変更されません。

taxonomies

taxonomies:
  tag: /category/{slug}/
  author: /user/{slug}/

※実際にまだ試せている部分が少ないので、表現の誤りがある場合はご指摘ください。。


コンテンツコレクション

これは上記で説明したサイトルーティングのcollectionプロパティを利用したものなので、上で説明してしまったので割愛します。

一例だけ。

collections:
  /blog-a/:
    permalink: /blog-a/{year}/{month}/{day}/{slug}/ 
    template:
      - home1

  /blog-b/:
    permalink: /blog-b/{year}/{month}/{day}/{slug}/ 
    template:
      - home2

時系列コンテンツ

要は記事の表示順や表示フィルタを変更できるというような内容ですね。
こちも上記で説明したサイトルーティングのdataプロパティを利用したものなので、詳細な設定方法の説明は割愛します。


まとめ

変更点ですが、、結局以下のふたつですね。。

  • 編集方法の変更
  • サイトルーティング機能の追加

とりあえず2.0にアップデートすることはおススメします。
以下参考にした記事です。

公式の2.0リリースページ
https://blog.ghost.org/2-0/

サイトルーティングのドキュメントページ
https://docs.ghost.org/docs/dynamic-routing
※性格にはダイナミックルーティングのようですね。。すいません。

YAMLファイルの書き方は別の記事でタイミングがあれば書きたいと思います。

ではまた。