ということをコメント欄導入したときに対応したのですが、需要がありそうなのが発覚したので今更ながら記事にします。

環境


たぶん、バージョン関係ないと思うんですけど、一応書いときます。

  • Hexo 3.1.1
  • Node.js 6.11.1

概要


特定のページだけフッターを表示したくないとか広告を表示したくない(あるいはその逆)といったことがあると思います。例えば、うちのサイトでいうとこちらのページとか404ページですね。記事と同じ要領で書くとタグとかコメント欄まで表示されるんですね。しかし、HTMLで書くのは手間ですし、できればMarkdownで書きたいですよね。

というわけで、どうするか。ページ変数を勝手に定義します。

ページ変数とは何ぞや?


例えばこの記事の場合は下記のようなページ変数を定義してます。tagsとかtitleとかそういうやつですね。

1
2
3
4
5
6
7
title: "Hexoで記事に応じてコンテンツ(フッターや広告など)の表示有無を切り替えたい"
date: 2017-10-12 20:05:03
tags:
- "Hexo"
- "EJS"
- "Node.js"
<省略>

こいつをページ変数と言います(たぶん)。一応公式サイトは見たんですよ。見たらPage Variablesと書いてたのでページ変数という概念でいいのではないかと思います。

ページ変数の定義と生成のコントロール


テーマを弄っていて気付いたのですが、こいつは好き勝手に定義できるんですね。どういうことでしょうか?例えば下記のように書いたとします。

1
2
3
4
5
---
title: "Statuses & Architecture"
comments: false
footer: false
---

上記はこちらのページ向けに定義しているページ変数なのですが、一番下のfooterは私がフッター(このサイトでいうタグから下の部分)の表示非表示を切り替えるための変数として勝手に定義してます。で、このfooter変数の値はテンプレートエンジンであるejsの中で取得することができます。具体的には下記のように書きます。

1
post.footer

これで記事内のfooter変数の値が取得できます。ということは…。こいつを利用してテーマのejsファイルの中で条件分岐させてやればいいんですね。

1
2
3
<% if (post.footer || post.footer === undefined) { %>
フッター部
<% } %>

例えばこのサイトで使用しているテーマのtranquilpeakの場合だとlayout/_partial/post.ejsを変更することになります。この辺りは使用しているテーマによって違うので、どこを変更する必要があるのかは各々探してください。

このように条件分岐させることでfooter変数がtrueの場合、もしくは存在(記述されていない)しない場合は上記の「フッター部」の処理が実行されてフッターが生成されます。逆に前述のようにfooterfalseを指定するとフッターは生成されなくなります。今回はフッターを例にしましたが、同様のやりかたで特定のページのみ広告を表示する・しないとかにも使えます。

テーマのテンプレートを弄る必要は出てきますが、こうやっておくと記事にちょろっと変数を記述するだけで特定部分の生成有無を切り替えることができます。