Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

この記事は 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要素がほとんどないな……。

moomooya
React+Flaskでなにか考えてたけど、FirebaseならTypeScriptだけでいいや。 パブリックなアウトプットを減らしてコード書く年にする(2度目)。
http://www.slideshare.net/isamusuzuki54
rakus
「IT技術で中小企業を強くします!」というミッションを掲げ、中小企業の業務効率化に貢献する複数のクラウドサービスを提供しているIT企業です。「楽楽精算」「メールディーラー」など、国内トップシェアを誇る複数のサービスを開発し、累計導入社数は5万社を超えています。次の時代の"楽"を創るための、まだ見ぬサービスや機能を生み出す取り組みは、今日も続いています。
https://www.rakus.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away