参考 - Middleman:ブログ機能 今回はブログ機能を付けていたときに躓いたことについて書いていきます。

config.rbにブログ機能のオプションを色々と書くことができる。

# blog
activate :blog do |blog|
  # ブログ機能のオプションを設定
  Time.zone = "Tokyo" # タイムゾーン
  blog.prefix = "blog" # カスタムパス
  blog.permalink = "/:year/:month/:day/:title.html" # パーマリンク
  blog.per_page = 5 # ページあたりの記事数
  blog.paginate = true # ページネーションを有効化する場合には true を設定
  blog.layout = "layouts/blog_layout" # 全ての記事に使用される特定のレイアウトを設定
end

ブログレイアウトの指定方法

方法１．ブログ用のレイアウトをlayoutsディレクトリ作ってその配下にarticle_layout.hamlという名前などで作る。(元のerbでもいいけどhamlでやってます。)

blog.layout = "layouts/article_layout"

方法２．ブログレイアウトの指定は入れ子レイアウトも使えるらしい。 同様にconfig.rbのブログオプションの箇所でレイアウトの指定を下記のように書き換える。

page "blog/*", :layout => :article_layout

ここで問題。 layoutsディレクトリを作る、ということで私はここで勝手に元のlayout.hamlもlayoutsディレクトリに入れてしまった。 こうしてしまうとパーシャルを含むブログレイアウトの指定を入れ子レイアウトにした場合、ヘッダーやフッターのパーシャルをうまく読み込んでくれない。 あくまでsource/layout.hamlが基本で、そこからsource/layouts/article_layout.hamlを入れ子にするという考え方が正しい。

原因が分からず、source/layouts/layout.hamlはブログ以外のページ用のレイアウトとしてそのまま残し、source/layouts/article_layout.hamlにはヘッダーやフッターのパーシャルにしないで直書き…というキモいやり方でとりあえず動かしてしまっていた。

今回この記事書くために改めて検証してみて、原因が分かりました…とほほ。 今回検証する用に作ったコードをGithubに上げておきます。→

今日は「Amazonギフト券のデザインが欲しい」の作業しました。 （怖話では毎月一番怖かった話に送られる怖話アワードという企画があって、選ばれた怖い話を投稿した作者の方には5,000円分のAmazonギフト券がメールで送られます。）

このへんの記事を参考に Photoshopでざらざらのノイズテクスチャをデザインする方法 Photoshop｜よごれて古い感じのトランプの作り方チュートリアル

作ったものがコレです。

グランジ系のブラシは重宝しそうです。

今日は怖話の怖いボタンについて「怖いを押してある場合はそれとわかる見た目が欲しい」の作業をしました。

これを

こんな感じで。

mixin用の_mixin.css.sassに書かれていたボタンのスタイルにvisitedの擬似クラスに押された感じのスタイルを追加。

既に押したかどうかの動きは他のhelper?（stories_helperかな。）かなんか触らないとつけられなさそうだったので とりあえず今日はここまで。 動きは誰にお願いすればよいのだろうか…。

引き続きmiddlemanです。

HTML5 Boilerplate 4.0, Sass, Compass と レスポンシブレイアウト対応の Susyに対応しているAmicusを使ってみた。

以下手順。bundlerが入ってる状態からスタート。 ローカルにamicusをクローン

$ git clone http://github.com/nathos/amicus.git my_new_project

Gemfileをinstall

$ bundle install

サーバーを立ち上げる

$ middleman

グリッド表示されたレスポンシブなページが生成される。 レイアウトに関してはSusyの公式を参考に。 まだ掘り下げられてないので後日まとめたい。

AmicusはHamlで書かれていた。 Amicusにブログ付けようとしたが、middlemanのブログテンプレートはデフォルトでERbだったので、ERbをHamlに変換したかった。 ここで躓いて@machidaさんにhtml2hamlのサイトとgemを教えていただいた。

$ html2haml [options] [INPUT] [OUTPUT]

でいけるので、今回は

$ html2haml -e blog.html.erb blog.html.haml

でERbからHamlにめでたくコンバートできた。

引き続き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して結合したいときと似ていてしっくりきた。

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

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