首先从默认模板BonHumeur中复制一份layout.html到自己的模板目录中，这个就是我们的模板框架了，通用的css，js都放到这个文件中。
然后，<body></body>之间的内容换成下载的index.html文件的<body>内容，然后分析下页面结构，分为头部，中左，中右和底部，一般我们的头部和底部是不会变化的，主要通过中部内容的变化显示不同的页面。所以我们可以把头部和底部留下，中部先用一个#@content()代替，这个我们一会儿再说。
为了让layout.html页面里显得整洁，可以再把头部独立出去一个header.html页面，在这里用#include("header.html")进行引用。可以从上一篇文件看到，这个模板的头部不太适合，所以进行一下修改，我个人比较喜欢简洁的风格，所以最终效果是这样的。
这里涉及了categories元素的使用来输出分类信息，以及一级和二级分类的显示，代码如下，供大家参考：
<nav class="u-menu container">
<ul>
#categories(asTree=true)
#for(category : categories)
#if(category.isTop())
<li class="navmenu"><a href="#(category.url ??)" class="#(category.isActive ? 'active' : '')">#(category.title ??)</a>
#for(category2 : category.getChilds())
<ul>
<li><a href="#(category2.url ??)" class="#(category2.isActive ? 'active' : '')">#(category2.title ??)</a></li>
</ul>
#end
</li>
#end
#end
#end
</ul>
</nav>接下来对index.html页面进行修改，因为上面已经把框架提取出去了，所以现在这个页面中只包含中左和中右两部分的内容就可以了。
在index.html最上面增加三行：
#include("layout.html")
#@layout(true)
#define content()头两行作用是指明要使用的框架页面，第三行的作用是指明下面的内容是供layout.html中的#@content()标签调用的。为了标记content标签的结束，所以在index.htlm的最后一行也要写上：
#end现在开始处理中左部分的内容，中左包括文章列表和下部分页功能，先来处理文章列表。
把默认的列表内容删除，只保留一条就行。
因为我们要在首页显示分页功能，所以需要使用articlePage标签，用来包裹住列表内容和分页内容，最后要以#end结尾。
articlePage可以指定当前页面显示的条数，#articlePage(pageSize=10)。然后对后台取到的文章列表进行循环：
#for(article : articlePage.list)
#end在其中填充对article的显示，这块不细说了，大家看代码：
#for(article : articlePage.list)
<div class="blog-main">
<div class="heading-blog">
<a href="#(article.url ??)">
#(article.title ??)
</a>
</div>
<a href="#(article.url ??)">
<img src="#(article.firstImage ??)" class="img-responsive img-rounded" />
</a>
<div class="blog-info">
<span class="label label-primary"><i class="fa fa-clock-o"></i> #date(article.created)</span>
<span class="label label-success">
#articleCategories(article.id,"category")
#for(category : categories)
<a href="#(category.url ??)" class="label" target="_blank">#(category.title ??)</a>#if(!for.last) , #end#end#end</span>
<span class="label label-danger">#(article.user.nickname)</span>
<span class="label label-info"><i class="fa fa-eye"></i> #(article.view_count) <i class="fa fa-comment-o"></i> #(article.comment_count)
</span>
</div>
<div class="blog-txt">
#maxLength(article.text,100)
</div>
</div>
#end然后是分页功能，这里用到的是articlePaginate标签，然后对pages进行循环，获取page对象的属性信息。
#articlePaginate()
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center ">
#for(page : pages)
<li class="page-item #(page.style ??)">
<a class="page-link" href="#(page.url ??)">
#(page.text ??)
</a>
</li>
#end
</ul>
</nav>
#end再强调一句，articlePaginate标签是在articlePage标签里的。
然后是中右部分。
首先是我的专栏，这里使用的tags标签，从标签中取的值。
我是按各标签的文章数进行排列，显示前五个标签。代码如下：
#tags(orderBy="count desc",count=5)
#for(tag : tags)
<li class="list-group-item">
<span class="badge">#(tag.count)</span>
<a href="#(tag.url)">#(tag.title)</a>
</li>
#end
#end然后是TOP5文章，按照浏览数排序显示前五篇文章。代码如下：
#articles(orderBy="view_count desc",count=5)
#for(article : articles)
<li class="list-group-item">
<span class="badge">#(article.viewCount)</span>
<a href="#(article.url)">#(article.title)</a>
</li>
#end
#end最后是NEW5文章，按照创建时间排序显示前五篇文章。代码如下：
#articles(orderBy="created desc",count=5)
#for(article : articles)
<li class="list-group-item">
<span class="badge">#(article.viewCount)</span>
<a href="#(article.url)">#(article.title)</a>
</li>
#end
#end到这里，首页的模板就修改好了。下篇我们再来一起看一下文章列表和详情的显示，敬请期待。
