模板引擎的使用
最后更新于：2022-04-01 22:44:46
# 3.4 模板引擎的使用
## 概要：
本课时结合商品页面，讲解如何使用简洁安全的模板引擎，以及如何更改邮件模板。
## 知识点：
1. haml
1. slim
1. liquid
1. 邮件模板
## 正文
### 3.4.1 haml
前面的章节里，我们一直使用 erb 作为视图模板，erb 可以让我们在 html 中签入 Ruby 代码。这样做的好处是，我们拿到的页面和设计师提供的页面几乎无任何差别，可以直接增加上我们用 Ruby 写的的逻辑。稍微不好的一点是，html 太多了，稍微处理不好，会缺失标签，而且不易察觉。
这时我们可以使用其他一些方案，[haml](http://haml.info/) 是比较常用的一个。
我们在 Gemfile 中安装 haml：
~~~
gem 'haml'
~~~
我们看一下用 haml 写的代码：
~~~
%section.container
%h1= post.title
%h2= post.subtitle
.content
= post.content
~~~
下面是 erb 的写法。
~~~
~~~
可见 haml 节省了我们大量的代码，而且更接近 Ruby 语法。我们看几个 haml 常用的写法：
~~~
.title= "I am Title"
#title= "I am Title"
~~~
它会输出为：
~~~
';
<%= post.title %>
<%= post.subtitle %>
<%= post.content %>
I am Title
I am Title
~~~
下面是显示 ul 列表，注意，haml 的缩进是2个空格：
~~~
%ul
%li Salt
%li Pepper
~~~
这是循环的例子：
~~~
- (42...47).each do |i|
%p= i
%p See, I can count!
~~~
我们如果想在项目里使用 haml 文件，只需要创建一个 `xxx.html.haml` 文件即可，这是一个完整的 haml 例子：
~~~
!!!
%html{html_attrs}
%head
%title Hampton Catlin Is Totally Awesome
%meta{"http-equiv" => "Content-Type", :content => "text/html; charset=utf-8"}
%body
%h1
This is very much like the standard template,
except that it has some ActionView-specific stuff.
It's only used for benchmarking.
.crazy_partials= render :partial => 'templates/av_partial_1'
/ You're In my house now!
.header
Yes, ladies and gentileman. He is just that egotistical.
Fantastic! This should be multi-line output
The question is if this would translate! Ahah!
= 1 + 9 + 8 + 2 #numbers should work and this should be ignored
#body= " Quotes should be loved! Just like people!"
- 120.times do |number|
- number
Wow.|
%p
= "Holy cow " + |
"multiline " + |
"tags! " + |
"A pipe (|) even!" |
= [1, 2, 3].collect { |n| "PipesIgnored|" }
= [1, 2, 3].collect { |n| |
n.to_s |
}.join("|") |
%div.silent
- foo = String.new
- foo << "this"
- foo << " shouldn't"
- foo << " evaluate"
= foo + " but now it should!"
-# Woah crap a comment!
-# That was a line that shouldn't close everything.
%ul.really.cool
- ('a'..'f').each do |a|
%li= a
#combo.of_divs_with_underscore= @should_eval = "with this text"
= [ 104, 101, 108, 108, 111 ].map do |byte|
- byte.chr
.footer
%strong.shout= "This is a really long ruby quote. It should be loved and wrapped because its more than 50 characters. This value may change in the future and this test may look stupid. \nSo, I'm just making it *really* long. God, I hope this works"
~~~
这个文件来自 [这里](https://github.com/haml/haml/blob/master/test/templates/action_view.haml)，你可以在这里找到它的源码。
在 [这里](http://haml.info/docs/yardoc/file.REFERENCE.html) 还有一份文档。
如果打算把现有的 erb 转成 haml，可以使用 haml 提供的一个命令行工具 html2haml，我们在 Gemfile 里安装台：
~~~
gem 'html2haml'
~~~
在命令行里，直接使用它：
~~~
% html2haml -e index.erb index.haml
~~~
-e 参数，可以把 erb 模板转成 haml。
这里有一个 [网站](http://html2haml.herokuapp.com/)，是在线把 html/erb 转成 haml。如果需要把 haml 转回 erb 模板，可是试试 [这个网站](https://haml2erb.org/)。
为了方便的使用 haml，尤其在使用 scaffold 或者 generate 创建文件的时候，自动创建 haml，而不是 erb，可以安装 [haml-rails](https://github.com/indirect/haml-rails)：
~~~
gem "haml-rails"
~~~
它为我们提供了一个快速转换的工具：
~~~
rake haml:erb2haml
~~~
它可以把所有 views 文件夹下的 erb 模板，转成 haml。
### 3.4.2 slim
和 haml 类似，[slim](http://slim-lang.com/) 更加的简洁，从它的官网首页可以看到它的代码风格，而且比 haml 又少了一些分隔符。
~~~
doctype html
html
head
title Slim Examples
meta name="keywords" content="template language"
meta name="author" content=author
javascript:
alert('Slim supports embedded javascript!')
body
h1 Markup examples
#content
p This example shows you how a basic Slim file looks like.
== yield
- unless items.empty?
table
- for item in items do
tr
td.name = item.name
td.price = item.price
- else
p
| No items found. Please add some inventory.
Thank you!
div id="footer"
= render 'footer'
| Copyright © #{year} #{author}
~~~
这是官网首页给出的代码示例，这里有它详尽的[使用手册](http://www.rubydoc.info/gems/slim/frames)。
slim 为我们提供了两个工具：[html2slim](https://github.com/slim-template/html2slim) 可以把 html/erb 转换成 slim，[haml2slim](https://github.com/slim-template/haml2slim) 把 haml 转成 slim。
和 haml-rails 一样，[slim-rails](https://github.com/slim-template/slim-rails) 可以默认生成 slim 模板。
在这里，有一个 [在线工具](http://html2slim.herokuapp.com/)，把 html 转换成 slim。
### 3.4.3 liquid
上面两个模板引擎（template engine）是针对开发者的，因为我们编写的代码是不会交付给使用者的，但是，如果我们需要把页面开放给使用者随意编辑，以上提到的 erb，haml，slim 是绝对不可以的，因为使用者可以在页面里这么写：
~~~
<%= User.destroy_all %>
~~~
那么，如何给使用者一个安全的模板来自由编辑呢？ [liquid](http://liquidmarkup.org/) 是一个很好的方案。liquid 是著名的电商网站 Shopify 设计并开源的安全模板引擎。
liquid 不允许执行危险的代码，所以可以随意交给使用者编辑并且直接渲染成页面，它还可以保存到数据里，这样可以实现在线编辑模板，它将逻辑代码和表现代码分开，如果你熟悉 php 的 smarty 模板，那么你会发现 liquid 就是 Ruby 版的 smarty。
我们看一个例子：
~~~
-
{% for product in products %}
-
{{ product.name }}
Only {{ product.price | price }} {{ product.description | prettyprint | paragraph }}
{% endfor %}
Welcome hi@liwei.me!
You can confirm your account email through the link below:
~~~ 我们页面上，也会得到这样的提示：  为了让我们的邮件看起来更友好，我们编辑 `app/views/users/mailer/confirmation_instructions.html.erb`： ~~~你好 <%= @email %>!
请点击下面的确认链接，验证您的邮箱:
<%= link_to "验证我的邮箱", confirmation_url(@resource, confirmation_token: @token) %>
~~~ 你可以再试试看。不过这种配置可能会被当做垃圾邮件拒收，或者直接被放到垃圾邮件中。在后面的章节里，我们会介绍其他的方式发送邮件。 如果你不能通过邮件激活这个用户，比如那些在 seed 中添加的用户，没关系，`rails c` 进入控制台： ~~~ u = User.last [1] u.confirm! [2] ~~~ - [1] 找到这个用户，更多方法在下一章陆续介绍 - [2] `confirm!` 方法激活用户 更多邮件配置，可以查看 [http://guides.rubyonrails.org/configuring.html#configuring-action-mailer](http://guides.rubyonrails.org/configuring.html#configuring-action-mailer)