首先从默认模板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

    到这里,首页的模板就修改好了。下篇我们再来一起看一下文章列表和详情的显示,敬请期待。

 

 

最后修改于 2018-11-26 13:00:59
如果觉得我的文章对你有用,请随意赞赏
扫一扫支付
上一篇