web前端 | 博客（十二）博客系统的前台展示页面

博客系统的前台展示页面

增加请求路由

在服务器端增加首页和文章详情页面对应的请求路由。
将模板的公共部分抽离出来，包括模板骨架和页面公共的区域，并修改中的外链资源地址为绝对路径。

在route下的home.js中，添加路由。
art-template这个模板引擎要求模板的后缀是art。
在index.js中渲染相应的模板。

res.render('home/default.art');

article.js中同理。

现在，对应的请求路径就都可以访问了。

把模板文件中的外链CSS路径改为绝对路径

模板中的相对路径，即<link rel="stylesheet" href="css/base.css">是相对于地址栏的，不安全
在模板中/代表绝对路径，指的是public文件夹，由于目录情况

所以应改成
href="/home/css/base.css"

优化模板

接下来抽离相同的部分，不同的部分挖坑。
首先使用block抽离layout，接下来抽离头部等部分，写入文件，再include进来。

展示文章集合

再index.js中，导入文章集合构造函数，再使用mongoose-sex-page分页。渲染的时候传入result参数。
使用{ {each result.records}}遍历，
判断索引是奇数还是偶数，从而判断是fl类还是fr类
class="{ {$index % 2 == 0 ? 'fl' : 'fr'}}"

{
  {block 'main'}}
	{
  {include './common/header.art'}}
	<!-- 文章列表开始 -->
	<ul class="list w1100">
		{
  {each result.records}}
		<li class="{
    {$index % 2 == 0 ? 'fl' : 'fr'}}">
			<a href="article.html" class="thumbnail">
				<img src