Edited at

Hexoテーマ作成のためのデータ構造概説

この記事は JavaScript Advent Calendar の9日目です。

昨日は @stken2050 さんの30分でわかるJavaScriptプログラマのためのモナド入門でした。


最近とあるサイトをHexoで構築し直したので、オリジナルテーマを作成する際によく参照するデータ構造などを自分用メモとして公開しようと思います。

一昔前ならWordpressで構築するようなサイト構成ですが、Hexoなどの静的サイトジェネレーターで構築することで配信時には静的サイトの配信のみで済むというのがすごくイケてると感じました。


前提


  • Hexo 3.7.0


よく使うデータ構造


全ページ共通

データ
説明

config

_config.ymlの情報を保持している

config.title

_config.yml内でtitle: サイト名のように定義した値が取得できる

site
サイト全体の情報を保持している

site.posts.data
全投稿記事の情報。順序は不定。Documentオブジェクトで格納

site.posts.length
全投稿記事数

site.categories
カテゴリ情報? 使っていないのでよくわからず

site.tags
タグ情報? 使っていないのでよくわからず


投稿記事共通(Documentオブジェクト)

Documentオブジェクトとして共通化されている。各記事ファイルの冒頭に以下のようにヘッダ情報として記載した値はすべて格納されている。

---

title: ブログ始めました
date: 2018-12-08 22:54:10
---

データ
説明

title
ファイル冒頭部記載の記事タイトル

date
ファイル冒頭部記載の投稿日。moment("記載の日付")のようにmoment.jsの利用を前提としている

source
プロジェクトルートからのファイルパス

layout
適用されているレイアウト

raw
ヘッダ部を含めたHTML化前の全文

_content
ヘッダ部を除いたHTML化前の全文

content
HTML化された全文

excerpt

<!--more-->を利用したときにHTML化された前半部分。<!--more-->を使わない記事では空となる

more

<!--more-->を利用したときにHTML化された後半部分。<!--more-->を使わない記事では全文が入る

canonical_path

posts/20181208/ブログ始めました/index.htmlのようにルートからのファイル名を含むパス。正式なパスとしてはこれを使うべき?

path

/posts/20181208/ブログ始めました/のようにルートからのパス

permalink

https://suzukigu.me/posts/20181208/ブログ始めました/のように通信プロトコル指定からのフルパス

tags
タグ情報? 使っていないのでわからず

categories
カテゴリ情報? 使っていないのでわからず


index



  • /postsをインデックスとして構築

  • デフォルトのhexo-generator-indexは自由度が低いのでhexo-generator-index2を採用


    • ジェネレーターを使わないと「新しい順に5投稿分表示」といった部分を自前で実装しないといけないので面倒



データ
説明

page
ページ情報。インデックスジェネレーターを利用しないとundefinedになる

page.total
全ページ数

page.current
現在ページ

page.posts.data
ページ内の投稿記事情報。_config.ymlindex_generator.order_byで指定したソート順で格納される。Documentオブジェクトで格納

page.posts.length
ページ内の投稿記事数。_config.ymlindex_generator.per_pageで指定した件数まで格納される

page.prev_link
前ページがあれば前ページのパス。なければ空

page.next_link
次ページがあれば次ページのパス。なければ空

page.canonical_path

posts/index.htmlのようにルートからのパス


archive



  • hexo-generator-archiveを利用(デフォルト)

  • アーカイブ単位は, で設定

データ
説明

page
ページ情報。indexで提供されていたデータはarchiveでも同様に含まれる

page.posts.data
ページ内の投稿記事情報。_config.ymlarchive_generator.order_byで指定したソート順で格納される。Documentオブジェクトで格納

page.posts.length
ページ内の投稿記事数。_config.ymlarchive_generator.per_pageで指定した件数まで格納される

page.year
ページに含まれる記事の投稿年

page.month
ページに含まれる記事の投稿月


投稿記事



  • https://suzukigu.me/posts/20181208/ブログ始めました/などにアクセスした場合

データ
説明

page
ページ情報。ただし他と異なりpage = Documentオブジェクトとなっている

page.prev
前の記事のDocumentオブジェクト

page.next
次の記事のDocumentオブジェクト


テーマを作成する際にはこのあたりの情報が必須なのですが、公式ドキュメントにも詳しい記述を見つけられなかったため苦労しました。

Hexoのカスタムテーマ作ってみようかな、という方の参考になれば幸いです。

明日は @wonton14 さんの 「演算子の実行順」 です。


書き終えて思ったけどJavaScript要素がほとんどないな……。