Slim模板简介

最新推荐文章于 2024-03-16 09:31:34 发布

cunjie3951

最新推荐文章于 2024-03-16 09:31:34 发布

阅读量1.4k

点赞数

文章标签： python java 编程语言 html javascript ViewUI

为什么修身？

如果您在Ruby地区生活和呼吸，并且曾经给Haml打过针，那么您可能已经知道我将要提出的几个论点。我认为仍然是一个好主意，因为您可能已经决定使用更简约的模板引擎，并且我希望您也了解Slim的优势。

在我们深入探讨Slim为何如此酷之前，我想先介绍一下Slim的实际含义以及它为您带来的好处。该文档很好地总结了这一点：

“ Slim是一种快速，轻便的模板引擎，支持Rails 3和4”。

您也可以在Sinatra甚至普通机架上使用它。因此，如果您对使用ERB编写模板感到有些厌倦，或者对Haml所提供的功能不满意，那么Slim就是正确的选择。

关于它的语法，Slim背后的人们试图找到以下问题的答案：“完成这项工作所需的最低要求是什么？” 为了编写尽可能少的前端代码，这听起来确实像是要问的正确问题。

Slim是否能为您解决所有模板问题提供完美的解决方案？可能不是，但坦率地说，它可能会提供最好的！容易学习吗？我是这样认为的，但是很难知道其他人认为容易。不过，我要说的是：要习惯一点点，但这绝对不是火箭科学。因此，如果您对事物的编码方面有点陌生，则无需感到害怕。你会过得愉快吗？绝对！

那么，为什么修身？我认为答案很简单。您的标记应尽可能可读，美观！您应该有一个很好的时间来处理它，花更少的时间花在遍历大量标签上的事情就更好了。

您可能会问，什么是美丽的？当然，这不是我要解决的答案，但是在这方面做到极少会造成伤害。因为模板引擎试图在最小化方面变得超级聪明，如何成为超级神秘主义者呢？这是一个令人担忧的问题，您很高兴得知Slim背后的团队对此非常重视。他们想尽可能地从普通的旧HTML中删除并仅显示关键部分—所有这些都不要太含糊。他们的核心团队试图进一步超越这一步，他们真的很关注Slim代码的美感。很好，你不觉得吗？

如果您可以看一眼模板并能够轻松地消化正在发生的事情，这岂不是更好吗？模板可能会变得非常“拥挤”，即使您巧妙地使用了部分零件，结果也希望将噪声量降至绝对最低。

您是否尝试过缩进的Sass（.sass）语法？我希望你有，因为它只是普通的涂料！如果是这样，您可能会对Slim所提供的服务有类似的赞赏。它也是对空格敏感的，这导致了代码的简洁和可读性。让我们采用这段HTML / ERB代码，并将其与Slim进行比较。

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
  </head>
  <body>
    <header class="navbar">
      <div class="logo">
        <%= link_to "sample app", 'root_path', id: "logo" %>
        <nav>
          <ul class="navbar-right">
            <li><%= link_to "Home",   'root_path' %></li>
            <li><%= link_to "Help",   'help_path' %></li>
            <li><%= link_to "Log in", 'login_path' %></li>
          </ul>
        </nav>
      </div>
    </header>
    <div class="main">
      <%= yield %>
    </div>
  </body>
</html>

让我们看一下Slim等效项：

doctype html
html
  head
    title = full_title(yield(:title))
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
    = javascript_include_tag 'application', 'data-turbolinks-track' => true
    = csrf_meta_tags
  body
    header.navbar
      .logo
        = link_to "sample app", 'root_path', id: "logo"
        nav
          ul.navbar-right
            li
              = link_to "Home",   'root_path'
            li
              = link_to "Help",   'help_path'
            li
              = link_to "Log in", 'login_path'
    .main
      = yield

人们通常会认识的第一件事是：“嘿，没有结束标签！” 凉？当然，您还不习惯该语法，因此乍一看可能有点陌生，但是我敢肯定，您可以体会到它读起来多么简洁。没有左/右尖括号，也不需要编写div和简约选择器，因此我们可以专注于id和class的名称。感觉不那么混乱，更有条理，您不觉得吗？

为了进行比较，这是Haml版本。实际上，这并不意味着要挫败Haml，它只是向您展示它的相似之处，而且Slim通过选择最少的语法进一步向前迈进了一步。我认为结果是它比Haml还要优雅。

为什么走得这么少，但仍然让我在各处输入%符号？我的食指一直没有抓住Shift-5的特殊动机。您可以自定义该行为吗？可以肯定，或者至少我希望如此！但是设计在这方面似乎有点缺陷，与Slim相比，斯巴达的设计更少。我意识到这也是一个品味问题，所以我将其保留。

哈姆

!!!
%html
  %head
    %title= full_title(yield(:title))
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
    = javascript_include_tag 'application', 'data-turbolinks-track' => true
    = csrf_meta_tags
  %body
    %header.navbar
      .logo
        = link_to "sample app", 'root_path', id: "logo"
        %nav
          %ul.navbar-right
            %li= link_to "Home",   'root_path'
            %li= link_to "Help",   'help_path'
            %li= link_to "Log in", 'login_path'
    .main
      = yield

在我们深入探讨之前，让我呆一会儿，总结一下我认为使Slim学习成为您宝贵时间的宝贵投资：

很快
超级可读。
它具有智能的语法。
它的美学是极小的。
高度可配置
它对食指友好。
这是老板级别的模板。
写起来很有趣，看起来很浓。
默认情况下，HTML自动转义。
超级不错的Rails和Sinatra集成。
非常简单的模板，易于维护。
它功能广泛，可让您编写插件和扩展。
当您想输出HTML但没有理由包含Ruby代码时，有时会有一种无逻辑的模式。
它具有可配置的标签快捷方式-这是一个非常不错的功能，可以根据需要自定义引擎。
最后，因为Slim的语法遵循一个非常酷的座右铭：“完成这项工作所需的最低要求是什么”。这很难不喜欢。

什么是模板？

就编程经验而言，如果您认为自己是新手，那么在我们开始使用Slim之前，我会尽力让您快速往返。人们谈论模板时，主要是指带有动态代码的纯HTML标记，这些代码通常用于流控制，对象注入或部分模板（部分）渲染。例如，当控制器为您提供实例变量时，视图可以通过（实例）变量替换来使用该实例变量来显示该对象的属性。所有这些都是通过您选择的模板处理器（ERB，Haml，Slim等）实现的，该处理器将您所有的Web模板组合到最终的Web页面中。模板还可以用于生成XML和RSS提要以及其他形式的结构化文本文件。

使用模板，您可以定义用于处理网站特定部分的各种“布局”，以及需要以最小的重复次数系统显示的数据。自从开始使用Rails以来，您肯定已经在这些情况下使用了ERB。 ERB接受纯文本部分，将其交给最终文档，并且仅处理标有此标记的代码。我不会详细介绍ERB的工作原理，并且假定您对Slim有所了解。如果您还不熟悉Rails的默认模板制作方法，那么我不建议您使用Slim，因为如果您了解Rails的开箱即用功能，那么使用Slim的时间将大大减少。

以下是模板的基本ERB示例，该模板显示与@agent对象关联的任务的集合。就在下面，它还使用Ruby Gem中的方法对@missions集合进行分页。

<% if @agent.missions.any? %>
  <h4>Missions (<%= @agent.missions.count %>)</h4>
  <ul class="missions">
    <%= render @missions %>
  </ul>
  <%= will_paginate @missions %>
<% end %>

这是模板的一小部分，很好地显示了它只是一个静态HTML部分，该部分具有一些Ruby代码的动态注入。如果我们不使用这样的模板，则必须为要在页面上显示的每个新对象手动编写代码。不确定您，但是我无法想象会有比这更大的噩梦或时间浪费。模板为我们提供了一个方便的工具，使我们的视图层变得智能和动态，而无需重复自己的工作。

从该示例中还可以看到，模板使我们可以使用部分模板，可以在需要的地方进行渲染。在这里，我们将有一个_mission.html.erb局部的地方，这有助于我们遍历集合@mission对象，这反过来我们内部获得上市missions类。

如您所见，模板并不是什么神奇的东西，但是它们非常方便，可以使开发Web应用程序更加高效和有条理。我只是想确保在进入Slim之前，我们都在同一页面上。

ERB和Haml呢？

如果您喜欢使用这些工具，那就太好了。没有错。问题是，如果您正在寻找更简约的更智能的产品，那么很难找到比Slim更进一步的产品。对我来说，这是我所知道的Ruby领域中最简化的模板解决方案。它们都工作正常，所以这是个人喜好问题。

入门

纤细带导轨

毫不奇怪，有一个瑰宝。

宝石文件

gem 'slim-rails'

贝壳

bundle install

就是这样，我们都准备好了。因为安装了该gem，所以只要您的应用加载，Slim就将被加载并初始化。另外，为方便起见，当通过rails generate controller ，将自动获取视图的.slim视图文件- .html.erb文件。它与脚手架的工作原理相同，但我希望您没有真正使用它们！

为了向不熟悉Rails生成器的人们展示这种行为，我将为秘密服务操作员创建一个控制器，该控制器具有所有标准的REST控制器动作：

贝壳

rails generate controller SecretServiceOperatives index new create show edit update destroy

在其他内容中，您将获得所需的所有.slim文件。 Rails还在其中放置了一个额外的.html当然，如果它困扰您，您可以摆脱它。重要的是，slim文件扩展名已经存在，并且可以预处理您的Slim代码。好极了！

...

invoke  slim
     create    app/views/secret_service_operatives
     create    app/views/secret_service_operatives/index.html.slim
     create    app/views/secret_service_operatives/new.html.slim
     create    app/views/secret_service_operatives/create.html.slim
     create    app/views/secret_service_operatives/show.html.slim
     create    app/views/secret_service_operatives/edit.html.slim
     create    app/views/secret_service_operatives/update.html.slim
     create    app/views/secret_service_operatives/destroy.html.slim

...

下一步是打开您的应用程序布局，并用Slim替换样板代码。另外，不要忘记将重命名application.html.erb文件application.slim （或application.html.slim如果你想）。我们已经精简了一些，甚至文件名也变小了。

app / views / layouts / application.slim

doctype html
html
  head
    title
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
    = javascript_include_tag 'application', 'data-turbolinks-track' => true
    = csrf_meta_tags
  body
    header.navbar
      .logo
        = link_to "Spy app", 'root_path', id: "logo"
        nav
          ul.navbar-right
            li
              = link_to "Home",    'root_path'
            li
              = link_to "Help",    'help_path'
            li
              = link_to "Sign up", 'sign_up_path'
            li
              = link_to "Log in",  'login_path'
    .main
      h1.welcome Welcome to Boss Level Slim Templates!
      = yield

没什么花哨的，但是一个好的开始-就像我想的那样容易。

屏幕截图

附带说明一下，如果您好奇已安装的gem的版本，此小命令将告诉您-当然，对于任何gem都很方便：

贝壳

bundle show 'slim-rails'

它告诉您该文件的存储位置以及该gem当前具有的版本。输出看起来像这样：

/Library/Ruby/Gems/2.3.0/gems/slim-rails-3.0.1

瘦身与西纳特拉

对于你们中的Sinatra爱好者，我也想提到如何入门。当然，首先我们需要安装gem。

贝壳

gem install slim

之后，您几乎完成了。在您的Sinatra应用程序中，您只需要Slim就可以了。

some_sinatra_app.rb

require 'sinatra'
require 'slim'

get('/') { slim :index }

__END__

@@ index
doctype html
html
  head
    title Slim Templates
    body
      h1 Boss Level Ruby Templates With Slim

在这里，我使用了一个内联模板在同一文件中写入了Slim标记，并告诉Sinatra我想在对根路径进行get请求时将Slim用于索引文件。我只需要在花括号块中引用内联模板。您在@@ index表示索引模板）下面看到的是所有对空格敏感的Slim语法。

屏幕截图

是时候向您展示如何编写Slim。

句法

HTML标签

HTML <！DOCTYPE>声明

让我们从最简单的文档类型声明开始。您可能已经知道并且已经忘记了，必须在实际的<html>标记之前在HTML文档的顶部声明它。仅供参考，它不是HTML标记，它会向浏览器指示HTML页面的版本。

在<!DOCTYPE>的不同版本中，只有HTML5的一个版本： <!DOCTYPE html>感谢上帝！），这正是在Slim中编写doctype html或doctype 5时得到的。

doctype html
html
  head

doctype 5
html
  head

ID快捷方式`#`和类快捷方式`.`

我希望编写前端代码意味着大量的类和很少的id。为了避免一遍又一遍地写这些内容，Slim不仅仅满足了您的需求，而且使您基本上可以缩短整个过程。让我告诉你我的意思。采取以下Slim代码：

#logo
h1.header
.evil-wrapper
  h2#author-name
  ul.books

这将编译为以下HTML输出：

<div id="logo"></div>
<h1 class="header"></h1>
<div class="evil-wrapper">
  <h2 id="author-name"></h2>
  <ul class="books"></ul>
</div>

如您所见，该点向Slim暗示您要使用一个类，其后的名称是您想要为其命名的名称。 id也是一样—您只需要使用散列符号（又称井号）即可。精明的读者肯定会认识到没有前导标签的版本会触发创建具有相应类或ID的div，这可以在<div id="logo"></div>和<div class="evil-wrapper"></div>看到<div class="evil-wrapper"></div> 。很方便，你不觉得吗？

如果愿意，您还可以在Slim代码中更具表现力。没有人会妨碍您手工编写良好的课程和ID。如果您对此有所依恋，那就去吧！我喜欢更简洁的版本，因为它也使我避免一直输入引号和重复文本。一切取决于您-任何使您开心的事！下面的代码稍微冗长一些，但呈现与上面相同HTML：

瘦：

div id='logo'
h1 class='header'
div class='evil-wrapper'
  h2 id='author-name'
  ul class='books'

现在，这不是美丽吗？想象一下您不需要自己编写的所有这些令人恐惧HTML标记，再加上所有多余的包围尖括号。当然，您的代码编辑器也可以为您完成很多工作，但是您的编辑器是否还为您阅读了代码？究竟！

当您回来阅读代码时，您还需要一个简洁易读的直观文档。我认为这个简单的例子最能说明Slim之类的工具所提供的功能。从长远来看，这些小东西加起来是一个出色的工具和节省时间的工具。即使仅将它用于该功能，而现在暂时忽略其他更高级的功能，切换到Slim也已经可以节省大量时间。

内联标签

假设您有多个要内联的标签，以使其更加紧凑或类似。因此，而不是突破到一个新的线，你可以通过分离这些标签用冒号把它们连: 。下面的两个示例呈现相同的输出。

瘦：

ul
  li.first
    a href="/a" A link
  li
    a href="/b" B link

ul
  li.first: a href="/a" A link
  li: a href="/b" B link

HTML输出：

<ul>
  <li class="link">
    <a href="/a">A link</a>
  </li>
  <li>
    <a href="/b">B link</a>
  </li>
</ul>

第二个版本由于内联标签而变得最小，这是我的偏爱。毕竟紧凑是好的，不是吗？我认为这种情况很好地说明了Slim在紧凑和神秘之间取得了平衡。是的，这需要一点时间来适应，并且在某些情况下，其他属性包装器很有用（请参阅下面的有关包装器的更多信息）。叫我疯了，但我可以肯定，您会像普通HTML标记一样阅读Slim。

文字内容

当然，编写文本就像您所期望的一样容易。只需将其添加到标签之后即可。

瘦：

h1#welcome-header Your funky welcome message goes here!

HTML输出：

<h1 id="welcome-header">
  Your funky welcome message goes here!
</h1>

没什么可添加的，简单就可以！

属性

HTML属性可提供有关标签的其他信息，可以包括以下内容：

瘦：

a href="http://slim-lang.com" title='Slim Homepage' Goto the Slim homepage

img alt="James Bond posing together with M" src="image.png" height="90" width="90"/

HTML输出：

http://slim-lang.com" title="Slim Homepage">Goto the Slim homepage

<img alt="James Bond posing together with M" height="90" src="image.png" width="90" />

您基本上可以将它们链接起来，Slim会将其与文本内容（如果存在）分开。如果仔细观察，您会发现我们的img标签带有尾部斜杠，可以在Slim中显式关闭标签。对于图像或更复杂的标签，这无疑是有用的。顺便说一句，HTML5不需要您以小写形式编写属性名称，也不需要在属性值周围使用引号。尽管如此，W3C还是建议使用标准做法。

属性合并

如果每个标签有多个选择器（例如类或ID），则还可以通过菊花链式链接的方式更简洁地编写这些选择器。这些选择器将由空格自动分隔。

瘦：

h2#big-header.agent-header.tagline Funky headline

h3.small-header.agent#007.tagline Small funky headline

HTML输出：

<h2 class="agent-header tagline" id="big-header">
  Funky headline
</h2>
<h3 class="small-header agent tagline" id="007">
  Small funky headline
</h3>

并非像这样将所有这些ID和类混合在一起代表最佳实践或其他任何东西，但是在这样复杂的示例中很容易看到Slim是如何工作的。太酷了吧？但是要小心-如果没有属性包装器，将这些选择器分散在多行中是行不通的（请参阅下一节）。

另一种选择是使用带有字符串或仅包含符号的数组来合并属性。

瘦：

h2 class=["agent-header","tagline"] Funky headline

h3 class=:agent,:double_o_seven,:tagline Small funky headline

HTML输出：

<h2 class="agent-header tagline">
  Funky headline
</h2>

<h3 class="agent double_o_seven tagline">
  Small funky headline
</h3>

在我的书中，我将其称为“好知识”，但这不是我尝试积极使用的东西。我想，如果您想插值某些东西可能会很方便。

属性包装

Slim为您提供包装器，以使您的属性更易于阅读。可能并非总是如此，但要知道具有很多属性的标签是否需要驯服很方便。您可以使用以下任何分隔符来包装属性： {} ， []和() 。

瘦：

a{href="http://slim-lang.com" title='Home page'} Goto the home page

a{href="http://slim-lang.com/about.html" title='About page'
  class='link' id='about'} Goto the about page

h2[id="big-header" class="agent-header tagline"] Funky headline

h3(id="small-header"
   class="agent 007 tagline") Some other funky headline

HTML输出：

<a href="http://slim-lang.com" title="Home page">Goto the home page</a>

<a class="link" href="http://slim-lang.com/about.html" id="about" title="About page">Goto the about page</a>

<h2 class="agent-header tagline" id="big-header">
  Funky headline
</h2>

<h3 class="agent 007 tagline" id="small-header">
  Some other funky headline
</h3>

如果这是组织标记的简便方法，那就去做吧！如第二个a和h3标签所示，您甚至可以跨多行分布属性和选择器。关于空格敏感性，缩进似乎非常宽容。不过，我的猜测是不会持续很长时间，并且您不需要太多包装器。您将很快习惯准系统Slim语法，并可以将其保存在特殊情况下（可能应该保存）。

对于内联标签，包装器可能偶尔会派上用场。正如您在下面的示例中还可以看到的那样，可以在定界符中使用空格以使其更具可读性-只是一个旁注。

ul
  li.long-link: a{ href="http://slim-lang.com" title='Home page' } Goto the home page
  li.long-link.class.with-id: a[ href="http://slim-lang.com/about.html" title='About page'
                                 class='link' id='about' ] Goto the about page

  li.c-link: a(href="/c") C link
  li: a[href="/d"] D link

HTML输出：

<ul>
  <li class="long-link">
    http://slim-lang.com" title="Home page">Goto the home page
  </li>
  <li class="long-link class with-id">
    http://slim-lang.com/about.html" id="about" title="About page">Goto the about page
  </li>
  <li class="c-link">
    <a href="/c">C link</a>
  </li>
  <li>
    <a href="/d">D link</a>
  </li>
</ul>

属性插值

有人说过插值吗？在带引号的属性中，您可以根据需要使用Ruby插入代码。一个简单的例子就足以说明这种行为：

瘦

a href="http://#{url}" Goto #{url}

再说一次，不是每天都可以使用的东西，但是一定可以带上一些花招。默认情况下，属性值将被转义。如果您需要禁用该行为，只需使用== 。

a href=="http://#{url}" Goto #{url}

您也可以使用完整的Ruby来处理您的属性。只需在其中要执行一些Ruby代码的地方加一个等号，就可以开始了。在第二篇文章中，您将找到有关在Slim模板中输出Ruby代码的更多信息。

ul
  li id="agent_#{agent.id}" class=agent.role
    a href=(path_to_agent agent) =agent.name

当然，这也意味着您也可以在属性中以相同的方式使用简单的布尔值。

input type="text" disabled=false
input type="text" disabled=true
input type="text" disabled=nil

Groovy，让我们继续前进！

最后的想法

我希望您现在对为什么Slim是满足Ruby领域中所有模板需求的理想选择感到满意。如果您现在仍然喜欢使用Haml或ERB，则随着时间的流逝，您可能会对Slim产生兴趣。我并不是说这是一种后天的品味，不是说很多人在职业生涯的早期就没有这方面的东西–也许是因为他们还没有一次又一次地编写所有多余的标记的痛苦。本文应为您提供入门所需的基础知识。

当然，Slim还提供了更多功能-特别是您肯定希望了解的一些高级功能。在下一篇文章中，我们将从更详细的部分开始，有关将Ruby代码输出到您的模板中，当然还有更多内容。到时候那里见！