世の中にはhtmlをerbやhamlで書いて幸せになったり、cssをsassで書いてみたり、javascriptをcoffeeしてみたり、そもそもwikiのようなMarkdown/Markupでページをちょちょいと作れたり、いろいろな幸福があります。 いろいろなテンプレートエンジンを使う例
この記事は、Favorite Haml Snippets - by Katy DeCorahの日本語訳です。 CodePenでpenを作成するときにHamlを愛用していますが、 構文を覚えるのは今でも大変苦労しています。 この投稿で、私が過去に使った楽しいHamlスニペット達をまとめてみました。 (もっと面白いHamlを探して、どんどん更新していくつもりです) 基本要素 3D - App Storeボタン 変数 文字列 "A" - Tommy Chandra 日付 Hamlカレンダー 時刻 Haml時計 ループ/配列 N回 波 配列のループ 食べもの - nos 多次元配列のループ Typeプロパティを探る ループと2つの配列のジッピング スライドする背景 シンプルなアイコン - Dribbble ループと3つの配列のジッピング word-breakとword-wrap 組合せとジョイン
Rails等のプレームワークだとだいたい誰かがプラグインを作っていて、それが面倒を見てくれるので意識せずにHAMLを使えるが、今回は素のRubyスクリプトから使う場合。 Haml::Engineのrenderメソッド又はrender_procメソッドを使う。 render example.html.haml %p= hello 変数の内容をひとつ出力するだけのあまりにシンプルなテンプレートファイル。 haml_example.rb require 'haml' File.open("example.html.haml") do |f| Haml::Engine.new(f.read, :format => :xhtml).render(Object.new, :hello => "Hello World!!") end Haml::Engineのインスタンスを作ってrenderする。 Ha
In the layout file of haml I would like to determine whether we are in our development and build environments. We're using Middleman. I would like to do something like this: - if environment == 'development' / Development Code = javascript_include_tag "Dev.js" I tried to access Ruby's environment variable, as well as define a custom variable in the config.rb file with no success.
!!! %html %head %body / 一行コメント / 改行&インデントでコメントも入れ子になります。 改行&インデントでコメントも入れ子になります。 -# HTML出力されないコメント -# HTML出力されないコメント HTML出力されないコメント 上記Hamlをコンパイルすると下記HTMLに出力されます。 <!DOCTYPE html> <html> <head> </head> <body> <!-- 一行コメント --> <!-- 改行&インデントでコメントも入れ子になります。 改行&インデントでコメントも入れ子になります。 --> </body> </html> コメントもタグ同様にインデントで入れ子構造になり複数行コメントが記述できます。
昨今の開発ではHTMLをそのまま記述するのではなく、簡潔に記述する為のテンプレートエンジンを利用することが多いと思います。今回はHamlとSlimというテンプレートエンジンを、Middlemanという開発サーバーツールを利用して比較していきます。 HamlとSlimとは? Haml と Slim はHTMLを生成するためのテンプレートエンジンです。 HTMLをそのまま記述するのと比べ、インデントや簡略構文によって簡潔な記述が行えるのが特徴です。 HamlはRuby On Railsなどのプロジェクトで利用している方も多いと思いますが、Slimは聞きなれない方もいるのではないでしょうか? ※Ruby On Railsで利用するにはそれぞれ、 haml-rails 、 slim-rails というgemを追加する必要があります 以下でHamlとSlimについて、サンプルコードを用いて比較し
Google グループでは、オンライン フォーラムやメール ベースのグループを作成したり、こうしたフォーラムやグループに参加したりすることで、大勢のユーザーと情報の共有やディスカッションを行うことができます。
I have a standard bootstrap navbar in a partials/_header.erb partial Bootstrap Navbar Gist I’m confused about how I should set bootstrap’s class=“active” in the navigation for a relevant page. My thinking in psuedo-code is that I want <li <% if(middleman.obj.for.current.url = this.articles.url) print 'class="active"' %> ><a href="page1.html">Page 1</a></li> What middleman properties do I want to c
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く