首先从默认模板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
到这里,首页的模板就修改好了。下篇我们再来一起看一下文章列表和详情的显示,敬请期待。

