Rails简洁的模板系统Malline

      前段时间听说rails的模板系统不如django好用，其实rails也有一个比较简洁且好用的模板系统Malline http://www.malline.org/ 。Malline 是专门为Rails框架而设计的模板系统，它从模板系统 Makeaby 获取的灵感，Malline不是嵌入式模板系统，也不是新的语言模板系统，而是使用纯Ruby语言编写模板代码。接触伊始就觉得这个模版真的很棒，下面是根据它的doc做的一个step by step过程。

 

首先把Malline作为插件进行安装：

ruby script/plugin install http://svn.malline.org/stable/malline

 

最后在 config/environment.rb中加入 require 'malline/rails' ， 这就算安装完毕了。

 

根据doc测试了2个例子，注意直接把.rhtml文件换为.mn文件即可，rails会直接渲染.mn文件，首先是Malline大大简化了html标签的写法，而且支持嵌套，比如：

 

div do
    span 'text'
    div 'foo' do
        span 'bar', :style => 'color: red'
    end
end

编译成：
 <div>
    <span>text</span>
    <div>
        foo<span style="color: red">bar</span>
    </div>
</div>
 

 

 你可以像erb模板那样向block里面输入一个变量，并在以后使用它，比如：

 

@foo = capture do
    div do
        img :src => '/images/image.png', :alt => 'nice image'
        br
        span.caption 'Taken at the location of the event'
    end
end
编译成：
<div>
    <img src="/images/image.png" alt="nice image"/><br/>
    <span class="caption">Taken at the location of the event</span>
</div>

 

 

      以上是我试验的两个例子，更多可以参见 http://www.malline.org/features ，绝对让你爽个够，而且在下载下来的插件里面包含了大量的测试例子。另外想说明的是，你可以在一个系统里面混用erb模板和malline模板，甚至可以在malline模板里面引用erb模板，比如你已经有一个_one.rhtml的模板，那么在.mn中加入<%= render :partial => 'one' %>也是可行的。

评论

23 楼 dank 2008-11-02  

有时候感觉模板是很多余的东西了。其实作为WEB程序员对DIV和CSS的熟悉是必须的。对于美工来说熟悉一套程序开发的流程也是必须的。在我公司里，WEB程序员都有对DIV和CSS的培训，美工也经常叫接受软件开发的简单培训。对程序实现不了解的美工和页面是作不出好的页面结构设计了。

22 楼 reeze 2008-10-17  

还是习惯haml，很简洁。。。
用习惯了很舒服。

21 楼 junxiang 2008-10-12  

不太懂，我只用了rhtml，感觉已经很习惯了啊，有必要再接触其它的模板吗？

20 楼 liuqiang 2008-10-08  

<p>老实说，我对美工的依赖很少，一般直接拿豆瓣或者sohu的样式和图片改改用，最多叫美工改改图片之类的。</p>
<p> </p>

19 楼 lix23 2008-10-06  

刑天战士 写道

liuqiang 写道

你们这种做法是合理的，一般美工给出个大致的页面，剩下的活可能就直接给程序了，不可能为了修改一个比如高度或者宽度的问题，还要拿给美工再修改，这样影响效率。

短时间熟悉div+css对于candidate也是一种必须的快速学习能力，何况仅仅是熟悉……

压根就不懂css的飘过……
我们公司都是这么做的，开发人员不懂css，调整style的活必须由美工来完成。他们不懂程序，需要告诉他们怎么改。有时候效率确实很低

调整style的活必须由美工来完成---- 面对这种情况，沟通成本很高，特别是哪种JS动态生成的HTML代码。

18 楼 xqstation 2008-09-26  

还是html漂亮啊，以前我就说过这个问题了。在程序里有大量的这些东西，结果导致调整HTML结构的时候就出问题了。很麻烦的。

个人比较喜欢这样
<h1>${entry.title}</h1>
.....

这样的话美工也能看明白，什么东西显示到哪里，只需要自己调整就行了。

PS：程序员兼美工飘。。。

17 楼 toostupid 2008-09-17  

看html的代码量吧，代码量少的话无所谓。
感觉上不是必要。碰上了activescaffold之类的东西更加没必要。

16 楼 liuqiang 2008-09-16  

不仅仅限于简化HTML标签，其实还有很多其他特性（核心的），我还没有介绍，感兴趣的朋友可以去深入研究下。

15 楼 jack 2008-09-16  

liuqiang 写道

jack 写道

感觉就是少打了几个字，还增加了测试和调试代码生成工作，不划算

这个不能简单的这么说，你用erb也要测试和调试代码的吧，除非你直接上HTML，ROR的哲学或许就是面向人的，你需要在可维护性 性能 易用性之间找到一个平衡点

哦，我没有说明白，我是指多了调试生成html代码的工作，如果html代码输出有问题，页面就变形。一般仅需要检查html代码，看看那个tag或者css出错了。 如果多了个模版系统的话，需要去检查模版代码是否写的有问题。所以多了调试和测试生成html代码的工作，这部分工作本可以不需要做的。

这个模版系统，我觉得可以在一些需要用ruby代码拼接html代码的地方使用。特别是一些help函数. 不建议全部页面都换成模版。

14 楼 exquan 2008-09-16  

一般表单或复用的地方用erb,其它地方用html，有时还有JS处理面页，绑定事件。。。
这时HTML看起来更直观，更方便了,反正偶很熟愁html+css

13 楼 qichunren 2008-09-16  

这个与haml到底有什么区别呢？我看haml简洁一点。

12 楼 liuqiang 2008-09-16  

<div class='quote_title'>jack 写道</div>
<div class='quote_div'>感觉就是少打了几个字，还增加了测试和调试代码生成工作，不划算</div>
<p> </p>
<p> 这个不能简单的这么说，你用erb也要测试和调试代码的吧，除非你直接上HTML，ROR的哲学或许就是面向人的，你需要在可维护性 性能 易用性之间找到一个平衡点</p>

11 楼 jack 2008-09-16  

感觉就是少打了几个字，还增加了测试和调试代码生成工作，不划算

10 楼 liuqiang 2008-09-16  

<div class='quote_title'>jack 写道</div>
<div class='quote_div'>性能如何，大规模应用的情况下，会不会使得的性能大量下降？ 有没有内嵌的cache机制？</div>
<p> </p>
<p> 有内嵌的cache机制，而且很好用，你可以查下doc，说的很明白：）</p>

9 楼 jack 2008-09-16  

性能如何，大规模应用的情况下，会不会使得的性能大量下降？ 有没有内嵌的cache机制？

8 楼 刑天战士 2008-09-15  

liuqiang 写道

刑天战士 写道

liuqiang 写道

你们这种做法是合理的，一般美工给出个大致的页面，剩下的活可能就直接给程序了，不可能为了修改一个比如高度或者宽度的问题，还要拿给美工再修改，这样影响效率。

短时间熟悉div+css对于candidate也是一种必须的快速学习能力，何况仅仅是熟悉&hellip;&hellip;

压根就不懂css的飘过&hellip;&hellip;
我们公司都是这么做的，开发人员不懂css，调整style的活必须由美工来完成。他们不懂程序，需要告诉他们怎么改。有时候效率确实很低

先别急着飘，你肯定是了解css的，你可说过你天天操作dom的哦，我不信你能天天无视style


你们其实可以这样，美工定义css，开发人员调用就可以了

美工定义class或者style？很多情况下是这样的，老板要求员工先别管样式，做个样子出来看看，做完了发现太难看，让美工改，美工不会改，于是程序员教……因为，在现实情况下这只是个Holy Grail

7 楼 liuqiang 2008-09-15  

<div class='quote_title'>刑天战士 写道</div>
<div class='quote_div'>
<div class='quote_title'>liuqiang 写道</div>
<div class='quote_div'>你们这种做法是合理的，一般美工给出个大致的页面，剩下的活可能就直接给程序了，不可能为了修改一个比如高度或者宽度的问题，还要拿给美工再修改，这样影响效率。 <br/><br/>短时间熟悉div+css对于candidate也是一种必须的快速学习能力，何况仅仅是熟悉……</div>
<br/>压根就不懂css的飘过…… <br/>我们公司都是这么做的，开发人员不懂css，调整style的活必须由美工来完成。他们不懂程序，需要告诉他们怎么改。有时候效率确实很低</div>
<p> </p>
<p> 先别急着飘，你肯定是了解css的，你可说过你天天操作dom的哦，我不信你能天天无视style</p>
<p> </p>
<p>你们其实可以这样，美工定义css，开发人员调用就可以了</p>

6 楼 刑天战士 2008-09-15  

liuqiang 写道

你们这种做法是合理的，一般美工给出个大致的页面，剩下的活可能就直接给程序了，不可能为了修改一个比如高度或者宽度的问题，还要拿给美工再修改，这样影响效率。

短时间熟悉div+css对于candidate也是一种必须的快速学习能力，何况仅仅是熟悉……

压根就不懂css的飘过……
我们公司都是这么做的，开发人员不懂css，调整style的活必须由美工来完成。他们不懂程序，需要告诉他们怎么改。有时候效率确实很低

5 楼 liuqiang 2008-09-15  

你们这种做法是合理的，一般美工给出个大致的页面，剩下的活可能就直接给程序了，不可能为了修改一个比如高度或者宽度的问题，还要拿给美工再修改，这样影响效率。

短时间熟悉div+css对于candidate也是一种必须的快速学习能力，何况仅仅是熟悉……

4 楼 liuqiang 2008-09-15  

<div class='quote_title'>火星叔叔马丁 写道</div>
<div class='quote_div'>我和lgn21st一个观点 <br/><br/>程序员的福音 美工的噩梦</div>
<p> </p>
<p> 这就看程序和美工如何分工了， 美工=设计图片/flash+css+layout 足够了吧？</p>
<p> </p>
<p>程序只需要在动态显示的部分写标签，所以我一直认为程序需要懂点美工的活，懂点div+css是大有裨益的。</p>
<p> </p>
<p>据我的经验，把整个view交给美工不大现实，事实上美工也可以不必熟悉tag</p>