hexoでtwitter cardを記事ごとに変更する

背景

前回、twitter cardの設定を変更してみました。表示されるようになったのですが、すべての記事で同じだとおもしろくありません。

記事ごとの設定はmdファイルのyaml部分に記述しています。titleやdate、updatedなどと同じように設定できそうな気がします。ちょっと調べてみましょう。

updatedの実現方法を確認する

このサイトでは更新日時を表示するようにしています。前回の記事だと、以下のように設定しています。

---
title: hexoでtwitter cardの設定を変更する
date: 2020-08-07 12:30:00
updated: 2020-08-07 12:30:00
categories:
  - テクニカルブログ
tags:
  - hexo
--

上記の設定をどうやって取得しているのかthemesディレクトリ以下で探してみます。

$ grep -R updated themes
themes/landscape/layout/_partial/article.ejs:    <%- partial('post/updated', {class_name: 'article-date', date_format: null}) %>
themes/landscape/layout/_partial/post/updated.ejs:<% if (post.updated) { %>
themes/landscape/layout/_partial/post/updated.ejs:  Updated: <time datetime="<%= date_xml(post.updated) %>" itemprop="dateUpdated"><%= date(post.updated, date_format) %></time>

post.updatedとすることで取得できているようです。

twitter cardのURLを指定してみる

記事にtwitter_imageというキーを設定して、実際に変わるか試してみます。こちらの記事で試してみます。

記事の設定にtwitter_imageを追加して、URLを記述します

twitter_image: https://book-reviews.blog/images/github_actions_rails_template.png

次にthemes/landscape/layout/_partial/head.ejsのtwitter cardの設定の箇所で、twitter_imageを参照するよう変更します。

25   <%- open_graph({twitter_id: theme.twitter, google_plus: theme.google_plus, fb_admins: theme.fb_admins, fb_app_id: theme.fb_app_id, twitter_card: 'summary_large_image', image: post.twitter_image}) %>

Card validatorで確認すると、そもそも表示されずタイムアウト…
というか、サイト自体も表示できなくなってしまっています。これはエラーが起こっている可能性が高いので、一旦元に戻します。

post.twitter_imageが参照できない原因調査

post.updatedで正しく参照できている場合と、今回はなにが違うのでしょうか。

post.updatedを参照しているのは、themes/landscape/layout/_partial/post/updated.ejsです。そのファイルを読み込んでいるのはthemes/landscape/layout/_partial/article.ejsです。

article.ejsを読み込んでいるファイルを確認します。

$ grep -R 'partial/article' themes/
themes/landscape/layout/page.ejs:<%- partial('_partial/article', {post: page, index: false}) %>
themes/landscape/layout/post.ejs:<%- partial('_partial/article', {post: page, index: false}) %>
themes/landscape/source/css/style.styl:@import "_partial/article"

partialメソッドに変数を引き渡していることがわかりました。この記述が必要そうですね。試してみます。

themes/landscape/layout/layout.ejsの1行目を以下のように変更します。

<%- partial('_partial/head', {post: page}) %>

再度twitter cardの設定でpost.twitter_imageを参照するように変更し、Card validatorで試してみます。

うまくいきました！

記事にtwitter_imageの設定がない場合はデフォルトでキービジュアルの画像を表示するように修正します。

<% if (post.twitter_image){ %>
  <% twitter_image = post.twitter_image %>
<% } else { %>
  <% twitter_image = '/css/images/banner.jpg' %>
<% } %>
<%- open_graph({twitter_id: theme.twitter, google_plus: theme.google_plus, fb_admins: theme.fb_admins, fb_app_id: theme.fb_app_id, twitter_card: 'summary_large_image', image: twitter_image}) %>

EJSを初めて書きました。概要は知っておいた方が良さそうですね。

まとめ

今回twitter cardを記事ごとに設定することができました。よりよいサイト作りのために、いろいろカスタマイズしていこうと思います。そのためにはhexo, EJSの知識がもうちょっと必要ですね。学んでいきたいと思います。