この記事は 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のカスタムテーマ作ってみようかな、という方の参考になれば幸いです。
明日は @wonton14 さんの 「演算子の実行順」 です。
書き終えて思ったけどJavaScript要素がほとんどないな……。