tumblr和blogger的自定义风格模板

tumblr和blogger都具有高度可定制化的，可扩展的风格模板系统，允许用户制作十分精美的风格模板。

下面就简单介绍一下这两套模板系统。

tumblr的自定义风格模板的语法非常简单，只有两种类型：

1. Variables是需要被填充的动态数据

2. Blocks表示块级的结构，在不同的情况下会有不同的语义

   • 大部分时候都是条件判断（隐式或显式的）。
     • {Block:Text}，{block:PermalinkPage}就是隐式的判断，{Block:Text}表示如果日志是Text类型的，就渲染{Block:Text}里的内容，{block:PermalinkPage}表示如果当前是单日志页面，就渲染{block:PermalinkPage}里的内容
     • {block:IfFlickrUsername}就是显式的判断，Flickr Username是模板作者自定义的变量，允许使用模板的用户自定义。
   • 对某些特殊的block，起了循环的作用，{block:Posts}就会循环渲染多篇日志

对于下面这个模板片段

{block:Posts}  
     {block:Text}  
         ${Content}  
     {/block:Text}  
     {block:Photo}  
         ${LinkURL}  
     {/block:Photo}  
 {/block:Posts}  

用freemarker来写就是这样：

<#list post as posts>  
     <#if post.type=='text'>  
         ${post.content}  
     <#elseif post.type=='photo'>  
         ${post.linkURL}  
     </#if>  
 </#list> 

对普通用户来说，应该会觉得tumblr的模板更容易上手，因为从模板上看不到条件判断、循环什么的，都被隐含在block中了。

tumblr还允许模板作者提供扩展点，比如上面提到的Flickr Username，只要在head中定义，这个值就会出现在Appeareance菜单中，使用该风格的用户就可以提供必要的值，或者覆盖默认值。 比如定义：

<meta name="image:Background" content="">
<meta name="text:Disqus Shortname" content="" />
<meta name="if:Enable endless scrolling" content="1">

就会在apearance菜单中出现以下选项：

tumblr的模板系统对国际化的支持也相当的好，{lang:Follow me}就可以在使用不同语言的用户博客显示相应的文本。

但是tumblr文档有个缺点，某些部分的描述不清晰:
比如在示例中定义了<meta name="image:Header" content=""/> 使用{block:IfHeaderImage}判断是否有值

定义<meta name="text:Flickr Username" content=""/> 却使用{block:IfFlickrUsername}判断是否有值。

不够统一，也没找到文档在哪里有说明。也有可能是历史原因造成的兼容性问题。

而blogger的风格模板的语法相对比较复杂，样式使用<b:skin>，html结构使用<b:section>,<b:widget>，这里的“b”应该就是block的缩写。

<b:skin>块中可以定义Variable，多个Variable可以属于一个group。这里的Variable就相当于tumblr中在meta中定义的扩展点。

blogger提供了更加高级的所见即所得的模板编辑器，这些定义的Variable就会出现在模板编辑器中给风格的使用者修改。

<Group description="Backgrounds" selector=".body-fauxcolumns-outer">  
    <Variable name="body.background.color" description="Outer Background" type="color" default="#296695" value="#296695"/>  
    <Variable name="header.background.color" description="Header Background" type="color" default="transparent" value="transparent"/>  
    <Variable name="post.background.color" description="Post Background" type="color" default="#ffffff" value="#ffffff"/>  
 </Group>

就会在模板编辑器中出现这些选项:

<b:section>,<b:widget>则用来定义页面元素，widget需要包含在section中，section是widget的容器。

页面语法元素有以下几种：

• Includes：定义widget里的具体结构
• Data：需要填充的数据，相当于tumblr中的变量，使用obj.properties的方式来访问，比如<data:photo.url/>
• Loops：循环
• If/Else：条件判断

用blogger的模板来写tumblr的这个片段：

{block:Posts}
    ${Content}
    {block:IndexPage}
        {block:NoteCount}${NoteCount}{/block:NoteCount}
    {/block:IndexPage}
{/block:Posts}

就是：

<b:section>  
     <b:widget type='Blog'>  
         <b:loop var='post' values='posts'>  
             <b:includable id='post' var='post'>  
                 <data:post.body/>  
                 <b:if cond='data:blog.pageType == "index"'>  
                     <b:if cond='data:post.numComments >0'><data:post.numComments/></b:if>  
                 </b:if>  
             </b:includable>  
         </b:loop>  
     </b:widget>  
 </b:section>

写法上显然是tumblr的比较简洁。

但是可读性是blogger的较好，如果完全不看各自的文档，还是大概能明白blogger模板的逻辑，但tumblr的模板就很难理解了。

比较一下模板的数量，tumblr到现在差不多有900套风格，数量每天都在增加，而blogger只有区区十几套风格，tumblr的风格系统显然更加活跃，这和他模板语法的简单性，降低了普通用户的学习门槛有很大关系的。打个比方的话，tumblr的模板系统就是jquery，而blogger的模板系统就是YUI。

由于两者都允许用户上传javascript，因此安全性是必须要考虑的。

tumblr的做法是把认证cookie设到www.tumblr.com下，而自定义的风格都是只在个性化域名下才起作用，比如xxx.tumblr.com，从而阻止xss。

在tumblr上传一套原创风格貌似是需要人工审核的，这可以保证public的风格不会存在恶意代码。

另外技术上tumblr也会限制iframe的使用，但是用户还是很容易的通过修改自己主页的代码给自己的主页加上恶意代码。

blooger的安全机制不清楚。

• blogger风格文档
• tumblr风格文档