Tumblr のカスタムテーマを作ってみた
最近ブログを Wordpress から Tumblr に移行したこともあって、せっかくだからと Tumblr のカスタムテーマを作ってみた。
カスタムテーマというとややこしそうな印象を受けるが、Tumblr のカスタムテーマは自由度がそれほど高くないため、1 ファイルのシンプルなテンプレートファイルだけですむ。
できたもの
運用中のブログ
ドキュメント
公式
テンプレートの記述方法と簡単なチュートリアルが載っている。
補足として、2017 年に投稿形式が Neue に統一された。
このため、おそらくこれまでテキストのみを投稿していたユーザーはテンプレートを作る際に Text 以外の投稿タイプを考慮しなくて良い（はず）。
Web 版ではまだ Neue がデフォルトではないので、新しいエディタを使うように設定すると良い。
非公式
一応 LIG が Thumblr のテーマの作り方をサンプルを交えて解説する記事を出しているので、公式ドキュメントと併読すると良い。
ただし 2014 年の記事なので、日本語検索の対応状況が違ったり {block:HomePage} に対応していなかったりと内容がやや古い。
エディタの設定
公式では明言してない（？）が、テーマのサンプルは Smarty っぽい構文に見える。
VSCode などで Smarty の拡張を導入すると、コードが見やすくなる。
ベーステンプレート
公式チュートリアルを読み進めていくと 完成したテーマのマークアップ例 というセクションがあるので、最初はそのコードをベースに作る感じにする。
あとは、デフォルトのテーマである Tumblr Official のコードあたりも参考になるのだが、構造がやや複雑すぎるのでベースにするというより参考コードして見ると良い。（公式にコード自体が配布されているわけではないので、コピーして自分が見られる場所に置いている）
デプロイ
ローカルでテンプレートファイルをいじって、それを Tumblr に反映させるためには、コードをコピペして Tumblr のテーマエディタにペーストするのだが、もう少しスマートに同期させる方法もあるらしい。が、別にコピペデプロイでもいいかなと思って導入していない。
つらいところ
- if/else や not 構文はサポートしてない
- （本文中の）サムネイルの画像 URL だけ抜き出すことはできないため、表示をコントロールするにはトリッキーな CSS もしくは JS を書く必要がある
Discussion
更新のスクラップ