引き続きMiddlemanの学習です。 リファレンスを読んでるだけだと頭に入ってこないので、実際にレイアウト組みながら学習することにしました。 今回作るサイトのテーマはチートシートです。 ざっくりphotoshopでデザインしたもの

今日できるところまでコーディングしたもの

ブログ機能を使ってタグをグローバルナビにしてタグ毎の記事一覧をサイドナビに表示したい。

前回躓いたけど解決した問題 sassを書いてもbuildしない限りはコンパイルされないのでcssの表示確認が面倒だな…と思ってたけどアセットヘルパで解決した。（躓いた理由は、リファレンス読書不足。） 例えばstyle.css.sassの場合、普通のhtmlだとstylesheetのリンクは下記のように書くけど

<link rel="stylesheet" href="stylesheets/style.css">

アセットヘルパを使う場合は下記のような記述で良い。

<%= stylesheet_link_tag 'style' %>

これならbuildせずともリロードでcssが反映されるので、LiveReloadの力も借りてsassファイル保存→即ブラウザ反映の確認ができる。とても捗る。

パーシャル ヘッダーのグローバルナビとサイドナビとフッターと記事の整形をして、パーシャルというのを使ってみた。 普段phpを触っているので、これがincludeにあたるところか…と思った。 _header.erb、_side.erb、_footer.erbのようにファイルを命名する。 例えば下記のようなコードを_footer.erbとして保存。

<footer>
  Copyright 2013 hoge
</footer>

layout.erbで該当箇所に下記のように記述する。

<%= partial "footer" %>

ファイルの接頭にアンダースコアを入れるのは、sassで他のsassファイルをimportして結合したいときと似ていてしっくりきた。

この記事書いてるうちにまた少し調整した。

タグの記事一覧はどうやってやろう…。見た目は詰まってる感じがあるので追々微調整する。