第8章 增加存檔頁面

現(xiàn)在我們來給博客增加存檔功能，當(dāng)進(jìn)入存檔頁時(shí)，按年份和日期的降序列出所有的文章。

首先，我們?cè)谥黜撟髠?cè)導(dǎo)航中添加存檔頁（archive）的鏈接，修改 header.ejs，在 home 下添加一行代碼：

<span><a title="存檔" href="/archive">archive</a></span>

打開 post.js ，在最后添加以下代碼：

//返回所有文章存檔信息
Post.getArchive = function(callback) {
  //打開數(shù)據(jù)庫(kù)
  mongodb.open(function (err, db) {
    if (err) {
      return callback(err);
    }
    //讀取 posts 集合
    db.collection('posts', function (err, collection) {
      if (err) {
        mongodb.close();
        return callback(err);
      }
      //返回只包含 name、time、title 屬性的文檔組成的存檔數(shù)組
      collection.find({}, {
        "name": 1,
        "time": 1,
        "title": 1
      }).sort({
        time: -1
      }).toArray(function (err, docs) {
        mongodb.close();
        if (err) {
          return callback(err);
        }
        callback(null, docs);
      });
    });
  });
};

接下來我們?cè)?index.js 中添加 /archive 的路由規(guī)則。打開 index.js ，在 app.get('/u/:name') 前添加以下代碼：

app.get('/archive', function (req, res) {
  Post.getArchive(function (err, posts) {
    if (err) {
      req.flash('error', err); 
      return res.redirect('/');
    }
    res.render('archive', {
      title: '存檔',
      posts: posts,
      user: req.session.user,
      success: req.flash('success').toString(),
      error: req.flash('error').toString()
    });
  });
});

在 views 文件夾下新建 archive.ejs 模版文件，添加如下代碼：

<%- include header %>
<ul class="archive">
<% var lastYear = 0 %>
<% posts.forEach(function (post, index) { %>
  <% if (lastYear != post.time.year) { %>
    <li><h3><%= post.time.year %></h3></li>
  <% lastYear=post.time.year } %>
  <li><time><%= post.time.day %></time></li>
  <li><a href="/u/<%= post.name %>/<%= post.time.day %>/<%= post.title %>"><%= post.title %></a></li>
<% }) %>
</ul>
<%- include footer %>

這里我們通過在模版中設(shè)置一個(gè) lastYear 變量判斷是否和上次已經(jīng)顯示的年份相同，相同則不再顯示年份，不同則顯示。

最后，在 style.css 中添加如下樣式：

.archive{list-style:none;line-height:28px;}
.archive h3{margin:0.5em 0;}
.archive time{float:left;font-size:14px;color:#999999;margin-right:1.2em;}

現(xiàn)在，我們?cè)黾恿宋恼碌拇鏅n頁面。