akiroom.comのトップページのデザインを変更した

ホントは前々から気づいていたんだけど、 akiroom.com のトップページの背景画像がちぎれていたり、Thunderbolt DisplayやRetina Displayで見ると醜い状態になっていたのがいよいよ気になるようになった。

新しいデザイン置き換えたんだけど、だいたい1時間ぐらいでアップデートできたのでよかった

  • Githubでプライベートリポジトリを作成: https://github.com/akiroom/akiroom-com-top (プライベートなので404になります)
  • middlemanを使って、HAML, SCSS+Compassで書いたものをビルドした
  • Bootstrapは使わず、media queryは手書き
  • 画像や色はあまり選ぶのが面倒なので使わず

1時間でそれっぽいものができるのは、本当に良い時代ですね。

middlemanのFrontmatterで変数を使う

Frontmatterで呼び出し元のテンプレートに変数を渡すことができる。

layout.haml
!!!
%html
  %head
    %meta(charset="utf-8")
    %title= current_page.data.title
%body
  = yield
index.html.haml
---
title: akiroom.com
---

%p something.

この時、index.htmlにアクセスすると、titleタグの中身は「akiroom.com」になっている。
この変数にさらに「title: #{hoge_var}」というような感じでさらに変数を呼び出したいと思った。
その時どうすればいいか。

続きを読む middlemanのFrontmatterで変数を使う