这一篇主要介绍blogger对“函数”，“类”的支持，作为渲染语言，将下面要介绍blogger模板特性称为“函数”，“类”是非常不恰当的，我更喜欢称为大小模块。blogger有includable模块和widget模块两种模块关键词来保证代码的可重用性，还有section模块，但其主要是作为支撑页面布局的模块化出现的。

在blogger的布局功能中，section关键词起到主要作用，你可以看看之前写的hello world例子，里面有一个section关键词，他在布局功能下是什么样呢？如图。

你可以看到布局功能里显示的正是我们在代码中定义的section，上图也显示出了我们只定义了一个标题widget在section中，在布局设置中，你可以为不同的section添加不同的小工具。这也就解释了代码是如何被重用的，例如你有一个很好的widget，那么你可以将你的widget提交到blogger，那么其他童鞋就可以通过点击添加获得了。

下面我们来详细了解一下section，widget，includable之间的关系。
section标签只能包含widget标签，widget标签只能包含includable标签。section标签只能在body标签中使用，widget标签只能存在于section标签中。includable只能在widget标签中使用，你可以看到，他们之间是一种强相关的依赖。

section标签的使用

作为布局模块控制器，需要提醒的是section有一些属性值是专为blogger布局功能设置的，这些属性和编程没有任何关系。下面是section可以设置的属性。

id：必须，全局唯一的值，只能由字母数字组成
class：可选，css类名，你如果不自己写css类的话，可以使用blogger自带的模板设计器功能内置的navbar，header，main，sidebar，footer这几个css类，默认为空
maxwidgets：可选，设置section可以包含widget的最大值，默认为无限制
showaddelement：可选，在布局功能里是否显示添加小工具按钮，默认显示

可以设置的属性有：

id：必须，全局唯一的值，只能由类型名+数字构成，比如HTML1,HTML2,Blog1,Blog2…
type：必须，blogger支持的widget类型有：

BlogArchive
Blog
Feed
Header
HTML
SingleImage
LinkList
List
Logo
BlogProfile
Navbar
VideoBar
NewsBar

这个值只起到辅助作用，blogger并不是根据这个值来确定真实的widget类型，其实id才是blogger看重且相信的唯一类型设置，你可以试一下，将id里设置的类型和type设置的完全不同，你会发现blogger自动更正了你的模板，将type属性设置为了id里的类型值。

设置好类型值后，你可以在布局功能里对widget进行参数设置。

自定义widget，即HTML类型的widget要想支持在布局中设置参数需要参考blogger开发widget文档，我不做这方面的详细介绍了，因为这超出了我们讲的范围。

大致的原理是使用xml文档描述你的widget可以让用户自定义设置的参数，当用户设置好点击添加按钮后，blogger会按照xml文档的描述格式化widget的代码，然后将代码嵌入模板的指定位置。

locked：可选，是否允许用户在布局页面删除这个widget，默认允许
title：可选，设置在布局视图中展示的名字

includable标签的使用

includable标签需要设置的属性如下

id：必须，模块名，注意当一个includable模块被命名为main后，这个模块即被定义为入口模块，就是说渲染系统渲染widget时首先寻找main模块
var：可选，参数名，如果模块不需要参数可不写
note：includable模块有命名空间，不同的widget是不同的命名空间，所以你不用担心别人的widget里定义了名字为foo的includable模块会影响到你的widget

综合使用

section和widget没有任何难点，哪里需要就在哪里定义，includable需要说一下，blogger在全局里定义了许多的includable模块，我们可以直接在页面的任何地方拿来就用，而我们自己是没办法定义全局命名空间的includable模块的，想想为什么？

这主要是因为模版系统要求includable必须定义在widget中，这就限制了我们自己定义includable只能在widget中使用。

下面是部分blogger内建支持的includable模块名，你可以这样调用一个includable模块：

<b:include data=’data:foo’ name=’name’/>
<b:include data='blog' name='all-head-content'/>
<b:include data='blog' name='google-analytics'/>
<b:include name='quickedit'/>

下面的实例同样来自Smite Chow Template，显示博客文章是如何渲染的。

<b:includable id='main' var='top'>
    <b:loop values='data:posts' var='post'>
        <b:include data='post' name='post_article'/>
        <!-- Ad -->
        <b:if cond='data:post.includeAd'>
            <div class='inline-ad'>
                <data:adCode/>
            </div>
        </b:if>
    </b:loop>
    <b:if cond='data:numPosts == 0'>
        <div class='rich_media_tool navigator'>
            页面已删除&#65292;请返回
            <a href='/'>
                首页
            </a>
            !
        </div>
        <b:else/>
        <div class='rich_media_tool navigator'>
            <div class='media_tool_meta tips_global meta_primary' style=''>
                导航&#65306;
            </div>
            <b:include name='page-navigator'/>
            <a class='tips_global meta_extra' href='#'>
                &#8593;回到页顶
            </a>
        </div>
        <div id='disqus_thread'/>
    </b:if>
    <div class='footer-pad'>
    </div>
</b:includable>

只显示了入口模块，其他includable模块省略。

有了这一部分的学习，在编程方面基本上我们已经讲完了，就剩下blogger的样式编程没讲，我只打算简单提提，因为样式编程基本上没有多少人使用，blogger提供样式可编程的特性只是为了给模板增加样式方面的傻瓜操作可操作性，这个初衷是好的，最终却是，普通用户觉得模板设计器太复杂，还不如直接找个好看的模板，会编程的开发人员觉得直接将样式硬写在模板里更方便，导致了没人用，有兴趣你可以试试模板设计器，就在布局页面。

Blogger官方文档

下面给出官方相关文档，请不要迷信，文档已经过期很久了，碰到我们上面没有讲解的属性基本上说明那个属性已经废弃了，渲染系统不支持了。

Blogger高级编程（三）

section标签的使用

widget标签的使用

includable标签的使用

综合使用

Blogger官方文档