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

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.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のようにルートからのパス

archive

• 
  hexo-generator-archiveを利用（デフォルト）
• アーカイブ単位は年, 月で設定

データ	説明
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	ページに含まれる記事の投稿月

投稿記事

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

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

---

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

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

明日の担当は @__sakito__ さんです。

---

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