More than 5 years have passed since last update.

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

Last updated at 2018-12-14Posted at 2018-12-09

この記事は JavaScript Advent Calendar の9日目です。
昨日は @stken2050 さんの30分でわかるJavaScriptプログラマのためのモナド入門でした。

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

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

前提

データ	説明
config	`_config.yml`の情報を保持している
config.title	`_config.yml`内で`title: サイト名`のように定義した値が取得できる
site	サイト全体の情報を保持している
site.posts.data	全投稿記事の情報。順序は不定。Documentオブジェクトで格納
site.posts.length	全投稿記事数
site.categories	カテゴリ情報？使っていないのでよくわからず
site.tags	タグ情報？使っていないのでよくわからず

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	カテゴリ情報？使っていないのでわからず

/postsをインデックスとして構築
デフォルトのhexo-generator-indexは自由度が低いのでhexo-generator-index2を採用
- ジェネレーターを使わないと「新しい順に5投稿分表示」といった部分を自前で実装しないといけないので面倒

データ	説明
page	ページ情報。インデックスジェネレーターを利用しないとundefinedになる
page.total	全ページ数
page.current	現在ページ
page.posts.data	ページ内の投稿記事情報。`_config.yml`の`index_generator.order_by`で指定したソート順で格納される。Documentオブジェクトで格納
page.posts.length	ページ内の投稿記事数。`_config.yml`の`index_generator.per_page`で指定した件数まで格納される
page.prev_link	前ページがあれば前ページのパス。なければ空
page.next_link	次ページがあれば次ページのパス。なければ空
page.canonical_path	`posts/index.html`のようにルートからのパス

データ	説明
page	ページ情報。indexで提供されていたデータはarchiveでも同様に含まれる
page.posts.data	ページ内の投稿記事情報。`_config.yml`の`archive_generator.order_by`で指定したソート順で格納される。Documentオブジェクトで格納
page.posts.length	ページ内の投稿記事数。`_config.yml`の`archive_generator.per_page`で指定した件数まで格納される
page.year	ページに含まれる記事の投稿年
page.month	ページに含まれる記事の投稿月

データ	説明
page	ページ情報。ただし他と異なり`page` = `Documentオブジェクト`となっている
page.prev	前の記事のDocumentオブジェクト
page.next	次の記事のDocumentオブジェクト

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

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

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