Hatena::ブログ(Diary)

橋本詳解 RSSフィード

ここはメモ帳です

http://shokai.org
http://shokai.org/blog/

2010-12-12

[][]haml内のrubyコード

blogインデックスページとかで、新着5件とかをforで回して表示する時、それぞれの記事にidを振ったりとかしたい。


先にまとめ

  • 先頭に - がある行はrubyスクリプトとして評価される
  • tagの後に = があると、それ以降はrubyスクリプトとして評価される。
  • tagのattributeとしてhashで渡す部分は、hashの値をダブルクオートして#{rubyスクリプト}として渡すとid連番を実現できる(blogentry、entrytitleの部分)
  • 先頭に = つけた行で、その後にダブルクオート付けて中に#{}でrubyとして評価させられる。
  • 先頭に = が無くても、#{}で囲んだ中はrubyとして実行される。ダブルクオートで囲む必要は無い。(投稿日時の部分)ただしtagのattributeの引数のhash以外の場所で有効。

こう書くと

!!! XML

%html
  %head
    %title testpage
  %body
    %h1 test
    %a{:href => 'http://shokai.org'} shokai.org
    %br
    .description
      あいうえお
      かきくけこ
    - for i in 1..3 do
      %div.blogentry{:id => "entry_#{i}"}
        %span.entrytitle{:id => "title_#{i}"} 記事#{i}
        %div.entrybody
          投稿日時:#{Time.now}
          = "記事の内容#{i}"

こうなる

<?xml version='1.0' encoding='utf-8' ?>
<html>
  <head>
    <title>testpage</title>
  </head>
  <body>
    <h1>test</h1>
    <a href='http://shokai.org'>shokai.org</a>
    <br />
    <div class='description'>
      あいうえお
      かきくけこ
    </div>
    <div class='blogentry' id='entry_1'>
      <span class='entrytitle' id='title_1'>記事1</span>
      <div class='entrybody'>
        投稿日時:Sun Dec 12 21:49:01 +0900 2010
        記事の内容1
      </div>
    </div>
    <div class='blogentry' id='entry_2'>
      <span class='entrytitle' id='title_2'>記事2</span>
      <div class='entrybody'>
        投稿日時:Sun Dec 12 21:49:01 +0900 2010
        記事の内容2
      </div>
    </div>
    <div class='blogentry' id='entry_3'>
      <span class='entrytitle' id='title_3'>記事3</span>
      <div class='entrybody'>
        投稿日時:Sun Dec 12 21:49:01 +0900 2010
        記事の内容3
      </div>
    </div>
  </body>
</html>

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/shokai/20101212/1292158170
Connection: close