Статьи

Введение в Haml

Октябрь 11, 2018

Haml является языком X H TML A bstraction M arkup L, который, согласно haml-lang.com :

функционирует как замена для встроенных шаблонизаторов страниц, таких как PHP, ASP и ERB

Он может использоваться во многих средах Ruby, таких как Rails и Sinatra, в Node.js , PHP и .NET .

Эта статья познакомит вас с написанием HTML-кода на Haml. Таким образом, он не будет содержать много кода на Ruby. Но если вы хотите более подробно взглянуть на то, как работает Haml под прикрытием, прочитайте отличные статьи Ксавье Шея по Code Safari на Haml: Начало работы в Haml и Haml, Компиляция до завершения .

Установка Haml

Чтобы использовать Haml, вам сначала нужно его установить. Это не должно быть сложнее, чем открыть командную строку и набрать: 

gem install haml

Теперь давайте посмотрим, как мы можем написать немного HTML, используя Haml.

! DOCTYPE

По умолчанию Haml по умолчанию использует XHTML DOCTYPE. Обычно я говорю, потому что если вы используете Rails 3, то по умолчанию Haml использует HTML5. Вы можете изменить DOCTYPE по умолчанию, используя опцию :format но, поскольку эта статья имеет дело с автономным Haml, мы рассмотрим, как написать DOCTYPE вручную в нашем шаблоне:

  • HTML5 DOCTYPE 

     !!! 5

    Будет производить: 

     <!DOCTYPE html>

  • XHTML Строгий DOCTYPE 

     !!! Strict

    Это дает нам: 

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  • XML DOCTYPE 

     !!! XML

    Будет выводить: 

     <?xml version="1.0" encoding="utf-8" ?>

Теги и атрибуты

Теперь мы позаботились о DOCTYPE, давайте посмотрим, как мы можем построить наш HTML. Мы запустим базовый шаблон документа HTML, который в Haml выглядит следующим образом: 

 %html 
  %head 
    %title Our Awesome Haml Template 
  %body 
    Abstracting HTML since 2006

Когда выше скомпилировано, это даст нам следующий HTML: 

 <html> 
  <head> 
    <title>Our Awesome Haml Template</title> 
  </head> 
  <body> 
    Abstracting HTML since 2006 </body> </html>

Возможно, вы заметили, что:

  • Haml использует пробелы и отступы для форматирования HTML.
  • Тэги имеют префикс % Закрывающие теги не требуются.

Все идет нормально. Но нам нужно добавить немного больше контента на нашу страницу и, вместе с тем, немного больше структуры и семантики: 

 %body 
  #container 
    %header 
      %h1 Our Awesome Haml Template 
    #main Abstracting HTML since 2006 
    %footer 
      %address Ian Oxley

Это дает нам следующий HTML: 

 <body> 
  <div id="container"> 
    <header> 
      <h1>Our Awesome Haml Template</h1> 
    </header> 
    <div id="main"> 
      Abstracting HTML since 2006 
    </div> 
    <footer> 
      <address>Ian Oxley</address> 
    </footer> 
  </div> 
</body>

С добавлением большего количества тегов должно стать более очевидным, как Haml использует пробелы и отступы для определения структуры вашего HTML. Но обратили ли вы внимание на то, как мы добавили на страницу теги <div id="container"><div id="main">

  • Haml предполагает, что вы выводите <div>
  • Атрибуты idid#container

Вы также можете добавить атрибуты classid 

 %footer 
  %address 
    .hcard 
      .fn Ian Oxley 
      .adr 
        .locality Newcastle-upon-Tyne 
        .country-name England

Если вы обратили внимание, вы, вероятно, догадались, что это скомпилируется в: 

 <footer> 
  <address> 
    <div class="hcard"> 
      <div class="fn">Ian Oxley</div> 
      <div class="adr"> 
        <div class="locality">Newcastle-upon-Tyne</div> 
        <div class="country-name">England</div> 
      </div> 
    </div> 
  </address> 
</footer>

Но как насчет других атрибутов, которые нам нужно будет добавить в нашу разметку? Такие вещи, как langsrcrelhref Ну, это легко сделать, используя один из двух методов:

  • Вы можете использовать фигурные скобки и указать свои атрибуты с помощью хэша Ruby. Например: 

     %img{ :src => "/path/to/image", :alt => "Description of image" }

  • Или вы можете использовать круглые скобки и использовать более похожий на HTML подход foo = ”bar”: 

     %img ( src="/path/to/image", alt="Description of image")

Оба они выведут следующий HTML: 

 <img src="/path/to/image" alt="Description of image">

Используя этот подход, мы можем легко добавить CSS, JavaScript и любые метатеги, которые нам нужны, в наши шаблоны: 

 %meta{ :charset => "utf-8" } 
%link{ :rel => "stylesheet", :href => "/css/master.css" }

Даст нам: 

 <meta charset="utf-8"> 
<link rel="stylesheet" href="/css/master.css">

И: 

 %script{ :src => "/js/site.js" }

Даст нам: 

 <script src="/js/site.js"></script>

Комментарии

Haml позволяет добавлять три типа комментариев к вашей разметке:

  1. HTML комментарии
  2. Условные комментарии
  3. Haml комментарии

HTML-комментарии можно добавлять с помощью косой черты «/», но в зависимости от того, где вы их разместите, это повлияет на то, что будет заключено в комментарии: 

 / A forward slash at the start of a line wraps that line in a comment  
%blockquote  
  %p Roads? Where we're going we don't need roads
  
/  
  A forward slash at the start of a nested block wraps the whole block in a comment  
  %blockquote  
    %p Roads? Where we're going we don't need roads

После компиляции наш вывод будет: 

 <!-- Only this line will be wrapped in a comment --> 
<blockquote> 
  <p>Roads? Where we're going we don't need roads</p> 
</blockquote> 

<!-- 
  Now the whole block will be commented out 
  <blockquote> 
    <p>Roads? Where we're going we don't need roads</p> 
  </blockquote> 
-->

Условные комментарии можно добавить, поместив условие в квадратные скобки после «/»: 

 /[if IE] %link { :rel => "stylesheet", :href => "/css/ie.css" }

Это дает нам следующий HTML: 

 <!--[if IE]> <link href="/css/ie.css" rel="stylesheet"> <![endif]-->

Комментарии Haml — это комментарии, которые включены в файл шаблона, но не отображаются в окончательном выводе. Вы указываете их с помощью — #, и те же правила, которые применяются к комментариям HTML, применяются и здесь: 

 %p The line below won't appear in the HTML 
-# The rest of this line is a comment 
%p The line above won't appear in the HTML, nor will the lines underneath 
-# 
  None of this nested text will appear 
  in our rendered output either

Это производит: 

 <p>The line below won't appear in the HTML</p> 
<p>The line above won't appear in the HTML, nor will the lines underneath</p>

Добавление некоторого кода Ruby

Хотя эта статья была посвящена тому, как вы можете писать HTML, используя Haml, мы не могли бы закончить без краткого описания того, как вставить код Ruby в ваш шаблон.

Чтобы вставить код Ruby, просто добавьте знак '=' Например: 

 %p= Time.now

Код будет оценен и выведен в разметку, завернутую в

теги вроде так: 

 <p>Sat Aug 06 15:06:09 +0100 2011</p>

Запуск Haml из командной строки

Отличный способ поэкспериментировать с Haml — запустить его из командной строки. Просто поместите весь ваш код Haml в один файл, и вы можете вывести скомпилированный шаблон в другой файл следующим образом: 

 haml input.html.haml output.html

Итак, это был быстрый взгляд на то, как вы можете использовать Haml при написании вашего HTML. Если вы еще не использовали Haml, надеюсь, это поможет вам попробовать. Не забудьте посетить веб-сайт Haml по адресу http://haml-lang.com, где вы можете найти множество дополнительной информации, полный языковой справочник и даже взять Haml на тест-драйв .

Обновление: я поместил все фрагменты Haml из статьи в Gist на GitHub. Не стесняйтесь раскошелиться: https://gist.github.com/1147666

58
Share: