yuheijotaki.com

Haml 記法とテンプレート

ちょっと分かってきたかも
変数や条件分岐は一旦置いといて、基本的なトコだけですが

 

引っかかったのが、日本語入れたときにエラーが多くなんでかなとおもったので meta charset=”UTF-8″ をいれたけど直らなかった現象。
原因は不明だけどこれ参考にDOCTYPEの前に

- # encoding: utf-8

をいれたら直った。

 

あとSublime Textでやるときはメニューの Tools > Build System > haml を忘れないこと、
タブ設定はIndent Using SpacesにチェックでTab Widthを2にすること

 

◯参考

 

◯テンプレ

- # encoding: utf-8
!!!
%html{:lang => "ja"}
  %head
    %meta{:charset => "UTF-8"}
    %title Hello World
    %link(href="./common/common.css" rel="stylesheet")
    %link(href="./image/favicon.ico" rel="shortcut icon")
    %script(src="./common/jquery-1.11.1.min.js")
    %script(src="./common/common.min.js")
    /[if lt IE 9]
      %script(src="http://html5shim.googlecode.com/svn/trunk/html5.js")
  %body
    %div.wrapper
      %header
        %h1 h1
      %h2 ナビゲーション
      %nav
        %ul
          %li リスト1
          %li リスト2
          %li リスト3
      %h2 コンテンツエリア
      %section.mainArea
        %p このページはHamlやSassのテスト環境です。
        %p<
          Hamlの記法については
          %a(href="http://fukuyama.co/haml2")<> こちら
          を参考にしました。
        %p#jsText
        -# 一行のコメントです。
        -#
          2行の場合の
          コメントです。
      %footer

htmlタグのボリューム感に慣れていたのでスカスカで変な感じ
CSS、JS直書きとかしなそうだ
OGPとかはめんどそうだー