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
45
Help us understand the problem. What is going on with this article?
@fnobi

tumblrのテンプレートをつくろう

More than 5 years have passed since last update.

なんか作ることになったので、
さらに言えばtumblr大好きなので、
ちょっくら調べた。

参考

基本

tumblrには、

  • 投稿一覧: /
  • 投稿詳細: /posts/{投稿ID}
  • タグごとの投稿一覧: /tagged/{タグ名}
  • 日付ごとの投稿一覧: /day/{年}/{月}/{日}
  • 検索ページ: /search/{検索ワード}

と5種類のページがある。

WordpressやMTならば、このそれぞれにテンプレートを作成していくカタチだが、
tumblrの場合、 テンプレートはひとつしかない
(ブログ設定画面 → テーマのカスタマイズ → 「HTMLを編集」で出るもの)

ひとつのテンプレートの中で、
現在のコンテキストを判別するblockタグをいろいろ使って、表示するものを決めていく。

主軸になるのは {block:Posts}…{/block:Posts} というタグ。
このなかには、

  • 投稿一覧ならば、最新の投稿数件
  • 投稿詳細ならば、その投稿
  • タグごとの投稿一覧ならば、そのタグのついた投稿数件
  • 日付ごとの投稿一覧ならば、その日の投稿数件
  • 検索ページなら、検索でマッチした投稿数件

というように投稿が入ってくる。
(こまかいことを言えば、それぞれの投稿のコンテキストがループされて入ってくる)

なお、そういう仕様なので、
CSSは外部ファイルにせず、テンプレートファイルの中に埋め込んでしまうケースが多いようです。

こういうこともできる

投稿一覧ページ(トップページ)でだけ表示するコンテンツ

{block:IndexPage}…{/block:IndexPage} で囲むと、投稿一覧ページでだけ表示する部分を作れる。

この部分にがっつり要素を置けば、
いわゆるタンブラーっぽくない、階層のあるサイトも作ることができる。

投稿詳細でだけ表示するコンテンツ

{block:PermalinkPage}…{block:PermalinkPage}で囲むと、
ページのURL = その投稿のURL となっている時だけ表示してくれるみたい。

「もっと読む」

「もっと読む」が設定されている投稿のコンテキストでは、
{block:More}…{block:More}が表示されるので、これを使う。
このなかで、投稿の固有URIへのリンク({Permalink})を置けばよい。
(投稿詳細では、かならず投稿全文が表示される模様)

テーマユーザーがカスタマイズできる項目を作る

テーマですべてを決めてしまうのではなく、テーマを使うユーザーがカスタマイズできる部分もいろいろ作れるみたい。

こういうことできなさそう

投稿の種類ごとの一覧ページをつくる

  • たとえば、動画投稿のみをまとめたページをつくるとか
  • トップページでは、動画の投稿しか表示しないようにする、ということは可能。その場合、全種類の投稿を一覧できるページはなくなってしまうけど。

トップページ等で、タグごとに整理して投稿を表示

  • 投稿のコンテキストで、「この投稿に、あるタグが付いているかどうか」を判別する手段はないので、これは無理
  • とりあえず混ぜこぜで並べてしまって、Javascriptでむりやり引き剥がすとかいうのはあり。だいぶ無茶だけど。

写真の引用元情報の参照

  • {Caption}にとりこまれて表示されちゃうみたい。

カスタムページに関するあれこれ

テーマカスタマイズから追加ができる、カスタムページ。
こちらで「テーマ準拠デザイン」を選んだ場合、ページはどのように表示されるのか?

正解は 「テキスト投稿と全く同じ」、だった。
つまるところカスタムページは、 きれいなURLを付けられるテキスト投稿でしかないみたい。ぬー。

したがって、カスタムページを表示するレイアウトをカスタマイズしたい場合は、テキスト投稿のpermalinkページをつくる場合と全く変わらない。

{block:PermalinkPage}
{block:Posts}{block:Text}
{block:Title}{Title}{/block:Title}
{Body}
{/block:Text}{/block:Posts}
{/block:PermalinkPage}

またこの仕様からか、普通のテキスト投稿と同様、カスタムページに入力したHTMLは、 一部タグが欠落してしまう ようだ。
(自分が見つけた限りでは、 sectiontableなど)

そのため、複雑なHTML・CSSを使いたいページがあるときは、カスタムページを使うと不具合が出る可能性もある。

45
Help us understand the problem. What is going on with this article?
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
fnobi
面白法人のテクニカルディレクター 兼 作曲家 兼 ドルヲタ ⌨️ http://github.com/fnobi 🎼 http://soundcloud.com/fnobi
kayac
古都鎌倉から新しい技術と面白いサービスを、次々にリリースする面白法人カヤックのフロントエンジニアチーム

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
45
Help us understand the problem. What is going on with this article?